5.1.20250801 设计工具-figma

#figma #app

Figma 是一家美国的科技公司，于2012年在旧金山成立，主要提供基于云端的设计和原型制作工具，广泛应用于UI/UX设计、产品设计等领域。其云端协作的特性，让团队成员可以实时共同编辑设计文件，是近年来设计领域较为流行的工具之一。

专题文章

• 230314 Figma+汉化+EX.app 重新按照了一个版本，尝试后面的视觉稿用figma来画，因为可以协同
• 230315 figma菜单有一个选项是可以选择用APP打开的，另外浏览器的汉化，需要安装浏览器插件：figMacn
• 进入官网figma.com或者figma.cool（有汉化版本）下载安装软件
• Figma 分享的链接支持定位到某个画框
• [[figma]]评论功能不能标记在一个组件上，组件移动，评论并没有移动。离线添加的内容, 需要修改后,才会记录同步

3 快捷键

3.1 设计中常用的数字

• 牢记8的倍数！！！使用 8 的倍数来定义块和内联元素的尺寸、填充和边距。8-Point Grid
• 牢记4的倍数！！！字体大小、间距用4的倍数。
• 图标尺寸常用 2424 、 4444 ，注意边缘要留空隙，用来将来图标对齐，图标描边、圆角以0.5进行递进。对齐要做算术题，常会出现 0.25 、0.5 这种后缀。
• 搜索栏字体：ios 端 16px
• PC端页面：宽度 1280px 或 1440px 或 1920px，栅格 12列 或 16列，间距 24px，注意是 4 的倍数。

3.2 常用快捷键

• cmd+ \: 隐藏菜单
• shift+cmd+C：复制为PNG
• cmd+L：复制当前图层的地址，方便分享
• shift+0: 缩放到100%
• shift+1: 适配屏幕
• shift+2: 单个
• opt+1: 显示图层
• Ctrl + Shift + ?：显示键盘快捷键
• Ctrl + C：取色
• Cmd + /：打开菜单搜索
• Cmd + P：打开菜单搜索
• Cmd + Shift + C：复制 PNG
• Cmd + Shift + S：保存 .fig 文件到本地
• Cmd + Option + S：保存一个版本
• Cmd + Option + P：打开上次打开的插件
• Shift + A：为所选元素添加自动布局容器
• opt+cmd+G：添加画框
• Shift + Option + A：解除自动布局
• Cmd + L：复制文件或当前 Frame 链接
• Shift+A创建自适应布局
• Control+G 布局的显示和隐藏
• Command+Option+C复制图层样式（同Sketch）
• Command+Option+V粘贴图层样式（同Sketch）
• Option+1图层列表
• Option+2定位组件搜索框
• Command+Option+G 框到一个Frame里
• Option+Command+鼠标拖动组件可以替换组件
• Command+Option+B取消子组件
• Enter进入选择
• Shift+Enter返回选择/选择画板
• Option+L收起展开的图层
• Option+A/S/D/W上下左右对齐
• Option+V/H居中对齐
• Command+C吸取颜色（同Sketch、PS、AI）
• Shift+R打开/关闭参考线（同Sketch、PS、AI）
• Command+G编组
• Command+Option+G（取消编组）
• Command+？搜索全部的插件，组件等

3.3 更多快捷键

视图&图层

• 查看全部视图：Shift+1
• 查看目标视图到全图大小：Shift+2
• 大纲模式：Commd+Y
• 显示隐藏标尺：Shift+R
• 显示隐藏网格：Control+G
• 放大视图：Z
• 放大缩小视图   【Command+鼠标滚轮】
• 快速收起图层：Alt+L

画板Frame

• 创建框架（Fame）：F
• 选择嵌套对象：Command+鼠标左键
• 放不进Frame的时候：按住Command键就可以放进去了
• 内容打组：Command+G
• 从内容新建画板：Command+Alt+G
• 测量画布上对象之间的距离：1.选择一个对象，2.将光标悬停在其他对象上时按住alt，3.Figma 将显示到其它对象边缘的距离。（同理参考线）

文字&表情

• 创建文字：T
• 表情符号选择器：control + command + 空格
• 形状
• 左右翻转：Shift+H
• 上下翻转：Shift + V
• 整体按样式缩放：K
• 填充描边互换：Shift+X
• 扩展图形：Command+E （将布尔运算结果生成为新图形）
• 扩展描边：Command+Shift+G（使用描边绘制icon时，通过扩展描边来转为可编辑图形）
• 在属性值上左右拖动：Alt
• 以中心点调整对象大小：Alt
• 单独把矩形一个角变成圆角：Alt
• 形状中插入图片：Shift+Commad+K

复制

Figma为了保证组件化和共享样式的细分程度，将图形的属性样式进行了更细致的拆分，如图形颜色、描边属性，字体字族、字体颜色等属性是分开处理的。因此无法像Sketch或PS那样一键复制所有属性，而是需要单独选择某个属性，然后复制。因此在遇到样式相关的问题时，可以考虑使用共享样式来实现。

• 等位复制：Command+Shift+V
• 复制上一步操作：Command+D

颜色

吸色：I
取色：Control+C

1. 选中色值，按上下键调节灰度，按住 Shift 再按上下键可大幅度调节。
2. 鼠标在色盘上滚动可调色，按住 Option（Alt）滚动调整透明度。
3. Ctrl +C 或者 I 取色，拖动可预览。
4. 选中渐变端点，按下空格键并拖动可以整体移动渐变。

4 插件

• flow chart: 画流程图

5 常见技巧

5.1 软件安装

1. 【汉化客户端下载】 :figmaEX.md
2. 【汉化客户端】+【中文字体切换】：Mac 版本 FigmaEX 安装损坏解决办法.md

5.2 设置使用客户端打开

5.3 figma 评论功能

• shift+C： 显示和隐藏评论
• 按键c: 进行评论，输入评论后，cmd+enter提交评论
• 按键c后，在显示的评论的情况，右边会默认显示所有的评论，按照时间排序
• 评论的时候，可以选择一个区域

ob地址：笔记