面对层出不穷的屏幕分辨率，一份完美自适应的设计稿可以省去设计师不少重复劳动。Figma 中自带「Constraints」功能，该功能专为解决自适应这一需求而设计，类似 Sketch 中的「调整尺寸」功能。我们使用豆瓣电影小程序的导航栏作为实验，一起了解一下 Constraints 的实际操作。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-b4cf481e01531360a222f4a9c46d52eb_b.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">教程相关</h2><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0;"><li>官方文档：<a target="_blank" href="https://help.figma.com/article/54-constraints" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></li><li>阅读时长：4分钟</li><li>操作时长：15分钟</li><li>教学材料：<a target="_blank" href="https://link.zhihu.com/?target=https%3A//www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design%3Fnode-id%3D31%253A3" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></li></ol><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第一步，了解定义</h2>Constraints 功能让用户可以通过对图层 x 轴、y 轴布局方式的调整，实现图层按照一定的策略进行缩放，保障不同图层在页面不同位置的布局方式。Constraints 告诉 Figma 设计稿中的元素在用户拉伸他们的框架时应该如何响应，这让你轻松掌控设计稿在不同的屏幕尺寸以及设备上的效果。你可以为框架里的任何元素应用 Constraints。<ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em;"><li>你可以为框架中嵌套的框架设置 Constraints；</li><li>你可以为同一个元素同时设置 x 轴和 y 轴的 Constraints；</li><li>你可以通过 Constraints 定义元素在可以滚动的原型长页面里是固定还是跟随滑动。</li></ul>Constraints 的操作界面和展开选项如下图所示。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-8324e555817d9878a427de82a1f60d35_b.png"/>首先看一下 x 轴不同设置的实际效果和说明。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-b4c2d618822f404c0bd0056c09063eab_b.gif"/>再看一下 y 轴不同设置的实际效果和说明。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-5bab950e382b9a796b945c6a85925fe7_b.gif"/>Constraints 支持两种设置方式，既可以通过左侧可视化界面点选，也可以通过右边的两个按钮，点击展开菜单并选定。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-f1172f52430cf0a03d9beac8b31c3fcc_b.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第二步，图层分组</h2>通过插入不同的图层，还原豆瓣导航栏上的各种元素。关于图层的插入在系列中其他教程有讲，欢迎补课。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-97f9bd4fb1330ceef72c69d7f49b0e49_b.png"/>然后将图层按照功能模块分组。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-20bfb2ac8d2f41124a0abda947ca2375_b.png"/><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0;"><li>用于显示时间的叫做 Time，是 StatusBar 的一部分；</li><li>用于显示状态的叫做 Status，是 StatusBar 的一部分；</li><li>用于搜索的叫做 SearchBar；</li><li>用于显示页面标题的叫做 Title，是 NaviBar 的一部分；</li><li>用于放置小程序全局操作的叫做 NaviControl，是 NaviBar 的一部分。</li></ol><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第三步，设置 Constraints</h2>我们为五组图层设定不同的缩放策略：<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-9295cb8fe015fd63f735ae61c4a1e81b_b.png"/>设置以后拉伸 Instance Component 可以发现 SearchBar 中的 Hint 部分拉伸异常，这是由于图层组嵌套的缘故，大组和小组在同样缩放时，对布局的要求不同。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-9cc81fcef91cffedebfcbd7048a0384a_b.gif"/>我们针对产生冲突的 Hint 重新进行 Constriants 设定。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-18f384752efdcb73b3df5ffbe33fda1f_b.png"/>大功告成，效果如图。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-6d96214b4da60df0b0c105478dea3ede_b.gif"/>

用 Constraints 功能制作自适应导航栏

用 Constraints 功能制作自适应导航栏 - 胡思

