Figma基础入门

一、软件介绍与基础设置

（一）Figma 核心特点

• 在线实时设计工具，所有设计数据云端存储，支持浏览器直接使用，无需安装；
• 桌面端 APP 与浏览器端功能完全一致，仅为个人使用偏好差异。

（二）下载与安装

• 访问 Figma 官网（https://www.figma.com/），根据操作系统（PC 或苹果系统）选择对应版本下载安装；
• 初次使用需订阅，提供免费版、专业版、企业版等订阅计划，价格 15-75 美元 / 月；
• 在校学生和教育工作者可免费申请专业版，具体申请流程可网上搜索。

（三）版本与语言建议

• 免费版对新手或无团队协作需求的个人设计师完全够用，付费版无项目数量限制，免费版仅支持 1 个项目文件夹（最多含 3 个设计文件）；
• 官方无中文版，推荐使用英文版（避免图层 / 组件命名歧义，方便与开发对接），如需中文版可搜索汉化版本。

（四）界面熟悉

1. 主界面结构：
   • 左侧导航栏：包含 “Drafts草稿”（个人可见文件）、“All Projects所有项目”（正式项目文件，支持团队协作）、“社区”（设计师分享的设计资源）；

 

• • 项目与文件：通过 “创建项目” 命名文件夹：

• • 创建设计文件：点击 “Create” 选择 “design file” 。

免费版仅支持 1 个项目文件夹（最多含 3 个设计文件）

1. 设计文件内界面：
   • 页面管理：可创建多个页面（免费版最多创建3个页面），下方显示所有页面缩略图；

 

• • 核心面板：图层面板（元素以图层形式存在）、素材面板（含组件库）、工具栏（选择、画框、图形、文本等工具）、右侧属性面板（元素属性设置）、原型面板（创建交互与动效）。

Layers图层面板（元素以图层形式存在）：

Assets素材面板（含组件库）：

工具栏（选择、画框、图形、文本等工具）：

右侧属性面板（当前选中元素的属性设置）：

 

原型面板（设计完成后，在这里创建交互与动效）

   

二、基础操作与 UI 设计流程（通过临摹学习）

调整画布背景色：

临摹页面：

（一）基础视觉元素建立

实际项目中UI设计的第一步一定是建立基础视觉元素，包含颜色，字体，图标等等。它们作为基础视觉元素，贯穿所有页面，帮助我们建立品牌视觉和用户体验的一致性设计。开始之前先确定好这些元素，会帮助我们提高效率，节省大量的时间。在Figma中用来建立颜色和字体的工具有两种，一是variable变量，二是style样式。那作为初学者，我们首先来学习style的使用方式。

颜色样式（Style）：

• 路径：右侧 “local styles”→选择 “color”→命名（如 品牌主色“brand primary”）并设置颜色值，点击 “创建”；
• 优势：修改样式时，所有应用该样式的元素自动更新，确保一致性。

   

使用：

除了品牌主色，我们还需要创建以下公共颜色：

技巧：这些公共元素或者样式是可以直接进行批量复制粘贴的：

字体样式：

• 路径：右侧 “local styles”→选择 “text”→设置字体、自重、字号、行高（如正文 “body” 设置为 regular、字号 16、行高 28）；
• 原则：一个 APP / 网页字体不超过 2 种，通过样式区分内容视觉级别。

图标准备：

然后我们还需要创建一些基础的图标，对于大型项目在时间允许的情况下，你可以为产品绘制一套图标来体现品牌风格：

   

但是如果时间有限，你完全可以使用网络上的素材作为基础。

• 素材来源：通过左侧素材面板添加 “simple design system” 等官方组件库，获取内置图标：

• 自定义：拖拽图标至画布→右键 “detach instance” 断开连接→“detach variable” 断开颜色属性→应用自定义颜色样式（如 “icon default”）；

    

关于detach instance和detach variable的作用参照文末补充内容：补充

• 规范：按尺寸分类（20×20、24×24）。

 

在准备一些装饰性图标：

至此我们就有了建筑所需的所有基础单元

（二）页面与网格系统

创建 Frame（画框）：

在Figma中frame是最常用的对元素进行编组的工具，用来把小的元素组合成组件模块或者页面，我们也可以用frame来创建空白页面。Figma为我们预设了很多常用的尺寸：

工具：工具栏点击 “frame”→右侧选择预设尺寸（如移动端常用 375×812）或自定义宽高（W 为宽度、H 为高度）；

作用：将小元素组合为组件 /模块/ 页面，是布局基础。

网格系统设置：

路径：选中 Frame→右侧点击 “+”→选择 “columns”（列）；

 

参数：列数（如移动端 4 列，网页端通常 12 列）、边距（16）、水槽（页边距，8）；

 

功能：规范元素排列对齐，支持响应式设计，可通过 “linear grade” 隐藏 / 显示网格。

（三）核心组件设计实操

搜索栏：

添加文本和图表，并设置文本样式，这里使用我们上面自定义的通用样式：

