随笔分类 -  (新) Figma

摘要:前言 我原本以为, 在 Figma 只要用 Auto Layout 就可以打天下. 真的是 too young too simple. 要做一个简单的 7:3 比例, 用 Auto Layout 是做不出来的. Auto Layout fill container 只能做到平均 50% : 50% 阅读全文
posted @ 2021-12-26 14:03 兴杰 阅读(572) 评论(0) 推荐(0) 编辑
摘要:参考: Input Field Interaction using Interactive Components in Figma Create interactive components with variants Sign up for the interactive components b 阅读全文
posted @ 2021-10-06 19:17 兴杰 阅读(117) 评论(0) 推荐(0) 编辑
摘要:Figma 其实有蛮多黑科技的, 因为需求真的太多了, 在还没有实现的期间就诞生了很多 hacking 的 way. Feature Issue 实现 min-height 通过 0px 黑科技 其实里面还有一个 Frame 只是 Width = 0.00001px (太小就会变成 0, 但你不能直 阅读全文
posted @ 2021-10-06 18:41 兴杰 阅读(327) 评论(0) 推荐(0) 编辑
摘要:挺简单的, 只要知道它有什么, 基本上就会用了 监听 Event Type 监听 Callback Action 过度 Animation Frame Scrolling 阅读全文
posted @ 2021-10-06 18:36 兴杰 阅读(387) 评论(0) 推荐(0) 编辑
摘要:Design System 我们做设计通常会 Follow 一个 Design System, 比如 Material Guide. 里头会定义 Font, Color, Effect (Elevation) 等规范. Style 封装 & 复用 在 Figma 我们可以为我们调好的颜色, 字体命名 阅读全文
posted @ 2021-10-06 18:20 兴杰 阅读(679) 评论(0) 推荐(0) 编辑
摘要:参考 Create and use variants 定义与用途 Variants 是 Component 的扩展使用方式. 它就像 HTML 元素的属性一样, 通过修改属性, 元素就会变成相应的样式. 通常我们用它来实现 state (状态), 比如: hover, focus, error. 创 阅读全文
posted @ 2021-10-06 16:11 兴杰 阅读(573) 评论(0) 推荐(0) 编辑
摘要:参考 Guide to Components in Figma Figma Tutorial: Components - The Basics (Youtube) 定义与用途 Figma 的 Component 有点 Class 和 Instance 的关系. Component 就是 Class, 阅读全文
posted @ 2021-10-06 12:54 兴杰 阅读(2241) 评论(0) 推荐(0) 编辑
摘要:用途 Auto Layout 有点像 CSS 的 Flex, 它还带有 responsive 的概念.使用它以后可以替代掉不少 constraints 的写法. 用法 一个 parent 抱着多个 children 设置横向或纵向 (只能一个方向) 设置 children 之间的 gap 设置 pa 阅读全文
posted @ 2021-10-05 21:29 兴杰 阅读(611) 评论(0) 推荐(0) 编辑
摘要:Scroll Scroll 属于 prototype 的一部分. 当一个 Frame 的内容超出 Frame 的高度或宽度时, Frame 就具备了 scroll 的能力. 通过 uncheck clip content 我们可以看到内容已经超出 Frame 的高度了 在 prototype 内有一 阅读全文
posted @ 2021-10-05 21:21 兴杰 阅读(2347) 评论(0) 推荐(0) 编辑
摘要:用途 Constraints 用于 responsive design, 子元素和父元素建立约束关系后, 当父元素 dimension 变换的时候, 子元素会做出相应的变化 (移动位置或 resize dimension) 例子 约束有份左右和上下, 概念是一样的,只是方向不同而已, 所以这里我指说 阅读全文
posted @ 2021-10-05 20:20 兴杰 阅读(751) 评论(0) 推荐(0) 编辑
摘要:Figma 有几个常用的对齐方法 从左到右 1. 左对齐 Alt + A 2.左右居中对齐 Alt + H 3.右对齐 Alt + D 4.上对齐 Alt + W 5.上下居中对齐 Alt + V 6.下对齐 Alt + S 7. Child 对齐 Parent 调整间距 1. 上下间距调整 Alt 阅读全文
posted @ 2021-10-05 19:47 兴杰 阅读(2005) 评论(0) 推荐(0) 编辑
摘要:Figma 画 Border 其实还挺难的 4 边框 可以用 build-in 的 Stroke 实现 注: border 是在内部的, 和 HTML 一直 Border Top, Right, Bottom, Left 如果只想要其中 1 的话, Stroke 就不足够用了, 需要用 Effect 阅读全文
posted @ 2021-10-05 17:19 兴杰 阅读(1360) 评论(0) 推荐(0) 编辑
摘要:步骤 按 c 键 -> 点击区域 -> 写 comment -> post 它不仅仅在 design 的 page 可以写 comment 哦, 在预览 prototype 页面也是可以写 comment 的 阅读全文
posted @ 2021-10-05 16:50 兴杰 阅读(216) 评论(0) 推荐(0) 编辑
摘要:安装 Figma 安装 plugin 基本上就是点击一下开启而已. 到社区搜索 -> 点击 install Material Icon 下载地址 它的交互不是 drag 出来哦, 而是点击 icon 然后它会出现在某个地方... icon 的结构有 2 层, 要调 dimension 的话调外面那层 阅读全文
posted @ 2021-10-05 16:33 兴杰 阅读(184) 评论(0) 推荐(0) 编辑
摘要:大纲 Figma 的颜色是通过 FIll 实现的 (Fill 还有其它功能比如 fill 图片) 整体大概长这样, 我们一个一个看 颜色和 opacity 阅读全文
posted @ 2021-10-05 16:18 兴杰 阅读(167) 评论(0) 推荐(0) 编辑
摘要:结构 Figma 的字都会有一个 wrapper 控制 width. 虽然它是看不见的. 但是你要知道它有那个概念存在. 按 T 键, 然后鼠标点击或拉就可以做出一个 text 了. 基本配置 我顺着 Z 字形往下列出来 Roboto 是选字体 (它会链接电脑任何有安装的字, 如果是 web 版本的 阅读全文
posted @ 2021-10-05 15:11 兴杰 阅读(1144) 评论(0) 推荐(0) 编辑
摘要:参考: Figma Tutorial: Images 3 Ways to Insert Image 1. rectangle / frame + fill 画一个 rectangle / frame 然后去 fill 选择 image then browse an image to insert. 阅读全文
posted @ 2021-10-05 14:18 兴杰 阅读(228) 评论(0) 推荐(0) 编辑
摘要:参考: 10 tips to work 10x faster in Figma 15 tips to design 15X faster in Figma | Figma Tutorial 2021 常用 keyboard shortcut F = 画 frame O = 画圆形 T = 字体 C 阅读全文
posted @ 2021-10-05 12:52 兴杰 阅读(258) 评论(0) 推荐(0) 编辑
摘要:Frame = <div> Frame 就类似 HTML 中的 div, 它和形状 rectangle 特性上蛮相识的, 但是使用场景其实差很多, 所以不要搞错哦. (除了图片很少会用到 rectangle 的) Keyboard F 或者右上角选 Frame 就可以画出一个 frame 了. Fr 阅读全文
posted @ 2021-10-05 12:35 兴杰 阅读(1491) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示