Content Reel 可快速将文本,头像和图标拖入你的设计中。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-f5458d2940fd64a3735672eaf72ad865_b.png"/><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">文本填充</h2>文本包含姓名、电话号码、美国地址、邮箱地址、URLs、公司名、用户名称和城市。选中一个或多个层，选中 Content Reel 的文本项。通过单击右侧的「…」可以修改调整文本信息。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-64d5a5dfcac9dca899695c2a73ca431d_hd.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">头像填充（开发中…）</h2>Content Reel 包含大量男性和女性头像类型。选中一个或多个层，从 Content Reel 的人物头像选项中选择头像类型。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-14bff3047366415a47a93870720bf070_b.png"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">图标</h2>来自Microsoft的Segoe MDL2 Assets字体的图标，可以从那里下载。选中一个或多个层，从 Content Reel 的图标选项中点击选择，或者拖拽到画布上。不过要确保已安装Segoe MDL2。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-038c9391066d20823ebb3f2b366694c4_b.png"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">面板收起</h2>Content Reel 也可以将面板尺寸缩小，不会妨碍到设计。点击下面的小箭头就可以收起面板。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-16455cbadad8c414b75e8a7dac633c25_hd.gif"/>

Content Reel

Content Reel - Figma 内容填充插件 - 胡思

Figma

Figma - 网页端界面设计工具 - 胡思

界面设计

继上次使用图层功能对豆瓣电影首页进行模块划分后，又处理好本地字体的使用。然后我导入了几张电影海报，框选它们时发现了一个好玩的功能。查了一下官方文档，发现这个功能叫做 Smart Selection，用于高效操作设计稿中的图层网格。Sketch 在 55 版本中也偷偷放上了半个这个功能，离 Smart Selection 还是有一些差距，不过我猜很多同学并没有发现这个小秘密。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-5494753d5373f983220a69d6a6f30352_b.gif"/>Sketch 55的小秘密<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">教程相关</h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>Figma 地址：<a target="_blank" href="http://www.figma.com/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">Figma: the collaborative interface design tool.</a></li><li>教材地址：<a target="_blank" href="https://www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design?node-id=31%3A3" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></li><li>阅读时长：3分钟</li><li>操作时长：5分钟</li></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第一步，整理图层</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-c0d9f86df456026086826dd3323cb759_b.gif"/>使用「图层插入 - 图像」功能将几张海报上传至设计稿中。使用鼠标拖动将这些海报全部框选，此时会发现整体选中框的右下角有一个「蓝色的按钮」。点击该按钮会自动将杂乱无序的海报图层整理成有序的网格。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第二步，调整间距</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-4cd39a14802d01c9de0d8f135f684eb0_b.gif"/>此时再一次使用鼠标拖动框选住整个海报网格，鼠标 Hover 时可以发现整体选框中多了很多操作功能提示。拖动行元素之间的「水平横线」可以调整水平间距，垂直亦然。这个间距调整会影响所有行元素的间距，不仅当前两行的间距。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第三步，调整布局</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-1b9c679bb22c1f47c45eb2516609edc0_b.gif"/>鼠标 Hover 选框时，里面的每个图层中心都会有个小圆点，Hover 海报图层时小圆点会放大成为描边圆圈⭕️。进一步 Hover 该圆圈时可以拖动这个图层。此时你可以拖动这个图层跟别的图层调换位置，也可以把这个图层放置到别的行中。

使用 Smart Selection 玩转图层网格

使用 Smart Selection 玩转图层网格 - 胡思

Autoflow 简化了在 Figma 中绘制流程线的过程。选择两个设计元素，按下快捷键，元素之间便会生成简约美观的连接线。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-a33501ad47f65e59486d95c8f0207339_hd.png"/><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">简洁的流程线</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-ed7bc3e67f54c792b97a6073dbcb9a9b_hd.png"/>靓稿配靓线。Autoflow 会选择设计元素中简单最短路径进行连接，并且以直线为主，只在必要时弯曲。因此你的设计稿不会看起来乱七八糟。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">避开设计稿</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-8d5cd8a33cdb6a55ad2fc27c3298f5c5_hd.png"/>Autoflow 会自动避开画板上的设计元素，不会干扰你的设计工作。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">样式定义（正在做）</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-0d9e8807283922d123efd8045304c249_hd.png"/>设计元素间的关系是多样的，不久 Autoflow 就可以支持样式的更改，以支持描述这些多样的关系。<hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">轻松使用</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-969e03bd41cb4aec4b55b0d245cab7f7_hd.gif"/><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>选择两个设计元素</li><li>在 Menu - Plugins - Autoflow</li><li>也可以使用快捷键 ⌥⌘P 重复上一个命令</li></ol><hr/>这款插件使用起来很简单，也算是解决了一个大问题。只是由于赶时间，功能和样式都比较简陋，期待作者接下来的动作。

