在设计中表格是比较复杂的组件，这个文件采用一个组件来实现各种表格，思路还不错。 <div class="content-video"><iframe style="border: none;" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FARYvgo05kkUhHF5PltU7l1%2FiOS-tables%3Fnode-id%3D603%253A0" allowfullscreen></iframe></div>

在创意诞生初期，设计师可以使用线框图快速表达自己的想法。在 Figma 中，你可以使用这一套线框图组件来完成原型绘制。 <div class="content-video"><iframe style="border: none;" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/GBCGqs11KNeUyPksQzEMw0hr/Wireframing/duplicate" allowfullscreen></iframe></div> 你可以配合这一篇[官方博文](https://www.figma.com/blog/how-to-wireframe/)享用。文章中还给出了一些绘制原型的建议： - 保持元素简单，尽量使用黑白灰表达 - 最多两种字体 - 图片使用单色形状表示 - 考虑原型适用的设备尺寸

微软开源了其最新图标，你可以直接复制其 Figma 文件到自己的 draft 中使用。目前该套图标分为暗色和亮色两种。  ## Figma 文件使用方式 如果你有 Figma 账号，可以直接将其复制到自己的 draft（草稿）中使用。  你可以选择单个图标，在右侧面板中选择导出：  你也可以直接右击图标，选择 `Copy As > Copy As SVG` 复制出 SVG 代码用于别处。  代码仓库地址：https://github.com/microsoft/vscode-icons

这位网友突发奇想，做了一个 Figma 游戏制作工具。你可以使用这个工具来完成一个小游戏，可以直接设计场景和分数等级，添加敌人、关卡等。  网址：https://alyssax.com/x/platformer/ 演示效果：https://twitter.com/alyssaxuu/status/1103331459954368513 开源代码：https://github.com/alyssaxuu/figma-platformer-engine

