Easy-Vibe开发篇阅读笔记（二）——前端开发之Figma与MasterGo入门

阅读原文：Figma 与 MasterGo 入门

一、本章核心学习目标

• 理解前端设计工具的价值，搞懂为什么要先做设计再写代码

• 掌握 Figma 的基础操作，学会用 Frame、Auto Layout、组件搭建页面原型

• 掌握 MasterGo 的基础操作，了解它和 Figma 的差异，学会用 AI 快速生成页面

• 理解从设计原型到前端代码的完整工作流，为后续的设计转代码打基础

---

二、为什么要学前端设计工具？

很多人会觉得，直接写 HTML/CSS 就能搭页面，为什么还要学设计工具？其实这是两个完全不同的事情：

• 代码解决的是渲染问题：怎么在浏览器运行、怎么适配不同设备

• 设计工具解决的是信息分布问题：交互怎么安排、信息层级怎么分配、视觉优先级怎么定

先在设计工具里搭好画布，就能把版式、层级、交互都确定好，再去写代码，避免直接写代码导致的用户体验差的问题。

另外，设计工具还能降低团队协作成本：

• 设计师、产品、开发不用脑补，围绕同一份可视的画布讨论

• 支持多人实时协同，不用再传文件、改版本

• 现代工具还能自动化处理对齐、标注、导出这些重复工作，极大提升效率

2.1 前端设计工具的演变

前端设计工具一直在进化，从单兵作战到云端协同，再到 AI 赋能：

1. Photoshop 时代：本地位图编辑，前端要手动切图、量尺寸、抠标注，效率极低

2. Sketch 时代：矢量化、组件化，把组件思维引入设计，但是还是本地文件，协作还是有问题

3. Figma 时代：把设计搬到云端，支持多人实时协同，在线评论、版本管理，彻底解决协作问题

4. AI 时代：AI 嵌入工具内部，一句话生成页面草稿，设计稿直接转成可运行的代码，实现 设计即代码

---

三、Figma 入门

Figma 是现在最主流的云端设计工具，我们来学习它的基础操作，快速上手。

3.1 新建 Design 文件

• 首页选择 Design，新建一个文件，进入空白画布

• 界面分为三块：

  • 左侧：页面和图层，管理元素的从属关系

  • 中间：画布，用来排版和设计

  • 右侧：属性和样式，修改元素的具体参数

  • 底部：工具栏，切换选框、形状、文字这些工具

3.2 创建第一个 Frame

Frame 就是页面的容器，用来确定界面的边界，所有内容都要放在 Frame 里：

1. 按快捷键 F，或者选 Frame 工具，在画布拖出矩形

2. 右侧设置尺寸，比如网页常用的 1440×900

3. 左侧重命名这个 Frame，比如你的项目名

3.3 添加基础元素

有了容器，就可以往里面加基础的页面元素：

• 文字：按 T 选文字工具，输入标题、描述，调整字号、字重

• 形状：用矩形工具画按钮、占位块，设置颜色、圆角

• 对齐：选中多个元素，用对齐工具让它们居中、对齐

3.4 用 Auto Layout 做自适应布局

如果元素都是手动拖，页面很容易乱，Auto Layout 就是解决这个的，它能把一组元素变成带规则的容器：

1. 选中一组元素，点击 Add Auto Layout

2. 可以设置是横排还是竖排，元素之间的间距，容器的内边距

3. 比如按钮，把矩形和文字加 Auto Layout，设置 Hug contents，这样文字变多，按钮宽度会自动跟着变，文字永远居中

3.5 创建可复用组件

组件就是可以反复用的元素，比如按钮，做一次就能到处用：

1. 选中做好的按钮（已经加了 Auto Layout）

2. 右键选 Create component，把它变成组件母版

3. 之后其他地方要用，直接从 Assets 面板拖出来就行

4. 改母版的颜色、圆角，所有用到的实例都会自动同步更新，不用一个个改

---

四、MasterGo 入门

MasterGo 可以理解为中国版的 Figma，整体操作逻辑和 Figma 很像，但是有一些本地化的优化，还有更实用的 AI 功能。

4.1 基础操作

学会了 Figma，MasterGo 几乎可以无缝上手：

• 界面布局几乎一样：左侧图层、中间画布、右侧属性面板

• 同样支持 Frame、Auto Layout、组件、多人协同

• 操作快捷键也基本一致，比如 F 建 Frame，T 建文字

4.2 核心差异：AI 生成页面

MasterGo 有一个很实用的 AI 功能，就是一句话生成页面：

1. 输入你的需求，比如 做一个个人作品集首页，有标题、介绍、作品列表

2. AI 会自动生成结构清晰的页面原型，所有元素都是可编辑的

3. 你可以直接把结果插入画布，然后微调细节，也可以直接导出对应的前端代码

这个功能对新手特别友好，不用自己一点点搭元素，AI 先帮你出草稿，你再改就行。

---

五、下一步：从原型到代码

学会了设计工具，搭好了原型，下一步就是把设计稿转成真正能运行的前端代码，有几种方式：

1. 多模态 AI 转换：把设计稿截图发给 AI，直接生成 HTML/React 代码

2. Figma Make：Figma 官方的 AI 工具，高精度还原设计，直接导出代码

3. MasterGo AI：一键生成页面，直接导出可运行的代码

这些方法各有优劣，你可以根据自己的项目需求选择。

---

本章总结

这一章我们学习了现代前端设计工具的基础，核心的收获是：

1. 设计工具不是多余的，它能帮你先把信息排布、交互逻辑定好，避免直接写代码的体验问题，还能降低协作成本

2. Figma 和 MasterGo 的核心操作很简单，只要掌握 Frame、Auto Layout、组件这三个核心概念，就能快速搭出页面原型

3. 现在的设计工具已经加入了 AI 能力，能帮你快速生成草稿，甚至直接转成代码，极大提升开发效率

4. 学会了这些，你就可以先设计好界面原型，再转成代码，比直接写代码效率更高，体验更好