Autoflow

Autoflow - 流程绘制插件 - 胡思

在过去，制作动效原型的工作流需要两个及以上的的工具协作：绘制原型，导入 Principle / Flinto / AE 中制作动效，最后编写动效设计说明或是使用 bodymovin 交付。 在 Figma 平台里，Figmotion 插件可以完成一站式的动效设计，输出格式包括：Figma 内部预览、渲染为 gif/mp4/webM 格式、导出 CSS/JSON 代码格式。目前开发版本为0.1.14，不支持编组。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-f87971cd1116bc3c7dc3dd06addb8abd_hd.png"/><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">调用插件</h2>通过菜单栏调用插件或右键直接调用Figmotion 插件。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">设置关键帧</h2>插件的工作范围基于框架（Frame，类似于 Sketch 的画板），因此第一步需要选择一个 Frame 作为工作区。Figmotion 的整体工作逻辑类似 Aftereffects，即在时间序列中插入关键帧，并定义速度曲线，形成动态效果。每个图层都有一系列属性可以调整，如位置、尺寸、角度、透明度等。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-e3c31e4dfbb0a0bc2da472a9b7132dc0_hd.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">设置缓动曲线</h2>在 Figmotion 中支持4种预设和自定义曲线，分别为 加速曲线 easeIn、减速曲线 easeOut、标准曲线 easeInOut、线性 linear 。在自定义曲线中，X轴为时间，Y轴为效果进度。标准缓动曲线 <img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-2107c625c6dd4eeeffaa409716112f2e_hd.gif"/>减速缓出曲线<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-2cfd8ae5eae556be6c8477f694941c67_hd.gif"/>加速缓进曲线<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-859f0f18f36d69a46a8990935b0a1380_hd.gif"/><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-20cd8808ace6d2f7b3da03895be5699c_hd.png"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">预览与导出</h2>设置完成后，可以点击播放按钮在 Figma 内预览。点击 Render 渲染按钮，渲染完成后通过 view last render 在浏览器中查看并下载到本地。你也可以使用 Export 直接导出 CSS 和 JSON 文件。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-f90597121a97f9cf62aca8eda83b88b5_hd.png"/>

Figmotion

Figmotion - Figma 动效义肢 - 胡思