无聊的设计师 [lijxse](https://weibo.com/lijxse) 录制的视频教程，主要内容是如何使用 Figma 组件来完成一个界面。该视频长达三小时，请酌情观看。 **请欣赏视频** <div class="content-video"><iframe src="//player.bilibili.com/player.html?aid=60082206&cid=104623169&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>

公众号 BorderDesign 最近正在写的 Figma 系列教程。这是第五篇，主要介绍了 Figma 主要设计区域的布局及各个工具。以下为原文引用： >继上次使用图层功能对豆瓣电影首页进行模块划分后，又处理好本地字体的使用。然后我导入了几张电影海报，框选它们时发现了一个好玩的功能。查了一下官方文档，发现这个功能叫做 Smart Selection，用于高效操作设计稿中的图层网格。Sketch 在 55 版本中也偷偷放上了半个这个功能，离 Smart Selection 还是有一些差距，不过我猜很多同学并没有发现这个小秘密。 

公众号 BorderDesign 最近正在写的 Figma 系列教程。这是第四篇，主要介绍了 Figma 的字体设置。以下为原文引用： >上一次在玩弄文字图层的时候，没有找到像样的中文字体。这才想起 Figma 在云端，而我花里胡哨的字体库在本地。那么让我们来解决这个小小小问题。 

公众号 BorderDesign 最近正在写的 Figma 系列教程。这是第三篇，主要介绍了 Figma 主要设计区域的布局及各个工具。以下为原文引用： >紧接上一篇，咱们熟悉了 Figma 的设计工作台，发现工具栏里有很多图层插入功能，这些功能既基础又核心。让我们掌声请出今天的主角 - 微信小程序「豆瓣评分」，一起通过对其首页的布局划分，来上手这些图层插入功能。 

在 Figma 的交流群里有一位设计师发了自己用 Figma 做的 2.5D 作品，于是大家纷纷求教。这时候 Figma 的协作优势就体现出来了，这位设计师就开了一个新的文件，大家纷纷加入一起学习如何制作 2.5D 效果。当时盛况，可谓空前。  <div class="content-video"><iframe src="//player.bilibili.com/player.html?aid=57969499&cid=101149348&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>

公众号 BorderDesign 最近正在写的 Figma 系列教程。这是第二篇，主要介绍了 Figma 主要设计区域的布局及各个工具。以下为原文引用： >正式画稿之前我们需要熟悉一下 Figma 的设计工作台。万幸的是，以 Sketch 为代表的新 UI 设计工具，工作台的布局都差不多。我们以总分的形式拆解 Figma 的设计工作台。先来一张动图遍历一下工作台的大多数功能。

公众号 BorderDesign 最近正在写的 Figma 系列教程。这是第一篇，主要介绍了如何注册登录及创建设计稿。以下为原文引用： >最近在知乎看到不少关于 Figma 的安利贴，又重新勾起了我的好奇心。干脆这次系统的学习一遍，顺便记录学习过程，产出一套接地气，手把手的教程。需要注意的是，由于 Figma 是墙外好物，你的使用水平下限取决于网速和英文水平，一定要心平气和。 >既然开了「教程 | Figma」这个坑，我承诺按时更完，欢迎大家关注。

迁移从来都是一件很头疼的事儿，因为你需要时间去重新适应，让你的肌肉记忆接受一个新的习惯。这篇文章作者就讲述了自己从 Sketch 迁移到 Figma 的过程，详细结识了 Figma 和 Sketch 之间的异同，以及为什么要转到 Figma。  此外，作者还介绍了一些自己的小技巧和建议，帮助你更加高效地使用 Figma 完成设计。 如果你最近正在从 Sketch 转向 Figma，或者考虑迁移，可以看看这篇文章，它可以帮助你理解这两个工具的不同和相似点，并让你尽快熟练使用 Figma。

在设计中表格是比较复杂的组件，这个文件采用一个组件来实现各种表格，思路还不错。 <div class="content-video"><iframe style="border: none;" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FARYvgo05kkUhHF5PltU7l1%2FiOS-tables%3Fnode-id%3D603%253A0" allowfullscreen></iframe></div>

在创意诞生初期，设计师可以使用线框图快速表达自己的想法。在 Figma 中，你可以使用这一套线框图组件来完成原型绘制。 <div class="content-video"><iframe style="border: none;" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/GBCGqs11KNeUyPksQzEMw0hr/Wireframing/duplicate" allowfullscreen></iframe></div> 你可以配合这一篇[官方博文](https://www.figma.com/blog/how-to-wireframe/)享用。文章中还给出了一些绘制原型的建议： - 保持元素简单，尽量使用黑白灰表达 - 最多两种字体 - 图片使用单色形状表示 - 考虑原型适用的设备尺寸

微软开源了其最新图标，你可以直接复制其 Figma 文件到自己的 draft 中使用。目前该套图标分为暗色和亮色两种。  ## Figma 文件使用方式 如果你有 Figma 账号，可以直接将其复制到自己的 draft（草稿）中使用。  你可以选择单个图标，在右侧面板中选择导出：  你也可以直接右击图标，选择 `Copy As > Copy As SVG` 复制出 SVG 代码用于别处。  代码仓库地址：https://github.com/microsoft/vscode-icons

iFigma.design 是 Jaylee 制作的一个 Figma 网站，主要发布各种 Figma 绘图小技巧，非常实用。看了之后，你会发出“哇，原来还有这种操作 🤩”的感叹。 

DEX Group 的一篇文章： >Figma 期待已久的插件系统，昨夜终于正式上线了！其实我们早就拿到了邀请，已经内测了快两个月了。Figma 的插件相比 Sketch 的插件更加友好，完全基于 web 技术，如果你会 JavaScript 和 HTML 也可以轻松的编写插件，当然还支持 React，Vue，TypeScript 等几乎所有最流行的框架和语言，并且它的 API 和使用条件并没有太多限制，甚至可以利用 three.js 制作 3D 相关的插件。 >另外对于企业级（Figma Organization）的付费用户，还可以制作针对公司内部，不对外开放的私有插件。 >目前官方平台已经发布了 50 个左右的插件，相信今天正式发布后，还有一大波插件正在路上。下面列举一些非常值得安装的插件： 原文还介绍了一些值得推荐的插件：快速启动器 Figma Walker、内容填充 Content Reel、Frame 整理 Super Tidy、相似图层选择 Similayer、时间轴动画 Figmotion 等，可以前往原文查看。 **相关链接：** 插件平台：https://www.figma.com/c 官方文档：http://figma.com/plugin-docs 插件实例：https://github.com/figma/plugin-samples Figma UI Kit：https://www.figma.com/file/Gj9iMcTbFbHrFq1ZWbDBuyc9/UI2-—Public-Copy?node-id=0%3A11724

终于，FIgma 插件发布啦！使用插件，你可以自动化设计工作流程、使用真实数据，做很多有意思的事情。 目前插件市场入口在左侧菜单中第三个，点击后就可以看到官方推荐插件。  官方博文：https://www.figma.com/blog/introducing-figma-plugins/ 插件开发文档：https://www.figma.com/plugin-docs/

Figma 上个月宣布即将支持插件，而且从社区招募很多插件开发者进行内测开发。到现在，已经有一批开发者做出了令人惊艳的插件，从数据可视化、内容导入，到无障碍工具，应有尽有。 现在，Figma 邀请了一些插件作者，来讲述他们创造插件背后的故事。这是第一个作者，Sam Mason de Caires，Cloudflare 的 UX 工程师。他做了很多插件，包括是数据填充、主题生成、图像插件和颜色生成等。  Figma 插件预计在 2019 年 8 月 1 日来临，可以在[这里](https://www.figma.com/plugins-launch-event/)预定观看直播，直播时间为 2019 年 8 月 1 日 9:30am - 11:00am PST（北京时间 8 月 2 日 1:30）。

一直使用 Figma 做设计的你，有没有想过使用 Figma 来做项目回顾？Figma 最新博文[教你一步步使用 Figma 做项目回顾](https://www.figma.com/blog/a-step-by-step-guide-to-using-figma-for-retrospectives/#file-sharing-and-permissions-for-retrospectives)，讲述了他们是怎么在一个敏捷开发迭代完成后使用 Figma 来做项目回顾的，并且附上了项目回顾模板文件。 

这位网友突发奇想，做了一个 Figma 游戏制作工具。你可以使用这个工具来完成一个小游戏，可以直接设计场景和分数等级，添加敌人、关卡等。  网址：https://alyssax.com/x/platformer/ 演示效果：https://twitter.com/alyssaxuu/status/1103331459954368513 开源代码：https://github.com/alyssaxuu/figma-platformer-engine

一个命令行工具，可以保持你的本地样式文件和 Figma 中的样式库保持同步。

一个帮助你将 Figma 文件转为谷歌幻灯片的应用，可以点[这里 📽️](https://twitter.com/alyssaxuu/status/1086934646959558656)查看效果。 生成幻灯片时会按照 Figma 中 frame 的顺序从上至下，也就是说最上面的一个 frame 会变成最终生成的幻灯片的最后一张，最下面的会变成第一张。

>本文转自职人社 最近，一直有人在职人社的社群里问，有没有团队切换 Figma 的成功经验？因为我们做沙龙海报、素材设计都需要多人协作共同完成，Sketch 没有办法实现多人在线协作，Photoshop 又过于专业上手需要时间。经过设计师同学的推荐，我们开始全团队使用 Figma 协作，可以说非常高效。我们希望能把好用的工具推广给更多的人，让大家共同受益。 为此，职人社和 DEX 共同主办了本次 Figma 实操沙龙，邀请了 3 位资深设计师，和我们聊聊他们在工作中使用 Figma 的实操经验，Figma 与 Design System 等。  希望打算尝试内部转 Figma 的设计师、工程师、产品经理或者对 Figma 工具感兴趣的同学报名参加。 >注：本次沙龙为付费沙龙，报名通过后，我们会统一收取费用。 ## 分享嘉宾 ■ **丁一 @DEX 创始人**，前 Sketch 中国区负责人，前 36 氪设计总监。代码写得很烂的全栈设计师。 分享内容：**Figma 与 Design System** ■ **Jony@阅文集团**，资深视觉设计师，参与海外项目 Webnovel 产品设计，负责 UI 组件化与动效。前京东视觉设计师，负责客户端首页设计。 分享内容：**Figma 项目实践二三事** ■ **Linci@独立设计师**，一个经常需要在 1～3 天「从无到有上线一个 MVP（最简化可行试验品）」的项目中，承接设计 + 前端的产品设计师；热衷于打磨基础工作流、提高生产效率。 分享内容：**Figma 到底好用在哪里，基础操作大公开** ## 活动详情 ■ 活动时间：2019 年 8 月 10 日（周六）下午 13:00-17:00 ■ 活动地点：上海 ·Wework （具体位置报名成功后通知） ■ 费用：99 元/人

这是 Anyway 博客的一期播客节目，两位主播主要聊了他们使用 Figma 的一些经验，以及对比 Sketch 的一些优点和缺点。 其实他们之前的第 55 期节目[《看似分享 Figma 使用体验，其实还是在吐槽 Sketch》](https://anyway.fm/figma-sketch/)也聊过这个话题，感兴趣的同学可以去收听一下。 本期节目的内容提要如下： - 02:30 深圳+广州线下活动的正式通知 - 05:40 久违的听众反馈 - 14:04 JJ 花了两分多钟解释为啥不聊 XD - 16:24 两位主播的软件使用情况变化不小 - 26:10 「不思进取」和「锐意进取」 - 39:09 吐槽 Sketch 才是正题 - 45:51 也要稍微圆回来一点儿吐槽吐槽 Figma - 54:31 最后来聊聊两个软件的「插件生态」 - 64:50 「当初求种像条狗，如今撸完嫌人丑」 点击下面的查看原文按钮就可以去收听了。

第一次知道 Figma 是在 2016 年，但真正用起来还是在去年（2018 年）。那时候苦于 Sketch 每次都更新导致一些插件不能用，且界面不够精致，一直想要找一个替代品。后来就尝试将自己的个人项目都导入到 Figma，开始在 Figma 中设计。  因为 Figma 是基于 Web 的，也就是在线的网页，我总觉得使用起来会受限于性能而不够流畅，这也是我前几年不敢去用的原因。**但直到我真正使用起来，才发现操作非常流畅，而且文件都在云端，免费版保留最近一个月的历史记录，再也不用“最终版1”、“最终版2”这种方式管理设计文件了。** 随着使用加深，我发现 Figma 的交互非常符合直觉，还有很多精心设计的小细节。借用一位朋友的话来说，“**这是一群设计师为设计师打造的设计工具，让大家专注于设计本身，而不是在设计时还要克服工具自身影响效率的因素**”。 下面我结合我的使用经验说一说我是怎样用 Figma 做设计的，以及这一年以来我的一些使用心得。 ## 我的设计流程 在此之前，先说一下我的背景。我平时会做很多业余项目，大多是网页和小程序，平时还会做一些公众号的封面和插图，基本都是在 Figma 中设计完成的。  ### 初稿构思 一般当我有了一个想法时，我会先在 Figma 中随意勾画出一个初稿。然后，我会在这个基础上不断修改，不断完善自己的想法。这其实相当于原型设计阶段，在这个过程中我不会在意样式是否美观，只会在意功能、结构是否合理。  因为我的想法会不断变化，说不准什么时候有一个新的想法会加进去，所以在这个阶段它的变化会很大。因为 Figma 可以自动保存最近 30 天的历史（付费版可以保存所有历史），所以你不用担心自己突然想要回到之前的某个版本而没有保存。尽管大胆地构思设计，你可以随时恢复到之前的版本。  ### 设计调整 接下来我就会开始调整样式，细化设计了。这个过程中我会用到两个比较重要的东西——组件和栅格。**组件可以用来设计重复性模块，提高效率，栅格则可以让我的设计元素的分布保持一致比例。** 所谓组件，类似于 Sketch 中的 Symbol，PowerPoint 中的母版，用于绘制可复用的元素。比如说在我的设计中有一个卡片列表，我会在旁边先做这个卡片，微调它的样式，等差不多满意时再复制出多个放到页面中。  最原始的组件叫做 master，而从它复制出去的组件叫做 instance，当你调整 master 的样式时所有的 instance 都会跟着同步。Figma 允许将 master 组件就近放在页面旁边，这样是极其方便的，因为后面难免需要调整细节，这时候你就可以边调整 master 细节边看它在整个页面中的效果，比如下图中我想看一下将 logo 放大的效果。  而反过来，当你调整 instance 的部分样式时 master 是不会跟着变化的。这样就保证了灵活性，因为总有一些 instance 需要和其它 instance 有一点区别。 说完组件，再说说栅格的妙用。在 Figma 中我们可以给页面（即 frame）和组件添加栅格，而栅格可以添加网格、行和列。在页面中添加网格可以帮助你对其元素，但我一般会添加列栅格，因为它可以帮助我把元素排列为等分的几列，并保持元素间隙。下图中红色长条就是列栅格，他将中间内容区域均分为 12 列，我就可以把里面的元素按照 1-8-3 的比例布局。  如果将栅格和组件联合起来，就可以设计出固定内边距的效果。我给卡片组件就设置了一个行栅格一个列栅格（蓝色背景），它们就给整个卡片四周划分出了一个固定的内边距。当我把里面的文字图层的 constraints 设定为左右固定并将它左右边缘对准栅格边缘时，当我放大缩小卡片时这个文字图层就会保持左右的内边距固定。  用一个动图表示一下，上面这个使用了栅格，下面的没使用，此时上面图片的四周就会紧贴着栅格边缘。  ### 添加交互 最后，为了体验真实的效果，我会给它添加一些交互效果。Figma 自带的交互动作包含了跳转、显示浮层、打开链接等，而触发方式包括点击、鼠标悬浮、延时等，还有滚动固定等效果，足以做出一些基本的交互效果了。  如果是移动端，我可以用手机直接打开 https://figma.com/mirror 来预览效果。这很方便，不需要额外下载 App，只需要在手机上登录一下就行了。 当然，整个设计过程中还会有很多细节会让你觉得十分方便。比如说使用 Fill 来统一代表背景色和文字颜色，方便同时调整文字和图层。还有 Smart Selection 可以让你快速选择一些元素，将它们对齐，并随意互换两个元素的位置。**他们会经常在官方博文中告诉你一些小技巧，我经常会看到那种“竟然还有这种操作”的小技巧。** ## Figma 适合什么样的人？ 总体用下来，我觉得 Figma 免费版非常适合独立开发者/设计师。因为我们的项目一般不复杂，项目间关联性也不大，就可以用一个文件来设计一个项目，也就不用担心跨文件共享组件要收费的问题。 与此同时，Figma 基于 Web 的特性也决定了它易于分享。如果有人想要看你的设计，你可以直接将预览链接发给对方。这也意味着你可以随时随地做设计，即使没有带电脑也没关系。 Figma 官方响应也很快，我有时遇到问题会直接去社区反馈，他们也会很快答复。他们还保持着一周一次版本迭代，所以如果你反馈的建议被采纳就可以很快看到更新。 目前 Figma 在国外的使用率逐渐攀升，在国内可能受制于网络太慢而比较小众。我还会继续使用它做我的个人项目，如果什么时候可以在团队间普及开来，我会去买它的付费版，这样就可以使用跨文件组件共享多人实时协作设计了。 **本文作者**：Juuun<br/> **首发于少数派**：https://sspai.com/post/55044<br/> **公众号**：Codesigner<br/> 

这是 Figma 官方的一篇博客，讲述了他们最近是如何使用一种新的方式来改造文字的行高功能。原文中比较宝贵的是文字行高的演变和不同处理方式，相信看完后你会对行高有更清晰的认识。 翻译：[城中村群租房](https://www.darmau.com/) 原文地址：[Getting to the bottom of line height in Figma](https://www.figma.com/blog/line-height-changes)

从 PS 过度到 Sketch 做 UI，那种生产力简直降维打击 PS；可现在，夸张些来说，Sketch 要被 Figma 降维打击了。 那么 Figma 比 Sketch 好在哪呢？设计师 lijxse 结合自己的体验，提出了 6 个点，点击原文按钮看看吧。