【Figma学习】组件管理

常规组件搭建

多种状态组件搭建

多组件选择：Shift + 拖拽

变体
1.选中所有组件合并为变体

一、先分清状态 Ctrl + R进行重命名
选中一部分：
版本=IOS,(英文逗号)
版本=android,
二、重叠部分
重命名-当前名称
状态=默认,
最后再合并为变体
最后拖拽出一个，即可将其变体表达出来

注意（复杂的变体一定要分清其状态）

###################################
1.添加组件快捷键Ctrl + Alt + K
2.组件分为初始组件和实例组件（复制初始组件得到的）
3.修改初始组件会直接影响实例组件，如不需要影响，对实例组件进行分离实例即可Ctrl + Alt + B
4.项目中具有多种属性状态的组件，使用变体功能进行搭建
5.操作变体组件时，对命名规则要求较高，特别注意
6.重命名快捷键 Ctrl + R
###################################

Figma组件、样式团队推送管理

资产-团队组件库（书图标）

约束和栅格
约束调整的时子集而非父集

###################################
1.约束常用于适合弹性布局的界面中
2.当父级画框进行大小拖动时，只会影响子级，不能跨级控制
3.按Shift可以加选与减选约束控制
###################################

布局网格
###################################
1.栅格工具可以应用在UI(4/6)以及网页设计中(12/24)
2.需要弹性布局就选择“拉伸”模式，其余情况选择“左” “右” “居中”
3.栅格支持保存样式
###################################

自动布局
选中文字Shift + A（Frame）
选中向下或者向上箭头Ctrl + D进行复制操作
项目间距

创建自动布局Shift + A
移除自动布局 Alt + Shift + A