Intros
Figma’s mission is to make design accessible to everyone. Our two products help people from different backgrounds and roles express their ideas visually and make things together.
- Figma design is for people to create, share, and test designs for websites, mobile apps, and other digital products and experiences. It is a popular tool for designers, product managers, writers and developers and helps anyone involved in the design process contribute, give feedback, and make better decisions, faster.
- FigJam lets you create online whiteboards where anyone can take part. People often use FigJam for meetings, brainstorms, diagrams, planning, and research. In FigJam, you can use text, shapes, drawings, images, sticky notes, and other elements to visually represent ideas and jam on work together.
设计软件，包含两款产品，分别是Figma Design和FigJam：
- Figma Design：主要用于网站、手机APP和数字产品与交互设计，面向设计师、产品经理、作家和开发者。
- FigJam：协作白板，可以用于会议、头脑风暴、图标、计划和研究。可以插入文字、形状、图片、备注或者其他视觉元素。
两款产品的功能和界面是不一样的，我自己用FigJam比较多，会简单介绍下这款的一些基本用法，如果之后学到新的技巧，也会随时更新在这里。Figma收费，个人使用的话免费版本已经够用，团队协作还是要用Pro。
Hotkeys
善用快捷键可以在繁多的工作中节省时间，方便快捷。在Figma中，按【Ctrl + Shift + ?】 可以快速打开快捷键面板，查看 Figma 的所有快捷键，方便快速查找。比较常用的一些快捷键我还是单独拎出来放在下面了。
Tips
1 | Frame 画板
两种创建方式：
- 空白处快捷键F
- 选中元素后右键Frame selection（Ctrl+Alt+G）
导出：
选中Frame后，在右侧属性栏会出现Export，选择适合需求的即可。在导出PDF的时候，经常碰到的一个问题是元素没有整合进去，被单独导出。出现这种问题是因为，该元素没有被放进Frame里，可以在页面左侧该Frame layer框架下查看元素是否存在。如果没有，可以在左侧直接拖动至Frame下，或者，在面板中将元素拖出Frame后再拖回去。
2 | 如何对比两张图片的差异？
如果是同尺寸的，只要叠好全选后，在右侧属性栏Layer下选择Difference即可。这个功能蛮好用的，技术面前肉眼还是差了点。
3 | 组件
创建快捷键：Ctrl+Alt+K
作用：系统性地复用一些界面模块和样式属性（说实话这个功能我还是没太搞明白有什么用，之后有用到再更新…
- 副组件可以修改属性，而不被主组件控制。
4 | 颜色
直接输入颜色英文名就可以快速改颜色
点击色值后，按方向上下键可以调颜色的深浅
5 | 快速切换文本框宽度
方法一：点击Auto Width
方法二：双击文本框有下角的框点
Widgets & Plugins
1 | Status Dropdown – Bring clarity to the status of your designs
用途：项目任务状态跟踪。
2 | Super Tidy
用途：画板整理/重命名工具。
3 | AutoFlow
用途：自动画箭头（需付费，免费版只能画50个）
Links
1|官方教学视频：https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA/featured
2|中文社区：https://www.figma.cool/