<a target="_blank" href="https://zhuanlan.zhihu.com/p/70913016" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">接上一篇创建了第一个 Figma 设计稿</a>，正式画稿之前我们需要熟悉一下 Figma 的设计工作台。万幸的是，以 Sketch 为代表的新 UI 设计工具，工作台的布局都差不多。我们以总分的形式拆解 Figma 的设计工作台。先来一张动图遍历一下工作台的大多数功能。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-949c795b43811d0d57bc477bd89f5e92_b.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">教程相关</h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>Figma 地址：<a target="_blank" href="http://www.figma.com/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">www.figma.com</a></li><li>阅读时长：5分钟</li><li>操作时长：12分钟</li></ul><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><hr/>布局总览 </h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-4fb9c6cc3042a081deb0e170892703f8_b.png"/>整个 Figma 设计工作台可以划分为四个主要区域：<ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>工具栏：这里集合了大部分 Figma 的功能，包含 Figma 菜单；</li><li>图层栏：这里放置了设计稿中所有的图层；</li><li>检视窗：这里可以看到不同图层的具体属性；</li><li>设计区：这里呈现正在处理的设计稿，主要设计工作在这完成，很好理解，本篇不做解读。</li></ol><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">工具栏</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-7c1ec0ab7522a99c00782ec5f92f622c_b.png"/><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>菜单：这里集合了 Figma 中所有的功能，可以使用搜索功能定位自己需要的功能，前提是你的看得懂😂；</li><li>鼠标：这里可以选择「Move」或「Scale」，其中 Move 就是普通鼠标，Scale 是放大镜，但是我们可以用浏览器自带的放大缩小快捷键，所以 Scale 可能并不常用；</li><li>图层插入：这里集合了 Figma 中可以插入的各类图层，包括画布、图形、线、文字和评论，鼠标 hover 时会显示丰富的插入选项；</li><li>标题：这里可以对整个设计稿进行管理，里面有个「Show Version History」很有可能是版本管理，等我后续研究研究。另外，选中图层时，这里会替换成图层相关操作，比如蒙版、编辑、网格；</li><li>分享：在这里可以分享你的设计稿给别人，比如我的设计稿地址是<a target="_blank" href="https://www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design?node-id=0%3A1" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a> ，点击链接进来的小伙伴头像会依次排列在此区；</li><li>演示：制作好原型后用该功能进行演示；</li><li>尺寸：工作台参数设定，可以对一些设计区的参考线进行管理。</li></ol><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">图层栏</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-7dfc4bca485b7b9bd2328b908e22eea7_b.png"/><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>设计资产：封装好的组件，以及加载的设计资产库都会在此呈现，方便设计师对已生产和团队资源充分利用。具体设计组件的创建管理、库的创建管理会配上实例，呈现在单独的教程；</li><li>图层管理；设计稿中的所有页面和图层会呈现在图层管理中，设计师在这里管理具体的设计图层。</li></ol><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">检视窗</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-ce618473a91ea96339a7c1b07d0f6e1e_b.png"/><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>设计：这里可以对图层的参数进行设置和管理；</li><li>原型：在这里设置原型的相关参数，比如原型的触发、跳转目标、转场方式；</li><li>代码：这里可以读取图层的样式代码，支持 iOS、CSS、Android。</li></ol>

熟悉 Figma 的设计工作台

熟悉 Figma 的设计工作台 - 胡思

Figma 虽然界面简单，看上去很简洁。但在实际使用的时不时出现一些让人眼前一亮的小功能。这些功能只会在你绘制图形的时候出现，不会聚在工具栏、检视窗等界面上。比如说 Smart Selection。今天介绍的功能 Arc 就只能在椭圆图层上使用。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-5f3d720b9ba61103591634929d304e1e_hd.gif"/><hr/>Arc 功能包含了四个子操作点。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">打开缺口</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-dcf837fdea4febbf1a07fa6a2f1949fb_hd.gif"/>当鼠标 hover 到椭圆图层上时，右手边会出现一个操作点，叫做「Arc」。拖动这个操作点可以为椭圆图层打开缺口。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">调整朝向</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-38b8a340c3b563fdce8806e77ef46286_hd.gif"/>椭圆图层打开缺口后，会出现三个可以拖拽的操作点。顺时针第一个操作点叫做「Start」，拖动它可以更改开口的朝向。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">调整开口</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-17d0df7a63a998dc6434f3a8918369db_hd.gif"/>顺时针第二个操作点叫做「Sweep」，拖动它可以更改开口的大小。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">制作圆环</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-54916a6bdd5cb3c289cfb7ae2015718a_hd.gif"/>躺在圆心的操作点叫做「Ratio」，拖动它可以制作圆环，可以正向或反向拖动。<hr/>那么咱们可以用 Arc 来做点什么呢？比如画个饼图。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第一步，绘制正圆</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-a483c13c55dcfac2e5bf5e79570d9465_hd.gif"/>点击快捷键 o，按住 shift + option，拖拽出一个正圆。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第二步，复制改色</h2>粘贴复制出一个同样的正圆，并把颜色改深。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-63a2f3ec026cfe2012c6594fdb6523a7_hd.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第三步，制作扇形</h2>找到第二个正圆上的 Arc 操作点，拖拽开口。然后继续拖砖，更改开口角度，最终形成一个锐角扇形。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-919bac288c920e5c27b4600978366c7f_hd.gif"/>好了，一张朴素的饼图做完了。在此基础上还有很多可以发挥的点，就教给大家自行探索了。在 Sketch 中画这么一个饼图避免不了几次布尔运算，所以 Figma 的这个 Arc 功能还是有心的，为设计师节省了不少时间。

