用 Figma 两步生成高保真产品原型图
Figma 两步生成产品原型
学习 Figma 的基本操作逻辑，确保即便你完全没用过设计工具，也能跟着完成练习。
💡
基础了解：左侧是项目的新建和资源管理入口，右上角的几个按钮是 Figma 的常见功能。
Make 用来用一句话让 AI 帮你先生成一个大概的界面或结构草稿
Design 是真正画网页 / App 界面、搭组件和做原型的主工作区
FigJam 像团队白板，用来贴便利贴、画流程和做前期讨论
1. 新建 Design 文件
💪
在首页或者右上角的入口里，选择 Design ，新建一个文件，你会进入一个空白的设计画布。
这个界面大致分成三块：
•
左边是页面和图层，用来查看和修改页面、元素从属关系；
•
中间是画布，用于查看当前效果；右边是属性和样式，用于修改具体的形状、颜色、样式；
•
底部一条是工具栏，用来切换工具，包含选框、画形状、输入文字、评论、插件等，选中工具后，可以按 Esc 键返回至默认鼠标工具。
2. 创建你的第一个 Frame（画板）
💡
在正式放置元素之前，需要先为页面确定一个清晰的边界，这个边界由 Frame 来承担。你可以在底部工具栏中选择 Frame 工具，或者直接按键盘 F，然后在画布上拖出一个矩形区域。
使用底部工具栏里的 Frame 工具，或者直接按键盘 F。
在画布中拖出一个矩形区域，右侧属性栏里把宽度改成比如 1440，高度改成 900。
在左侧图层栏，把这个 Frame 重命名，比如叫 My First Page 或者你项目的名字。
✍️
👇这个 Frame 就是一屏界面的页面容器，之后的标题、文字、按钮、图片等内容都应该放在这个 Frame 内部，而不是散落在画布的任意位置。
以 Frame 为边界来组织内容，有助于在后续进行滚动设置、适配不同设备尺寸、导出画面及制作原型时，保持结构可控。
3. 在 Frame 里放文字和简单元素
有了容器，接下来我们来学习如何放置最基本的组件，例如：标题、副标题、按钮、占位图块。
选择文字工具（底部工具栏中的 T），在 Frame 里点击一下，输入页面标题，比如：My Portfolio。
在右侧属性里，把字体大小调大一点（例如 96），字重调粗一点。
在标题下面，再用文字工具输入一行简单说明，比如：一两句描述这个页面要做什么。字号可以小一些，行高略放大一点，读起来不那么挤。
画一个按钮雏形：用矩形工具在标题下面画一个大概 200 × 48 的矩形，右侧给它一个比较明显的填充颜色，再适当加一点圆角。
用文字工具在矩形上方输入按钮文字，比如： Get Started，把矩形和文字一并选中，用顶部的对齐工具让文字水平、垂直都居中。
在按钮一侧或下方，再画一个较大的浅灰色矩形作为"图片占位区"，后面可以用来放展示图片。
做到这里，其实你已经有了一个非常简陋但结构完整的"首页草稿"：一个标题、一段话、一个按钮、一个主要展示区域。
4. 善用 Auto Layout 整合元素
如果所有元素只是随手拖拽，页面很快会乱。Figma 里一个很重要的概念就是 Auto Layout ，它可以把一组元素变成一个带规则的容器。
你可以选中"主标题 + 副标题 + 按钮"这三样，在右侧属性栏里点击 Add Auto layout 。
这时这三样会被包在一个容器里，你可以在右侧调整参数，其中的元素布局会根据参数自动适应调整：
•
它们是竖着排还是横着排
•
元素之间的间距是多少
•
整个这一块离容器边缘有多少内边距（padding）
按钮内部也可以用 Auto Layout，我们能够实现这样的一个效果：当我调整了文字，按钮的长度也会自动调整。
💡
先把按钮背景的矩形和按钮文字选中，添加 Auto Layout，让这两个东西变成一个"按钮容器"。接着选中这个按钮容器，把宽高都设置成 Hug contents 。这样一来，文字会一直保持在按钮正中间，文字多一点、少一点，按钮的宽度都会自动跟着变化。
5. 将按钮变为可复用组件
💡
现在我们要学习一个新的概念，组件。组件的意思就是可以被反复利用的元素，比如按钮这种元素，只要你预感之后还会反复用到，就可以考虑把它做成组件。我们在刚才已经加好 Auto Layout 的按钮基础操作：
选中整个按钮容器；
右键选择 Create component（创建组件）
💡
这样，这个按钮就从一组普通图层，变成了一个组件母版。之后如果你在其他页面或 Frame 里需要同样风格的按钮，可以直接从左侧的 Assets 面板里拖出来使用。
💡
此时所有用到的按钮，都是这个母版的同步拷贝。当你修改母版的颜色、圆角或间距时，所有实例都会自动保持同步更新。