-
Figma 的介绍、理论和实践 -
Figma 的设计系统,交互原型和审查元素 -
Figma 的营地使用,实用技巧和 Figma 社区
-
避免文件传回传 -
团队多人协作 -
云设计协作交互视觉 -
直接交付给开发 -
及时的评论反馈
-
多终端多人实时协作
-
从 Sketch 过渡无缝 UI 设计不卡顿
-
独特的适量网格
-
类 CssBox 盒子的 AutoLayout
-
原型交付
-
设计系统组件库灵活高效
-
版本历史管理
-
实时讨论、实时分享,无需担心插件版本
1. 提效统一的设计流程
-
产品策划团队一般用 Tapd、在线文档、原型图 等工具描述需求; -
交互团队用 XD、Sketch 等梳理设计交互图; -
视觉团队用 PS、Sketch 等完成设计,用效果图、Codesign 等交付给产品策划审阅,定稿; -
最终以 Codesign 等交付工具来交付开发。
2. 高效的交互动效Demo
3. 自由的组件修改
在 Fimga 子组件中,可以自由的设定字体字号、填充颜色、边框颜色、效果样式、圆角样式等,根据决策需要显示或隐藏图标。
一个基础组件控制不同的实例,不同的实例又可以保持高度自由的子特征属性。
4. Auto Layout的智能布局
-
删除第一个列表项中的图片,文字要自动左对齐 -
删除第二个列表项中 3 行文本,文字需要实现基于图片居中对齐 -
删除第四个列表项,并把第五个列表项提前至第三个列表项
Figma 在设计上是基于前端的布局流,使得页面元素的堆叠排列更为自动化,配合 Auto Layout 可以在组件内外自由删减隐藏元素并且自动布局。
5. Atomic Design 原子设计
Figma 因为有更透彻实践原子设计体系,在一定程度上高效地自由组合,避免样式、组件冗余。
整体转换到 Figma 的情况来说可以是毫无捷径了,怎么样都得修一遍为妙。
已有的项目可以考虑重组组件库的设计逻辑,为后续的工作打下更好的基础。新的项目或者有改版的需求,可以直接使用 Figma 进行重建。
虽然前期的过程都比较累,但是后续使用起来时工作效率以得到极大的提高,不亦快哉。
推荐阅读
沉浸进行时 —— 由Diegetic UI引出的概念学习
招聘丨光子工作室群美术&设计中心重点项目多个岗位火热招聘
分享
收藏
点赞
在看
本篇文章来源于微信公众号: 光子设计中心