用 Arc 功能为椭圆图层易形

用 Arc 功能为椭圆图层易形 - 胡思

上一次在玩弄文字图层的时候，没有找到像样的中文字体。这才想起 Figma 在云端，而我花里胡哨的字体库在本地。那么让我们来解决这个小小小问题。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-1ac83841a8b0f42c4ad82127cf29cc6e_b.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">教程相关</h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em;"><li>Figma 地址：<a target="_blank" href="http://www.figma.com/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">www.figma.com</a></li><li>教材地址：<a target="_blank" href="https://www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design?node-id=31%3A3" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></li><li>阅读时长：2分钟</li><li>操作时长：4分钟</li></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第一步，进入字体设置页面</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-505fce0751dd55c54c623eb84b12e9ac_b.png"/>如图依次进入「工具栏」-「Menu」-「Help and Account」-「Open Font Settings」。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第二步，下载安装 FigmaInstaller</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-fd56b689eb7e878dafa118429932fd3e_b.png"/>点击「Download installer to enable local fonts」，嫌麻烦的同学直接<a target="_blank" href="https://font-daemon.figma.com/FigmaInstaller.pkg" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里下载 FigmaInstaller</a>。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-258e4007a2ae988fa420a4987c83a3c8_b.gif"/>下载后双击安装，过程无脑。当然，你也可以使用 <a target="_blank" href="https://font-daemon.figma.com/FigmaUninstaller.pkg" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">Uninstaller</a> 卸载刚刚安装的 FigmaInstaller。

在 Figma 中调用本地字体

在 Figma 中调用本地字体 - 胡思

将 Unspash 中美丽的摄影作品插入你的设计稿中。<hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">摄影作品填充</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-5503524b50aca88d25cb2ce399391bd0_hd.png"/>你可以插入随机照片或者搜索特定的内容。Unsplash 拥有摄影作品作者的许可，你可以免费在个人或商业项目中使用。

Unsplash

Unsplash - 摄影作品填充插件 - 胡思

在 Figma 的设计工作台中，工具栏里有很多图层插入功能，这些功能既基础又核心。让我们掌声请出今天的主角 - 微信小程序「豆瓣评分」，一起通过对其首页的布局划分，来上手这些图层插入功能。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-b6393af36e24c01e9552972210d3be7a_b.png"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">教程相关</h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>Figma 地址：<a target="_blank" href="http://www.figma.com/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">www.figma.com</a></li><li>教材地址：<a target="_blank" href="https://www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design?node-id=31%3A3" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></li><li>阅读时长：3分钟</li><li>操作时长：10分钟</li></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第一步，插入 Frame</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-db172a8593ca1e071aedcc56ce5540f7_b.gif"/>其实 Frame 就是 Sketch 里的 Artboard（画板），点选以后不要着急在画布上拖拽鼠标，右侧检视窗中可以选择现成的市面上设备的尺寸。在这里我们选择 iPhone X。调用 Frame 的快捷键是 F。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第二步，插入矩形</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-421a7022b541e3cc83220c4c969b9524_b.gif"/>使用 Rectangle 插入一个矩形，选中后按快捷键「6」设置其透明度为60%（请依此类推1～9，0为100%）。然后我们在画板上拖拽该矩形，把整个页面的布局划分出来。调用 Rectangle 的快捷键是 R。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第三步，插入文字</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-a23a38628599595d5b2417457098bb8b_b.gif"/>大概划分好页面模块以后，开始用文字进行标记。点击 Text 插入文字图层，双击该图层可以更改文字内容。调用 Text 的快捷键是 T。本系列教材主要讨论 what 和 how，如果想知道为什么这么划分，<a target="_blank" href="https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">大家可以读一下 Apple 的 HIG</a>。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-d483ec10bb9b84f4a1079de299e86be8_b.png"/><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>头部三 Bar 分别为 NaviBar、SearchBar、StatusBar；</li><li>身体为内容区，由若干行 MovieList 组成；</li><li>尾部则是 TabBar 和全面屏自带的 HomeIndicator。</li></ul>