注意!添加文本的时候，鼠标不要拖动，直接点击即可输入文本，拖拽的话，可能不利于后面的自动布局

创建自动布局：选中元素：搜索图标 + 文本→然后按 “shift+a” ；

自动布局是Figma中非常实用的一个工具，当给一个或者多个元素添加了自动布局后，Figma会首先建立frame，然后再在frame上添加自动布局。当然，你也可以给已有的frame添加自动布局，自动布局可以帮助我们组织对齐排列元素，控制元素间距边距。

设置：自动布局宽 343、高度 “hug content”（随内容变化），元素（这里指图标和文本）间距 8，左对齐，边距 16（左右）/2（上下）；

居中对齐：

样式：文本应用 “text secondary” 颜色，背景应用 “surface dock” 颜色，外观设置圆角半径 999，整体居中对齐。

选择文本：

选择搜索框：

设置背景色：

设置圆角：

卡片组件：

基础图形：用图形工具画长方形（宽 343、高 192）→居中对齐；

文本与按钮：添加标题（应用 “h1” 样式）、按钮（文本应用 “body” 样式→“shift+a” 创建自动布局→填充 “brand primary” 颜色，边距 16（左右）/8（上下），圆角 999）；

选择按钮文本，设置文本样式：

为全部元素创建frame画框：全选矩形元素，按 “ctrl+alt+g” 创建 Frame→外观圆角 8，勾选 “clip content”（隐藏超出画框范围内容）。

轮播组件：

单卡片：图标 + 文本（应用 “body bold” 样式，居中对齐，填充Text Primary）→“shift+a” 创建自动布局→填充 “surface white”，宽 108、高 138，元素间距 8，圆角 4；

多卡片组合：复制 4张单卡片→替换图标（拖拽新图标，删掉旧图标即可）和文本→全选 “shift+a” 创建自动布局→宽 343，元素间距 8，高度 “hug contents”→放入页面，页面背景设为 “surface default” 颜色。

采取上述方式，继续创建下面的卡片轮播：

创建矩形：172*117；创建文本：标题（title）和价格（body）

添加加号图标：shift  + a 应用自动布局，设置宽高32*32，居中，填充色brand primary，圆角半径：999；选则图标，设置填充色 icon invert：

选择价格和加号，按shift  + a 创建自动布局，然后选择新建的自动布局和标题再次按shift  + a 创建自动布局，设置背景色，设置标题和价格字体颜色等等。。

最后选择整个自动布局，和上面的矩形图片区域进行自动布局，设置间距为0：

复制三份卡片，设置自动布局，间距8，宽度343，然后将轮播放入页面：

底部导航栏：

将页面拉长一些

单元素：图标（“shift+a” 创建自动布局，W64，H32，居中） + 文本（应用 “Caption” 样式）→“shift+a” 创建自动布局（宽高随内容Hug，元素间距 4，边距 8（上下））；

组合：复制 4 个单元素并替换图标→全选 “shift+a” 创建自动布局（元素间距 0，边距 16（左右）/8（上）/16（下））

选择第一个元素，然后按住shift，移动鼠标选中4个frame：

元素宽度设为 “fill container”（响应式填充）；意思是元素宽度始终填充容器宽度，这样底部导航栏就可以实现响应式，最后手动把大的frame宽度拉长为页面宽度：

导航栏frame样式：背景白色（透明度 50%）

导航栏图标颜色设置为brand品牌色，图标背景设为品牌色（透明度 10%）并添加圆角，整体固定底部对齐。

（四）组件化与图片添加

我们知道很多UI元素，比如按钮，卡片都是需要重复使用的。所以我们要把它们变成组件，成为组件后，我们在其他页面中就可以使用它所生成的实例instance，需要统一修改的时候，我们只需要修改主组件。所有的实例会自动更新，这样方便管理，提高效率。

封装复用，一键修改：

组件（Component）创建：

• • 路径：选中元素→右侧点击 “create component”→双击命名（如 “搜索栏”）；
  • 优势：生成实例（instance）可复用，修改主组件时所有实例自动更新，提升效率。

比如这里的搜索栏，我们点击选择搜索框，点击右边frame，点击create component创建组件。

成为组件的元素会显示紫色边框。左边图层面板组件名称前也会出现标志，双击给组件重新命名。

在需要使用的时候，我们在assess素材，点击本地组件库，找到搜索栏组件，直接拖拽进设计中。

   

另外，对于底部导航栏这样需要显示多种状态的组件设置上需要用到组件属性的技巧，参照：教程：《Figma组件全攻略》

图片添加：

• • 本地上传：选中矩形→右侧 “fill”→选择 “image”→“upload from computer”；
•  
  • AI 生成：选中图形→“fill”→“image”→“make an image”→输入提示词生成图片；
• 
•  
  • 优化：“Actions”→“remove background” 去背景→添加渐变底层背景→调整图层顺序与剪裁（crop）。

（五）页面排版及原则

• 对齐：所有模块居中对齐，左右留 16 像素边距；
• 间距：遵循 “亲密性原则”，相关元素间距小（如标题与模块间距 16），不相关元素间距大（如模块间间距 24）；

