摘要：
参考 Guide to Components in Figma Figma Tutorial: Components - The Basics (Youtube) 定义与用途 Figma 的 Component 有点 Class 和 Instance 的关系. Component 就是 Class, 阅读全文
posted @ 2021-10-06 12:54
兴杰
阅读(2637)
评论(0)
推荐(0)
摘要：
用途 Auto Layout 有点像 CSS 的 Flex, 它还带有 responsive 的概念.使用它以后可以替代掉不少 constraints 的写法. 用法 一个 parent 抱着多个 children 设置横向或纵向 (只能一个方向) 设置 children 之间的 gap 设置 pa 阅读全文
posted @ 2021-10-05 21:29
兴杰
阅读(709)
评论(0)
推荐(0)
摘要：
Scroll Scroll 属于 prototype 的一部分. 当一个 Frame 的内容超出 Frame 的高度或宽度时, Frame 就具备了 scroll 的能力. 通过 uncheck clip content 我们可以看到内容已经超出 Frame 的高度了 在 prototype 内有一 阅读全文
posted @ 2021-10-05 21:21
兴杰
阅读(2704)
评论(0)
推荐(0)
摘要：
用途 Constraints 用于 responsive design, 子元素和父元素建立约束关系后, 当父元素 dimension 变换的时候, 子元素会做出相应的变化 (移动位置或 resize dimension) 例子 约束有份左右和上下, 概念是一样的，只是方向不同而已, 所以这里我指说 阅读全文
posted @ 2021-10-05 20:20
兴杰
阅读(838)
评论(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
兴杰
阅读(2432)
评论(0)
推荐(0)
摘要：
Figma 画 Border 其实还挺难的 4 边框 可以用 build-in 的 Stroke 实现 注: border 是在内部的, 和 HTML 一直 Border Top, Right, Bottom, Left 如果只想要其中 1 的话, Stroke 就不足够用了, 需要用 Effect 阅读全文
posted @ 2021-10-05 17:19
兴杰
阅读(1663)
评论(0)
推荐(0)
摘要：
步骤 按 c 键 -> 点击区域 -> 写 comment -> post 它不仅仅在 design 的 page 可以写 comment 哦, 在预览 prototype 页面也是可以写 comment 的 阅读全文
posted @ 2021-10-05 16:50
兴杰
阅读(253)
评论(0)
推荐(0)
摘要：
安装 Figma 安装 plugin 基本上就是点击一下开启而已. 到社区搜索 -> 点击 install Material Icon 下载地址 它的交互不是 drag 出来哦, 而是点击 icon 然后它会出现在某个地方... icon 的结构有 2 层, 要调 dimension 的话调外面那层 阅读全文
posted @ 2021-10-05 16:33
兴杰
阅读(208)
评论(0)
推荐(0)
摘要：
大纲 Figma 的颜色是通过 FIll 实现的 (Fill 还有其它功能比如 fill 图片) 整体大概长这样, 我们一个一个看 颜色和 opacity 阅读全文
posted @ 2021-10-05 16:18
兴杰
阅读(186)
评论(0)
推荐(0)
摘要：
结构 Figma 的字都会有一个 wrapper 控制 width. 虽然它是看不见的. 但是你要知道它有那个概念存在. 按 T 键, 然后鼠标点击或拉就可以做出一个 text 了. 基本配置 我顺着 Z 字形往下列出来 Roboto 是选字体 (它会链接电脑任何有安装的字, 如果是 web 版本的 阅读全文
posted @ 2021-10-05 15:11
兴杰
阅读(1323)
评论(0)
推荐(0)
浙公网安备 33010602011771号