Master Go

快捷键

一次性选中多个元素 Shift + 鼠标左键点击多个元素

新建文本 T

创建容器 F 快速创建 100*100 的容器 R

创建自动布局(容器) Shift + A

编组 Command + G （感觉有了自动布局(容器)后，编组有些多余。组的好处是 在页面上会显示组标题。容器与组的区别：1 是容器中图层可以通过拖动移入和移出，而组是逃不出去的；2 是容器大小可以单独设置，和子元素宽高是独立的，超出也能设置裁剪隐藏，而组是根据内部元素自动调整，同理调整组的大小也会反向调整组内元素大小）

创建组件 Option + Command + K

直接选中一个元素 Command + Ctrl + 鼠标左键（一般鼠标点击某个元素，会选中这个组或容器；可以先按下前两个键，鼠标再点击想要选中的元素）

快速复制一组元素 Command + D 或 Option + 鼠标左键拖

创建形状

R 创建矩形 R + Shift 创建正方形

O 创建椭圆形 O + Shift 创建圆形

L 创建直线

三角形和星形通过选中顶部工具栏使用，也可以按住Shift保持比例不变

钢笔工具

P 使用钢笔工具，

直线：先点击添加一个点，再在其它地方点击另一个点，就连成了直线

曲线 单调节点：鼠标悬浮在一个点上，长按拉到任意位置生成一个“调节点”，再在任意地方点击生成下一个点，此时可以长按“调节点”任意改变这两个点之间的曲线形状。

曲线 对称调节点：鼠标悬浮在一个点上，按住 Command 键，鼠标左右晃动，即可生成一对对称调节点（当该点连接多个点也有可能是单调节点）。这对调节点可以调整该点与其它点连接的线。

了解了画直线和曲线，再深入探索会发现，其实本质就是点与点之间的“连接形式”，官方名词叫“锚点类型”，有四种：直角/完全对称/角度对称/不对称。默认直角就是直线，剩下三种就是曲线。

组件与实例

实心菱形（一个大点）为组件、空心菱形为实例、实心菱形（四个小点）为可变/组合组件

可以创建一个容器，将多个组件放置其中，比如起名叫图标库/组件库。之后拖动任意一个组件到页面上，就可以点击这个组件在右侧面板随意切换该容器下的任意组件。 - 每日跟练第一期第 3 天

也可以创建一个组件的多个状态，每个起名规范叫“组件名/属性 1 值/属性 2 值”，比如“MenuItem/展开/否”，“MenuItem/展开/是”，“MenuItem/收起/否”，属性 1 表示状态，有展开、收起、移上、禁用等值；属性 2 表示是否展示图标。然后选中全部组件，在右侧选择“组合为组件状态”，它们就组合成一个整体了。此时任意一个实例都可以自由切换了。 - 每日跟练第一期第 4 天

当组合之后，就成了一个 1 包 N 的结构，如果想更改 N 中某一个“组件状态”值，或者想在 N 中增加一个，可以按下方操作：

• 更改“组件状态”值：点击左侧面板选中其中一个，右侧面板中就能改变“组件状态”了
• 增加一个：点到组件上方，会显示“N 个可变组件”，下方有个“+”，点击即可新增

全局的颜色样式和文字样式

每日跟练第一期第 5 天

通过创建容器 -> 填充 -> 四个点 -> 创建样式 可以基于当前颜色创建一个主题色

通过选中文本 -> 文字 -> 四个点 -> 创建样式 可以基于当前 font-family、weight、size、line-height、字间距创建一个文本样式

自动布局（容器）

自动布局其实就是“容器”加了“自动布局”属性，类似于 flex 容器。

很多场景都可以创建这个特殊容器

• 选择几个元素 shift+a
• 已有容器 添加 自动布局属性（设置了 display: flex）
• ...

方向：水平、垂直（flex-direction）、换行（flex-wrap）

间距：gap（鼠标悬停在间距区域，单击，可以输入值调整）

边距：px、py

定位：flex 下的容器位置是根据 flex 相关属性排列的，如果要随意调整子元素位置，将子元素设置成绝对定位

创建元素

• 文本
• icon 左侧面板-资源-组件/图标