用图层插入功能划分页面布局

用图层插入功能划分页面布局 - 胡思

<span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto; background-color: rgb(255, 255, 255);">最近在知乎看到不少关于 Figma 的安利贴，又重新勾起了我的好奇心。干脆这次系统的学习一遍，顺便记录学习过程，产出一套接地气，手把手的教程。需要注意的是，由于 Figma 是墙外好物，你的使用水平下限取决于网速和英文水平，一定要心平气和。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">教程相关</h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>Figma 地址：<a target="_blank" href="http://www.figma.com/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">www.figma.com</a></li><li>阅读时长：3分钟</li><li>操作时长：12分钟</li></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第一步，注册登录</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-89ce9f2a66cd8972390a1371b341cc42_b.gif"/>Figma 的注册功能非常友好，并不需要邮箱验证，你只需要记住自己填写的账号密码即可。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-bcdb9507a864373e5f5dcf91fbe2589c_b.gif"/>然后 Figma 需要你做一个简单的自我介绍，即如何称呼、职业工种。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-50f3d8755128b5c8abaf97b12f0f1945_b.png"/>欢迎来到 Figma，作为一个万年沉浸 toB 业务的设计师，我称该页面为「项目管理页」。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第二步，熟悉项目管理页</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-0be5d626a30fe69017130b915313a30b_b.png"/>该页面可以划分为三块功能区，右下角的「Help」是一个全局功能，进入设计工作台时也可以使用：<ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li>导航栏：显示当前界面的名称，具备账号管理、消息、导入、新建功能；</li><li>分组栏：这里可以选择设计稿的分组：最近、草稿、回收站、团队；</li><li>陈列栏：这里陈列设计稿，可以对设计稿进行管理，也可以新建设计稿。</li></ol><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">第三步，创建设计稿</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-cd0ce794aaef2d2db1b0ed4de01dddc0_b.gif"/>点击菜单栏的「+」或工作台中的「+ New File」即可完成设计稿的创建，笔者有意把 PNG 做成 GIF 是为了让大家对「网速」更有体感。

创建你的第一个 Figma 设计稿

创建你的第一个 Figma 设计稿 - 胡思

还愁找不到合适的图标么？还在为精品图表库付费么？Iconify 提供海量免费精致图标，直接导入 Figma 使用。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-1c2a9d7e5cc8421084cc3280bcb7dee0_hd.png"/><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">丰富的图标库</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-f650b2fde29cbcc815d64860c4076360_hd.gif"/>Iconify 目前包含五十多个图标主题，共计四万个不重复的图标。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">友好的用户界面</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-4db5bf56c3fa7d42bcd17b33127c31d5_hd.gif"/>Iconify 的用户界面非常友好，所有功能所见即所得。支持直接搜索，并可以对图标进行翻转、角度和颜色的定制。<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">矢量可编辑</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-444b975aa7951777cca6ebe877029fb5_hd.gif"/>Iconify 所提供的所有图标都是矢量的，除了加入设计稿时可进行简单编辑。加入设计稿以后还可以根据你的设计需求对图标中的图层进行编辑。<hr/>绝对是良心插件，所有 Figma 用户必备佳品！

Iconify

Iconify - 图标库插件 - 胡思

4万图标

界面友好

矢量可编辑

