设计工具|Figma一站式设计交付(一)—— 什么是Figma
共 5156字,需浏览 11分钟
· 2021-11-14
![](https://filescdn.proginn.com/07720aaf1a9660cf5ea53f59cb8234ac/bfc3053057f3c0b58d09ab83cd8c7851.webp)
导语:
Figma 自 2016 年发布以来,作为“来自未来的多人实时在线协作界面设计软件” 获得了许多用户的优质评级。由于2020 年疫情的原因,越来越多人在家隔离和办公。Figma 也适逢其时地一举超越了 Sketch 的地位,在 UI 设计、原型设计、头脑风暴、用户流程、设计系统、设计交付、版本管理等方面名列前茅,成为当下最流行的多平台 UI 线上协同设计软件。《Figma一站式设计交付》系列内容将会从这三个章节介绍:
Figma 的介绍、理论和实践
Figma 的设计系统,交互原型和审查元素
Figma 的营地使用,实用技巧和 Figma 社区
希望大家从中有满足的收获,在日常设计中进一步提升设计效率,优化设计流程。
根据 UXTools 用户体验工具调查报告显示,Figma 在国外的人气有逐渐攀升的趋势 —— 用户量已经反超 Sketch,一举在 UI Design / Protoping / User Flow / Hand Off / Design System / Versioning 等方向拿下排名第一 , 而且在 WhiteBoard 中 FigJam 排名第二。
回看国内同类型产品的情况,已经有多家厂商开发了对标 Figma 的工具,如蓝湖 MasterGo、即时设计(联合优设推广,优化做得比较好)、Pixso 等。
另一侧是 Figma 交付类插件工具,腾讯推出了 CoDesign 设计协作平台,覆盖了产品经理、设计师、工程师协作需求,助力团队提升协作效率、有效管理和使用设计资产,帮助大家更好的去完成设计交付。和 CoDesign 类似的产品还有 Moonvy 与 Heron 等。
![](https://filescdn.proginn.com/c3082e816ebcae21f4953138945bd568/544761f8ae46abd70be79916e839065d.webp)
![](https://filescdn.proginn.com/2aebb1cbb08789abe4ebcc041240f884/ac489e216f7fb80d90305f20e60468ae.webp)
![](https://filescdn.proginn.com/c641e50ed200d548abfbc2a5fc5c1896/9e6413c09fd3bd9011e84bf885b8be52.webp)
![](https://filescdn.proginn.com/b0c2e713c4c352420daf7238e9621a99/b71d9b379e3f13d40de2cb21e4eecf7d.webp)
![](https://filescdn.proginn.com/0f27f8262e1862806a63c909644881cb/626ccd659506b8050fb21768586d3fde.webp)
![](https://filescdn.proginn.com/1260ae9e6c3b7f5c971b8f3cb2f4d2a3/607cf06930f964b105f737453bab369b.webp)
避免文件传回传 团队多人协作 云设计协作交互视觉 直接交付给开发 及时的评论反馈
![](https://filescdn.proginn.com/c6b2fd393cc41a700c7e606e64567d0c/168196ac5aa49cd0bc6b110e86534aaa.webp)
多终端多人实时协作
从 Sketch 过渡无缝 UI 设计不卡顿
独特的适量网格
类 CssBox 盒子的 AutoLayout
原型交付
设计系统组件库灵活高效
版本历史管理
实时讨论、实时分享,无需担心插件版本
![](https://filescdn.proginn.com/a5f1834a3e7e4dfeab28bb1a9a68901b/aec4582506ae92a07e430aae6d440089.webp)
![](https://filescdn.proginn.com/cc2339fd9f993d7c19542476378c2b4f/80f253e0ca5bea79acb883d49c787f28.webp)
![](https://filescdn.proginn.com/e70bb659c8044f2802d74fdbf6639495/8840a6d712cecb65240d0668ac0e65ee.webp)
产品策划团队一般用 Tapd、在线文档、原型图 等工具描述需求; 交互团队用 XD、Sketch 等梳理设计交互图; 视觉团队用 PS、Sketch 等完成设计,用效果图、Codesign 等交付给产品策划审阅,定稿; 最终以 Codesign 等交付工具来交付开发。
![](https://filescdn.proginn.com/c6b2fd393cc41a700c7e606e64567d0c/168196ac5aa49cd0bc6b110e86534aaa.webp)
![](https://filescdn.proginn.com/a5f1834a3e7e4dfeab28bb1a9a68901b/aec4582506ae92a07e430aae6d440089.webp)
![](https://filescdn.proginn.com/cc2339fd9f993d7c19542476378c2b4f/80f253e0ca5bea79acb883d49c787f28.webp)
![](https://filescdn.proginn.com/d1aea1809a3adc81a7e0a5e4f6f8bb02/317cfa46f9de2e9ec36ea09aa5111380.webp)
![](https://filescdn.proginn.com/32247a53ceb8be382e026ab4a673cb7e/12e0f3de653c5b6a1505014868afd971.webp)
![](https://filescdn.proginn.com/c6b2fd393cc41a700c7e606e64567d0c/168196ac5aa49cd0bc6b110e86534aaa.webp)
![](https://filescdn.proginn.com/a5f1834a3e7e4dfeab28bb1a9a68901b/aec4582506ae92a07e430aae6d440089.webp)
![](https://filescdn.proginn.com/cc2339fd9f993d7c19542476378c2b4f/80f253e0ca5bea79acb883d49c787f28.webp)
![](https://filescdn.proginn.com/06e83ef24ac79a0b00e85e351790b544/fb60d04ab0cb54fb8b996514a7372444.webp)
![](https://filescdn.proginn.com/c6b2fd393cc41a700c7e606e64567d0c/168196ac5aa49cd0bc6b110e86534aaa.webp)
![](https://filescdn.proginn.com/a5f1834a3e7e4dfeab28bb1a9a68901b/aec4582506ae92a07e430aae6d440089.webp)
![](https://filescdn.proginn.com/cc2339fd9f993d7c19542476378c2b4f/80f253e0ca5bea79acb883d49c787f28.webp)
![](https://filescdn.proginn.com/c6b2fd393cc41a700c7e606e64567d0c/168196ac5aa49cd0bc6b110e86534aaa.webp)
在 Fimga 子组件中,可以自由的设定字体字号、填充颜色、边框颜色、效果样式、圆角样式等,根据决策需要显示或隐藏图标。
一个基础组件控制不同的实例,不同的实例又可以保持高度自由的子特征属性。
![](https://filescdn.proginn.com/a5f1834a3e7e4dfeab28bb1a9a68901b/aec4582506ae92a07e430aae6d440089.webp)
![](https://filescdn.proginn.com/cc2339fd9f993d7c19542476378c2b4f/80f253e0ca5bea79acb883d49c787f28.webp)
删除第一个列表项中的图片,文字要自动左对齐 删除第二个列表项中 3 行文本,文字需要实现基于图片居中对齐 删除第四个列表项,并把第五个列表项提前至第三个列表项
![](https://filescdn.proginn.com/d1bcb81ffad6fa6f7c2206e75192e8f1/050808fbb537f55e3ba87ad513586e96.webp)
![](https://filescdn.proginn.com/c6b2fd393cc41a700c7e606e64567d0c/168196ac5aa49cd0bc6b110e86534aaa.webp)
Figma 在设计上是基于前端的布局流,使得页面元素的堆叠排列更为自动化,配合 Auto Layout 可以在组件内外自由删减隐藏元素并且自动布局。
![](https://filescdn.proginn.com/a5f1834a3e7e4dfeab28bb1a9a68901b/aec4582506ae92a07e430aae6d440089.webp)
![](https://filescdn.proginn.com/cc2339fd9f993d7c19542476378c2b4f/80f253e0ca5bea79acb883d49c787f28.webp)
![](https://filescdn.proginn.com/8f12728f2f8faa38aaf0ac96aa7ed2c2/588cd342393289f103b80f028a3f2e52.webp)
![](https://filescdn.proginn.com/aedde0d647ee8007dc4df4dc6f16128c/6b0e68e9e13a674baa8303bd68c0a254.webp)
![](https://filescdn.proginn.com/c6b2fd393cc41a700c7e606e64567d0c/168196ac5aa49cd0bc6b110e86534aaa.webp)
Figma 因为有更透彻实践原子设计体系,在一定程度上高效地自由组合,避免样式、组件冗余。
![](https://filescdn.proginn.com/a5f1834a3e7e4dfeab28bb1a9a68901b/aec4582506ae92a07e430aae6d440089.webp)
![](https://filescdn.proginn.com/cc2339fd9f993d7c19542476378c2b4f/80f253e0ca5bea79acb883d49c787f28.webp)
![](https://filescdn.proginn.com/83322742079e4f2751cfc8a8ed82105a/41580acf7d13c00085cd6e763d22ae7e.webp)
![](https://filescdn.proginn.com/488be247c0e16ea438cdd2c216a2e0f9/5d35c4b2e1b81a253bab3335c4fc8bf7.webp)
![](https://filescdn.proginn.com/c6b2fd393cc41a700c7e606e64567d0c/168196ac5aa49cd0bc6b110e86534aaa.webp)
整体转换到 Figma 的情况来说可以是毫无捷径了,怎么样都得修一遍为妙。
已有的项目可以考虑重组组件库的设计逻辑,为后续的工作打下更好的基础。新的项目或者有改版的需求,可以直接使用 Figma 进行重建。
虽然前期的过程都比较累,但是后续使用起来时工作效率以得到极大的提高,不亦快哉。
![](https://filescdn.proginn.com/a5f1834a3e7e4dfeab28bb1a9a68901b/aec4582506ae92a07e430aae6d440089.webp)
![](https://filescdn.proginn.com/cc2339fd9f993d7c19542476378c2b4f/80f253e0ca5bea79acb883d49c787f28.webp)
![](https://filescdn.proginn.com/8fa89684305f9aecf927e3ad3d79a458/ca68e5c81a7e198c597c29d9497c675e.webp)