【1】Auto Layout

Learn to create flexible designs and components

1.1 Figma tutorial: Auto layout button

文章参考：
https://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/
https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-Layout

【Option+Cmd+K】 快捷生成Compenent

1.2 Auto layout navigation menu

【Shift+A】 快捷创建自动布局
【Cmd+D】 复制当前选中对象
在创建了一个包含Auto layout的Compenent之后，可对其中包含的子对象进行hide
Auto Layout 自动布局

  • Packed
  • Space between

Resizing 改变

  • Hug Contents 适应内容:父适应子
  • Fixed width/height 固定宽度/高度
  • Fill Container 填充整个容器：子适应父

1.3 Card component with auto layout

【Shift+Cmd+K】导入图片
【回车】选择下一层的所有子层级
image.png

1.4 Auto layout review card iterations

1.5 Auto layout

要新建一个Frame 让关闭按钮位于右上角
#0.001高度的用法