如果你的作品要用到地图，请不要再去百度/谷歌地图截屏了。使用 Mapsicle，你可以快速顺畅的在演示稿中放置地图。友好的用户界面让你可以轻松制作出完美的地图。<hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);">制作地图</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-ef55f213786ce3a4066f1514dbd5ff83_hd.gif"/>启动 Mapsicle 后，你可以调整地图坐标、图像大小、地图风格等参数，制作出适合你手头项目的地图。

Mapsicle

Mapsicle - 地图制作插件 - 胡思

Components 是指那些在整个项目中会被反复使用到的 UI 元素，可以是按钮、图标、模态或者形形色色的图层组合。通过对这些 Components 的复用可以保持整个设计稿的一致性。Components 算一个可玩性比较高的 Figma 功能，了解下面四条规则可以帮我们快速上手：<ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0;"><li>母版 Component 中所包含的图层定义了这个 Component 的所有属性；</li><li>实例是你可以在设计稿中复用的 Component；</li><li>你对母版做出的任何改变都会立刻应用在实例上；</li><li>实例中的一些属性可以复写，这些变化不会影响母版。</li></ol>豆瓣电影的海报下面都会放置这部电影的评分星级和具体分数。上手制作了几个 Component 后，笔者发现其支持的复写属性比 Sketch 中的 Symbol 要多，这就使得原来需要 Nested Symbol 才能实现的一些组件机制可以依赖简单的样式复写搞定。我们今天一起来做一个评分控件，熟悉熟悉这个功能。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-ba6745d76adc12424b73e2ec5d8ddbf0_b.png"/>今日份任务<h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">教程相关</h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em;"><li>Figma 地址：<a target="_blank" href="http://www.figma.com/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">www.figma.com</a></li><li>教材地址：<a target="_blank" href="https://www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design?node-id=31%3A3" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></li><li>阅读时长：4分钟</li><li>操作时长：10分钟</li></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第一步，制作一组五角星</h2>从工具栏调用「插入图形」功能插入一颗五角星，调整其大小和形状，参数如图。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-5943e22b6e283003352feb8d76d7e0d2_b.png"/>将制作好的五角星复制四个，把五个五角星框选起来后使用 Smart Selection 功能整理成一行等间距的五角星图层组。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-09c958ebaaadfb08e9bf44e86effc02e_b.gif"/>使用布尔运算把五个分开的五角星图层合成一个完整的图形图层。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-44967027a222b6b4935199c13f39763f_b.gif"/>插入文字图层，制作 Rate 的评分部分。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-d56966107584fc05e4cbc90afbd68e8a_b.png"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第二步，调整图层样式</h2>把这组五角星图层的填充方式改为线性渐变，设置四个渐变节点，非别为黄黄灰灰，中间两个节点紧邻。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-080696761bdbbd588e73ec39a937bcc5_b.gif"/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;">第三步，创建 Component</h2>框选已经调整好的五角星组和评分图层，点击工具栏正中间「Create Component」功能，完成创建。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-1a81105d4d81ea5a6cc82afc5d15baf3_b.png"/>在图层管理栏中找到「Assets」中拖拽刚刚制作好的 Component 就可以使用了。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-58e1c4b01426e139edc5eff8ecb6eb25_b.gif"/>依次调整实例 Component 中不同图层的属性，更改评分控件的分数。<img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-b3d00603662de67110ebcb0b74d1fcab_b.gif"/>

用 Component 功能制作可改分评分控件

用 Component 功能制作可改分评分控件 - 胡思

色搭是设计中的一个重要命题，如果发现一张照片的配色和自己项目格调相似。那么从照片里直接取出关键色，可能会是一个取巧的色搭方法。Image Palette 可以帮助设计师从图像中提取五个关键色，形成一个迷你色盘。<hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;">图像取色</h2><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-def5d71cbab1876feba42d76915ad7b2_hd.gif"/>选中设计稿中的图像图层，在菜单中调用 Image Palette 功能。图像图层下方会生成一个五色色盘，这五个颜色是根据一套取色算法得出的，是图像中的五个主色。当然，在一些偏暗或偏亮的照片里会得到不理想的结果。

何不从这些技巧和插件开始你的 Figma 之旅