Figma 快速上手教程

    执行以下步骤可使用 Figma 快速绘制图片。

    访问 ，点击 Sign up 创建账号。

    点击 tidb-sketch-book 查看该绘图模板文件。

    tidb-sketch-book

    1. 点击 Back to Files 查看可浏览或可编辑的文件。

      Recently viewed

    2. 右击 tidb-sketch-book，选择 Duplicate，可生成新文件 tidb-sketch-book (Copy)。

    3. 右击 tidb-sketch-book (Copy) 文件，选择 Rename 修改文件名称。本示例中，文件更名为 figma-test。

      Rename

    4. 双击更名后的文件。选择 Frame 工具 (F)，在屏幕中拖动鼠标生成一个 Frame（画框）。本示例中，生成 Frame 19。

      选中一个 Frame，使用快捷键 Shift+Command+G，可删除该 Frame。

      Frame

    之后便可在这个 Frame 中开始绘图。

    建议将其他 Frame 中已有的图形复制、粘贴到新的 Frame 中，以便快速绘制图片。

    取色

    1. 为了准确取到某个像素点的颜色，点击 Fill 中的颜色小卡片，再点击弹出的颜色选择器中的吸管工具，即可调出吸管工具（快捷键：I 或者 Ctrl+C）。

      吸管工具

    2. 使用吸管工具吸取对应像素色块的颜色，放大镜窗口会显示取样像素的颜色和 hex 编码。

    复制并粘贴对象

    1. 选中待编辑的对象，使用快捷键 Command+C 复制对象。

    2. 选中目标 Frame，使用快捷键 Command+V 粘贴对象。

    复制并粘贴多个对象

    1. 在图层面板中选中待编辑的对象所在的图层，使用快捷键 Command+C 复制这些对象。

    2. 选中目标 Frame，使用快捷键 Command+V 将这些对象粘贴到当前 Frame。

    绘制圆角

    选中待编辑的对象，在属性面板中调整 Corner Radius 值。

    Corner Radius

    1. 选中待导出的 Frame，点击 Export 一栏的 +。

    2. 设置图片格式。可导出为 PNG（推荐）、JPG、SVG 或 PDF 格式。

      图片格式

    3. 点击 Export Frame X 按钮导出 Frame。

    更多步骤见 Figma 官方文档。