Figma笔记

Figma笔记整理

· 对于vi命名的习惯：bg/dark；bg/light；text/primary；text/content；text/sub(ps)(代替者；辅助)

· 框架UI设计思维：每一行都是一个框，每一部都是一个块

· 在figma中可以单选中形状中的一根线进行复制

· Frame：画板和形状的结合体（div）

· 先用Frame，第二选择是group

· 创建按钮时直接用Frame

· 形状建立好后直接复制粘贴图片进去即可

· Ctr+C点着鼠标移动预览

· R键刷新页面

· 100%显示：Shift+0；最合适大小：shift+2；显示所有画板：shift+1

· 穿透选择：com+点击

· 苹果和微软的快捷键：command=ctrl，option=Alt

· 将（形状、文字…）变成Frame：com+opt+G

取消（编组）：com+shift+G

· 取消组件：com+opt+B

· 拆分组件(将组件变成Frame)：com+opt+B（Detach Instance）

· Figma的重命名功能：com+R

· 运行上一次使用的插件：com+opt+p

· 上/下/左/右/水平/垂直：opt+WASDHV（V:Vertical; H:Horizontal）

· 对称方式翻转：shift+V/H

· Shift+A：Auto Layout选中的部分（这个步骤之后的惯用动作是回车进入所有子元素，调节自动宽）

· 取消auto layout：opt+shift+A

· com+D：选中复制

· 将容纳多个小块的容器统一编成Auto Layout：先Ctr+D复制其中一个块，再选中这两个块编为Auto Layout，最后选中一个进行ctrl+D复制

· 进入锚点模式：形状状态下+回车

· 在Layout Grid中，边距一般24，Gutter一般16

· Frame也可以是圆

· 隐藏网格/隐藏栅格栏显示：Ctr+G

· Shift+R：显示参考线

· 遇到所有的等分情况：拉矩形，给栅格

· Auto Layout是调节内部元素，Resizing是调节内部元素（Resizing：fixed width，hug contents，fill container）

· 固定边：fixed width

跟着内容走（自适应于内容）：hug contents

填充容器：container

· 进入子元素：选中Frame后+回车键

· Community里面需要用英文搜索plugin（常用插件推荐）

① 将位图转换为矢量图：image tracer

② 填充大量不同分类的纯图片：unsplash

③ 填充文字、图片、地址：content reel

④ 聊天(定位到稿件)：Figma chat

⑤ 苹果组件源文件搜索关键词：IOS & IPADOS 14 UI kit for figma

⑥ 原型图（线框图）源文件：Wireframes

· Figma中的样式需要自己另行创建，当统一使用样式中的颜色时可实现整体所用之处更换

· 移动换内icon：com+opt；换外icon：按住opt

· 分割线实现方法：块状给固定阴影（必须先给到填充）

· Figma中切图识别是按照有无点击“Export”识别有无切图

· 变相调节Auto Layout中两个英文之间的基线对齐：给Frame再Alt+拉框

· 触发方式：点击、拖拽、悬停、按下、光标移至等

· 交互方式：正常跳转Navigate to；open overlay弹出层（覆盖出现）;sway with原地切换；dissolve淡入淡出

· 制作icon的key：①icon网格 ②找到视觉中心 ③统一线框间距

· 使用钢笔工具时ESC代表停止路径

· 系统级icon尺寸一般为24×24 px

· 等比例缩放按住K（此时显示双箭头）

· 将线变成形状：右键+“outline stroke”

· 栅格化（连接上所有锚点）：Flatten

· 移动时按像素点走：snap to pixel grid

· 矢量显示：pixed preview（disabled）

· 调节背景模糊：background blur先调fill透明度

· 首行缩进：paragraph indent

· 选中文字后com+v自动链接到网站或者设计稿