16-Figma-自动布局

16-Figma-自动布局

常见操作

• 创建自动布局,shift+a
• 解除自动布局,属性面板操作或者alt+shift+a
• 自动布局加背景圆角,属性面板
• 自动布局内子元素新增,属性面板设置自动布局元素新增方向(水平或垂直),再ctrl+d
• 自动布局控制内边距,属性面板
• 自动布局控制项目间距,属性面板
• 自动布局设置大小,拖动或者属性面板
• 自动布局如何适应内容,属性面板操作
• 自动布局让子元素居中对齐,属性面板操作
• 自动布局如何设置等距模式,属性面板操作
• 改变自动布局宽高子组件固定高度调节宽度,属性面板操作
• 改变自动布局宽高子组件固定宽度调节高度,属性面板操作
• 改变自动布局宽高子组件调节宽度和高度,属性面板操作

简单总结

1. 需要有一个大图层管理里面的小图层
2. 适应内容：根据文字数量变化自动调节
3. 固定宽度：组件的宽度和高度固定
4. 填充容器：根据外轮廓的大小变化，内部元素大小也随之改变

区别

• frame和自动布局的相同点
  • 边框
  • 填充
  • 效果
• frame和自动布局的不同点
  • frame
    • 裁剪
    • ​ 子组件约束
    • ​ 布局网格
  • ​ 自动布局
    • ​ 项目边距
    • ​ 内边距
    • ​ 子组件堆叠
    • ​ 子组件等距
    • ​ 水平垂直居中方便
    • ​ frame的背景可以自适应内容变化
    • ​ frame的子元素可以方便的调整顺序