sketch|无序的思考，有序的设计——Figma使用分享( 五 ) 创新拉力赛|芯片|拉力赛|汽车

测试环境下所有Figma服务地址的真实速度（不是ping而是真实连接速度），这样你就可以通过修改Hosts的办法指定一个最快的Figma服务地址；

使用「SwitchHosts」修改和管理本地 Hosts。

2. 入门阶段入门阶段，关键要学习Figma的基本操作，并且勇敢拿起鼠标创作任何一个作品，学会操作后一定要进行实战，或临摹或设计一个较复杂的页面。这个过程不需要掌握组件的复杂操作，只需要能够按照工具指引制作出一个页面即可。
这里建议先从官方教程开始：https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA
或者直接体验Figma中的新手指引设计文件，按着操作来做一个页面你就会了。
在Figma Community中也有对应的教程（认真一点你还能搜到汉化版本）。
如果更适应国内学习环境，建议浏览这几个教学网站：

https://www.figma.cool/learning-paths
https://figmacn.com/

此外推荐查看草帽老师的B站教学（声音很好听）（对新手略有难度，可以看看他的基本教学视频）：
https://space.bilibili.com/108104104/
这里有常见的问题讲解：
https://figmacn.com/post/faq
这里可以查看我收集的一些常用的设计网站。
3. 精进阶段精进阶段主要掌握一些Figma的快捷操作、熟悉组件和组件库的使用、锚点编辑（学会了你就可以用来做icon了）。
这里提供几个网站以供参考：
https://figmacn.com/post/figma-tips-tricks-superpower-your-workflow
https://figmacn.com/post/all-figma-shortcuts
https://figmacn.com/post/iconography-guide

把图标画在相同大小的Frame中；
注意调整icon的视觉平衡；
图标做成组件，方便快速替换；
设置好constraints，保证拉伸不变形；
内部图形记得布尔合并，以便替换时能够自动保持颜色，导出的svg代码更干净。

关于组件可以先看看官方博客的讲解，受益匪浅。
https://mp.weixin.qq.com/s/PoEk5vRRrquLOTOH3QZgIw
https://mp.weixin.qq.com/s/iOp3aPbqbRr5vnrf0zQANw
学会这些后要多逛社区，从社区的设计和资源中学习别人的思路和亮眼设计。
https://figmacn.com/post/figma-community-guide
4. 实战阶段最重要的无疑是要搭建一次完整的设计规范。Figma可以很好地支撑搭建设计规范，尝试运用组件库搭建属于自己产品的设计规范。
搭建好设计规范后，可以让整个设计工作效率得到快速提升，同时可以站在更高的高度审视自己的产品要怎么优化用户体验。
1）确定设计原则和适配原则
【 sketch|无序的思考，有序的设计——Figma使用分享】这里需要针对你的产品确定基本的视觉语言和整体调性，可以用一个情绪版来表示。
适配原则取决了设计规范需要做几套，组件的位置尺寸限制规则，需要和开发沟通协调确定整体的适配方案，把机型尺寸和单位格式都确定好。
2）制定基础样式

色彩：利用色相板确定主色调和辅助色、对比色。确定灰阶字体的色值和透明度。
字体和文本格式：确定字体字号字重和文本对齐、间距等。
图片系统：确定图片大小、交互形式。
栅格和间距系统：确定度量基准、左右边距、垂直边距、横向边距、内容卡片边距。
图层命名规范：和开发沟通，使用一个规范的图层命名格式。

3）设计基础组件
这一块可以参考iOS人机交互指南和Material Design官网查看详细具体的设计方法，B端产品可以参考阿里集团的Ant design、Element以及贝壳的Ke design。
本文由 @昊昊不是耗儿原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议