• 固定元素：底部导航栏在右侧 “position” 设为 “bottom”，始终固定在屏幕底部；

• 剪裁：选中页面 Frame，勾选 “clip content”，隐藏超出范围内容。

三、交互原型制作

（一）原型作用

模拟产品流程，用于设计展示或用户测试，收集反馈改进设计。

（二）创建步骤

进入原型模式：点击右上角 “Prototype” 标签。

页面连接设置：

底部导航切换：选中首页导航栏元素→拖拽连接线至目标页面（如产品列表页）→触发方式设为 “on click”，动作 “navigate to”，转场动画 “instant”（立即切换）；

上下级页面转场：产品列表页卡片连接至产品信息页→动画设为 “slide in”（滑入），方向从右向左；

上级页面进入下级（列表进入详情）：常用上下级页面转场方式（slide in 从右到左）

返回按钮：产品信息页返回按钮连接至 “back” 标志，自动返回（来时的）上一级页面。（特别适合同一个页面有多个进入点）

滑动行为设置：

页面滑动：选中首页 / 产品页→右侧 “scroll behaviour” 设为 “vertical”（垂直滑动）；

轮播滑动：选中轮播 Frame→“scroll behaviour”→“overflow” 设为 “horizontal”（横向滑动，需轮播 Frame 宽度小于内容宽度）。

固定元素：底部导航栏右侧 “position” 设为 “fixed”（固定在底部）。

预览设置：原型设置中选择预览设备（如 iPhone 13 迷你）→点击 “preview”（小窗口）或 “present”（全屏）查看效果。

设置预览首页：

四、学习建议

• 入门基础操作仅需 30 分钟，核心在实际项目中实践精进；
• 进阶学习：可关注作者 “设计系统全攻略课程”，学习颜色 / 文本 / 网格系统建立、共享组件库管理等系统性内容；
• 持续积累：熟悉 Figma 社区资源与插件，提升设计效率。

 

原型分享

如何将设计的原型给目标客户预览，让用户打开链接就能看到带手机框的原型“真机演示”？

注意，不要在设计页面分享，不然，别人打开链接看到的也是设计页面（如果你没有设置为只读，别人还可以进行编辑！），例如下面的分享方式：

给客户正确的分享方式：

1.先点击预览原型：

 

 

补充：

一、“detach instance”（断开实例连接）的作用

• 本质：解除 “实例” 与 “主组件” 的关联关系。
• 具体作用：
  当你从组件库中拖拽一个组件（如按钮、图标）到画布时，得到的是该组件的 “实例”（instance）。实例会继承主组件的所有属性（样式、结构、交互等），且主组件修改时，所有实例会自动同步更新。
  执行 “detach instance” 后，这个实例会变成普通的图层组合，不再与主组件关联 —— 你可以随意修改它的结构（如删除某个元素、调整布局），且不会影响主组件或其他实例。
• 为什么需要这一步：
  当你需要在现有组件基础上做个性化修改（如调整某个图标的形状、给按钮添加额外元素），但又不想影响原组件库的统一性时，就需要断开实例连接。例如，从官方组件库中拖入一个默认图标，你想修改它的线条粗细，就必须先断开实例连接，否则无法编辑其原始路径。

二、“detach variable”（断开变量连接）的作用

• 本质：解除元素与 “变量”（如颜色变量、文本变量）的绑定关系。
• 具体作用：
  变量（Variables）是 Figma 中用于统一管理样式的工具（如定义 “品牌主色”“正文字号” 等变量）。当元素的属性（如填充色、文本样式）绑定了变量时，修改变量值会同步更新所有关联元素。
  执行 “detach variable” 后，元素的属性会固定为当前值，不再随变量变化。例如，某个按钮的颜色绑定了 “primary” 变量，断开后，即使 “primary” 变量的色值被修改，这个按钮的颜色也会保持不变。
• 为什么需要这一步：
  当你需要临时修改某个元素的样式（如让某个按钮使用特殊颜色），但又不想修改全局变量（避免影响其他元素）时，就需要断开变量连接。例如，在统一使用品牌蓝的按钮中，某个特殊按钮需要用红色突出显示，此时断开它与 “primary” 颜色变量的连接，就能单独修改其颜色，而不破坏全局样式规范。

三、为什么要分两步操作？

这两步操作针对的是不同层级的 “关联性”：

 

1. 先断实例（detach instance）：解决 “组件结构” 的关联性，让你能自由编辑元素的形态、布局等 “结构属性”；
2. 再断变量（detach variable）：解决 “样式规则” 的关联性，让你能独立修改颜色、字体等 “样式属性”。

 

两者是递进关系：只有先解除实例与主组件的绑定，才能进一步编辑其内部元素的变量关联；而断开变量连接则是在保留元素结构的基础上，实现样式的个性化调整。
这种分层管理的设计，既保证了组件复用的效率，又为个性化修改提供了灵活性，是 Figma 平衡 “统一性” 和 “灵活性” 的核心机制。