Figma实用小技巧

在这里插入图片描述

1. 介绍

原作:lijxse 视频地址
文字版整理:岩鸣杨子

2. 快速拖拽调整数值

按住option可在数值上拖拽调整,不按option时只能在X/Y/W/H/旋转/圆角等的图标上拖拽调整,不能调整透明度的数值。

3. 属性粘贴复制

shift+X:互换填充和描边
选中图层的某个属性,然后cmd+C,则可复制这个图层特定的属性。
选中图层的某个属性,然后cmd+V,则可粘贴到这个图层特定的属性上。

4. 列表切换&快速搜索

option+1:切换到Layers
option+2:切换到Assets,并自动进入搜索状态
cmd+/:全局搜索

5. 基础操作疯狂用

shift+1:显示所有设计图
按住Z:显示放大镜,然后拖拽出一片区域放大显示
shift+2:对当前元素放大显示

6. Framer必知高效技巧

cmd+option+G:把选中的几个元素放进Frame里
按住cmd时拖动frame边框可以忽略里面的元素位置调整frame大小
按住cmd+option时拖动frame边框可以对称地调整frame大小

7. 组件库快速替换

单独替换里面的一个组件:按住option+cmd,从assets里面拖入。

8. 取消组件

option+cmd+B
cmd+G:编组
shift+cmd+G:取消编组

9. 展开收起图层列表

收起option+L,选择某个图层可单独收起该图层

10. 图层上下级选择

回车键:选择组名,然后按回车键就能选中组内所有图层
shift+回车:从下级往上级选

11. 等分的宽度计算技巧

点右边Layout Grid,选择Columns(列),调整好数值。选中所需要自动调整宽度的图层,将右边constraints调成“left&right”,图层就能跟随grid自动调整宽度。

12. 快速调整图层透明度

直接按数字键,图层就能改成相应透明度。

13. 快速调整位置对齐&对称

option+W/A/S/D:移动到上/左/下/右边缘
option+V:垂直居中
option+H:水平居中
shift+V:上下翻转
shift+H:左右翻转

14. 快速实时预览颜色

control+C

15. 参考线、布局的显示隐藏快捷键

control+G:显示/隐藏栅格或网格
shift+R:显示/隐藏标尺及参考线

16. 用Figma制作简单可外链的“真实”网页

在prototype的interaction里选一种交互方式,然后选Open Link,输入网址。

17. 从图层快速定位到设计稿

shift+2,或双击图层图标

18. 批量添加图片

cmd+shift+K

19. 批量重命名

cmd+R

20. 善用加减乘除调整位置

数值框内可直接进行加减乘除计算。

21. 手动在历史快照中添加自己标记的历史版本

点击文件名右边小箭头,展开下拉列表,选择Show Version History即可在右边显示出Version History,点右边小加号添加一个版本。也可用快捷键cmd+option+S。

22. 需要付费的团队组件库

付费版$15/月,可以调用其他文件里的组件库。免费版只能同步样式,不能同步组件库。

23. 样式分类管理

用“/”分组

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章