企业官网建设流程全解析

1. 写在最前：这个 30 天计划到底适合谁

这几年我见过太多人打开 Figma 之后，跟着视频点了几下就觉得“我会了”，一关教程又发现自己连一个对称的按钮都画不出来。也有不少人买了几十G的素材包，结果自己的文件永远乱成一团，图层命名全是 Frame 1、Frame 2。如果你也有这种感觉，那这份 30 天学习计划就是给你准备的。

Figma 30 天计划的核心并不是让你把界面上的每一个按钮都记住，而是逼着你在一个月内形成一套完整的设计工作流：从建画板、做组件、排布局，到连原型、交付开发，每一步都以一个真实项目为终点。它不是零散的教程合集，而是一条经过压缩的成长路径。我把它设计成四周四个阶段，每天只需要投入一到两个小时，周末可以适当加量，但不需要熬夜肝图。

这个计划适合三类人：第一类是刚入门 UI/UX，想系统找工作型作品集的设计新人；第二类是经常要和设计团队合作的开发人员，想搞懂 Figma 的自动布局和交付逻辑；第三类是产品经理或独立创业者，希望亲手把想法快速验证成可点击的原型。无论你是哪一类，看完这篇文章之后，请你先下载好 Figma 桌面端，注册一个账号，然后打开一份空白文件，我们这个月的时间，就要从这里开始。

为了让你能直观地看到自己的进度，我建议你给自己定一个终极目标：30 天之后，独立完成一个带有 5 个以上页面的 App 高保真原型，主题可以是音乐播放器、习惯打卡、点餐小程序这类你熟悉的东西。这个目标比任何证书都更有说服力。

2. 第一个阶段（第 1-7 天）：在画布上建立正确的空间感

2.1 从认识三大基础区域开始

很多人学 Figma 卡住，往往是因为一上来就被铺满屏幕的工具吓到了。所以前三天我们只干一件事：把画布、图层、属性这三个区域的关系彻底搞明白。

打开 Figma 后，中间这块深灰色的无限画布叫 Canvas，它是一个无限延伸的空间，你所有的设计稿都会摆在上面。左侧的 Layers 面板，是你当前文件里所有元素的目录，相当于 Photoshop 里的图层面板，但它和 PS 最大的不同是，Figma 里没有“合并图层”的概念，而是用 Frame 来组织内容。右侧的 Design 面板是属性检查器，你选中任意一个元素时，它的大小、位置、颜色、圆角、阴影都会出现在这里。

你只要记住一句话：在 Figma 里，一切皆层级，左侧管结构，右侧管属性。

这里我要特别提一下 Frame 工具和矩形工具的区别。新手最常见的错误，是拿矩形工具画大框，把一堆内容堆在里面。这会导致两个问题：第一，你的元素之间没有任何结构关系；第二，后面做原型、做自适应布局时，你会发现所有东西都是散的。而 Frame 是一个能承载布局逻辑的容器，它可以设置自动布局，可以承载原型交互。所以从第一天开始，你就要养成一个习惯：先建 Frame，再往里面填充内容。

2.2 高频快捷键：从第一天就练出肌肉记忆

我不知道你是怎么用 Figma 的，但我见过太多人操作软件时，右手在触控板上滑半天，才找到移动工具在哪里。等你上了强度之后，这个效率是很要命的。前 7 天你不必背完所有快捷键，只需把这几个高频操作练成条件反射就够了：

• V快速切换为移动工具，选择、拖动、调整图层顺序
• F新建 Frame，快捷键比鼠标点两下快得多
• R绘制矩形，O绘制椭圆，L绘制直线
• Shift拖拽时锁定等比缩放，比如画正方形、正圆
• Alt拖拽快速复制元素，按住后拖动，松手即完成复制
• Ctrl + D重复上一步操作，做列表项时非常香

这些快捷键不需要刻意背，你在画每一张图时逼自己用就行。一个直观的验证标准是：如果你画一个 375x812 的手机 Frame 需要超过 5 秒，就说明肌肉记忆还没形成，继续练。

2.3 对齐与间距：怎么让设计稿看起来“高级”

很多新手画出来的界面总有一种说不出的粗糙感，原因通常就是元素之间的间距不统一。比如卡片距离屏幕左边是 16px，右边却变成了 20px，这种细节用户虽然说不出来，但他会觉得不对劲。

所以从第一周开始，我给你的硬性要求是：所有距离必须写成能被 8 整除的数字。16、24、32、48、64，这些是移动端界面设计中最常用的间距单位。Figma 里怎么快速做到这一点？选中元素后按住Alt键，再用鼠标悬停到其他元素上，Figma 会自动显示红色距离参考线，同时按住Shift时数值会以 10 为单位跳动，但精确输入数字才是最稳妥的。

还有一个特别容易被忽略的细节：像素对齐。如果你发现画出来的矩形边框是半透明的、看起来发虚，多半是它的位置出现了小数像素，比如 X 坐标是 231.5。解决方法是选中图层后，在右侧属性面板把 X、Y 数值手动改成整数，或者直接点击属性面板里的“Align to pixel grid”图标。很多人画完整个界面才发现所有元素都虚，其实就是这一步没做。

3. 第二个阶段（第 8-14 天）：从一次性设计升级成可复用的组件体系

3.1 样式系统：把颜色、字体、阴影存成可复用的变量

你是否有过这样的经历：一个界面的主色已经在十几个页面里用过了，这时产品经理突然说“这个蓝色稍微深一点”，你只能一个图层一个图层地改，改到凌晨两点。使用样式系统就能轻松避免这种悲剧。

Figma 的样式分为四种：Color Styles（颜色）、Text Styles（文本）、Effect Styles（阴影/模糊）和 Grid Styles（网格）。选中一个填充颜色，在右侧属性面板的最下方点击“Styles”旁边的四个点图标，选择“Create style”，以后你只需要在样式面板里双击这个颜色，就自动弹到所有使用该样式的图层上。

这里有一个我个人非常推荐的命名习惯：使用“类型/语义/状态”三层结构，比如Colors/Primary/Default、Text/Title/Bold。不要用颜色1、颜色2这种命名，因为三个月之后你自己都分不清颜色1到底是蓝色还是绿色。前 7 天画的东西可能还比较简单，但从第 8 天开始，请强迫自己为每个颜色、每套字体都建立样式。这不仅是效率问题，更是职业素养的体现。

至于为什么要叫“语义”而不是“具体色值”，是因为这样可以让团队里不懂配色的开发同事，也能通过名字快速理解该用在哪里。比如Text/Error一眼就知道是错误提示的文字颜色，而不是Colors/Red。

3.2 组件思维：当你在改主组件时，千军万马都在跟随

从第 9 天开始，我们要接触整个 Figma 里最值钱的功能之一：Components（组件）。

你可以把组件理解成一个“活字印刷字模”，你在一个地方创建了一个按钮，然后把它复制到整个项目的一百个页面上，这些复制出来的东西都叫 Instance（实例）。当某天你需要把按钮的圆角从 8px 改成 12px 时，你只需要修改最开始创建的那个主组件，页面上的所有实例都会自动同步更新。

为什么这一步对学习计划来说如此重要？因为我见过太多作品集项目，页面倒是画了二十几张，但仔细一看，里面的按钮、输入框、卡片全都是用最原始的矩形和文字一个个拼出来的，页面之间毫不统一。这种作品集拿出去，有经验的设计师一眼就能看出这是个新手。

我给你的练习方案是在第 10 到 11 天，打开你的个人项目，把里面的按钮、图标、输入框、列表项全部抽取出来创建成组件。如果你想把组件玩得更进阶一点，可以研究一下 Variants（变体）。比如创建一个按钮组件，里面包含 Primary、Secondary、Disabled 三种状态，通过右侧面板的切换按钮就可以快速切换外观，而不用维护三个分离的组件库。这在以后做设计系统时会极大地提升效率。

另外还要提示一个新手容易踩的坑：双击组件进去修改后，如果只影响当前这一个实例而不影响主组件，你需要在右侧属性面板里点“Detach instance”，把它切断成普通图层。但绝大多数情况下，你要修改的是主组件本身，而不是用 Detach 去硬改。

3.3 自动布局：为什么说它是 Figma 的“灵魂功能”

如果说组件让你的界面长得统一，自动布局则让你的界面活得起来。毫不夸张地说，不会自动布局就等于不会用 Figma。

自动布局的本质，是用类似前端 Flexbox 的方式，让容器内的元素自动排列和伸缩。选中一个 Frame，按Shift + A，它就被赋予了自动布局的能力。从这一刻起，你在这个 Frame 里新增元素时，其他元素会自动让位，不会再叠在一起；你删除元素时，后面的内容会自动补上来；调整容器的宽度，内部元素可以根据方向自动跟着变。

举个例子，做一个常见的消息通知列表：每条消息包含一个头像、一段标题、一行摘要和一个时间。如果不用自动布局，你得手动调整三个文本块的距离和位置；但用了自动布局之后，你只需要设定好横向间距，往里面加一条新记录，它就会自动排到下面。以后你想统一把标题字号调大，文本会自动换行，列表也不会撑破卡片。

我会建议前 7 天不要碰自动布局，是因为那时你还在建立对坐标和间距的直觉，过早使用反而会让你搞不明白布局出问题时到底哪里出了毛病。但到了第 12 天之后，我希望你手上的每一个 Frame 都习惯性地按一下Shift + A，即使它只有一块纯色背景。

这里有一个很实战的技巧：嵌套自动布局。很多新手只会把整组元素选中后直接套一层自动布局，导致内部结构全是平铺的，稍微改一个元素的大小，其他所有元素都会跟着乱动。正确的做法是：同组的元素先自成一组，比如头像和昵称放在一个横向的自动布局里，文本和摘要放在另一个纵向的自动布局里，最后把这两组再嵌套进同一个父级。就像俄罗斯套娃一样，每一层管好自己的事，这样整个界面才有弹性。

4. 第三个阶段（第 15-21 天）：让原型动起来，而不只是放几张截图

4.1 原型面板的底层逻辑：把页面之间的跳转讲明白

静态的界面只能证明你会画图，可点击的原型才能证明你理解一个产品是怎么运转的。很多初学者做的原型，就是在几个页面之间连线，点击按钮跳到下一页，但页面与页面之间完全没有逻辑关系，点了一轮自己也绕晕了。

在 Figma 的原型模式里，最核心的工具是右侧的 Prototype 面板，你选中任意一个 Frame，在它右侧的圆形连接点上拖出一条线，指向目标 Frame，就完成了两个页面之间的交互。这个交互并不只是在视觉上连接两个页面，它还定义了触发方式（点击、拖拽、悬停、键盘输入）、触发延迟和转场动画。

我给你的第 15-16 天任务是：把你设计稿里的核心功能整理成一张用户流程图，比如“登录 → 首页 → 点击详情 → 查看详情页 → 返回首页”。先在纸上画出这个流向，再到 Figma 里一根线一根线地连接起来。连接的时候不要贪多，先把最核心的主流程打通，让一个从未见过你项目的人拿到原型后不用任何指导，也能顺利地从头点到尾。

4.2 转场与交互动效：用 Smart Animate 制造丝滑感

如果你想让自己的原型在一众作品集中脱颖而出，那 Smart Animate 绝对是你需要掌握的关键功能。它能够识别两个 Frame 中相同名称的图层，自动补全它们之间的位置和大小变化。

举个例子，你想做一个“点击卡片后，卡片放大成为详情页头部”的动效。只要保证在列表页和详情页里，这张卡片的图层名称完全相同（比如都是Card/Project1），然后设置转场动画为 Smart Animate，Figma 就会自动把卡片从缩小状态变到全屏状态，看起来像写了一段非常顺滑的代码。

不过 Smart Animate 有它的脾气，最常见的一个问题是补间时元素突然闪一下。这通常是因为两个帧里的图层数量不一致，或者图层的层级顺序对不上。排查方法很直接：把两个 Frame 并排放在一起，检查图层列表中从第一行到最后一行的顺序是否完全对应。哪怕只有一个元素名称不同或者多了一层分组，动画可能就会变得残缺。

从第 17 天开始，我建议你每天抽出 20 分钟，给自己的原型加上这四类交互动效：

• 页面的淡入淡出，使用 Smart Animate 且动画曲线选 Ease In And Out
• 按钮的按下微反馈，比如变暗或缩放 0.95
• 抽屉或弹窗从底部滑入
• 列表项的依次进入（通过设置延迟来实现）

这些动效不需要花哨，它只要能传达出元素的层级关系和物理感就够了。在原型演示的时候，一点点顺滑的过渡，就能让听你讲解的人觉得这东西已经做出来了。

4.3 原型测试的常用手法：邀请别人点一点

第 19 到 21 天可以分一部分时间给你的原型做“体检”。原型做出来不是拿来自嗨的，而是要让人用的。你可以参考一个非常实用的方法：把原型链接发给一个没有参与你设计的朋友，让他在不看你电脑屏幕的前提下，独立完成一个任务，比如“找到支付入口并完成下单”。

他要说不出来哪一步该点哪里，那这往往不是他的问题，而是你的流程图没有设计清楚。原型测试不用等整个项目都完成再进行，从第 20 天开始就可以拿半成品来测试，越早发现问题，修正的成本越低。这是我的切身体会：在 Figma 里改一个流程，比上线后改代码要划算得多。

5. 第四个阶段（第 22-30 天）：用项目归档、团队协作和开发交付来收尾

5.1 文件管理：让工程文件比画稿本身更值钱

到了第 22 天，你的项目已经填满了各种页面、组件和样式。可有些东西越画越多，越来越乱，最后自己都找不到之前做过的页面放在哪里。你可能也碰到过这种尴尬：甲方或者队友问你“那个按钮在哪个 Frame 里”，你只能一页一页地翻。

从第 22 天开始，我要求你停下来，做一次全面整理：

• 使用 Pages 来划分逻辑区块，比如一个线框图页，一个UI 设计页，一个组件库页
• 每个 Frame 都要有规范的名字，但不要用Page 01这种，要叫首页 - 登录态 - 空数据这样能让人一眼看懂
• 页面中废弃的元素直接删除，不要留在角落，避免误选
• 一个 Frame 里的图层按从上到下的阅读顺序排列，和 UI 的层级保持对应

你可以给自己设定一个简单的红线：第 22 天之后，任何新画的界面，图层混乱超过十层就不允许关电脑。文件乱不是小问题，它决定了三个月后你自己还能不能找回思路，也决定了将来的协作伙伴是否愿意和你一起工作。

5.2 开发交付：从“给标注”到“让开发自取所需”

很多人设计的界面好看，但一到交付就被開発人员疯狂吐槽，原因通常是开发在 Figma 里找不到他们想要的标注和切图。在 Figma 中做交付，你需要掌握三个核心思路：一是图文标注要清晰，二是图标必须导出为 SVG 格式，三是有开发模式可以直接复制代码。

如果你用的是 Figma 较新的版本，右侧有一个 Dev Mode 的切换入口。开发人员切到这个模式之后，点击任意一个图层，就能直接看到它的 CSS 属性、间距和字体信息。但这里有个大坑：如果开发伙伴点到一个没有样式命名的图层，CSS 代码里就会显示一长串生硬的颜色和字号，比如#FF00A5，根本看不出这是什么语义的颜色。所以你把颜色和文本都定义成前面提到的样式，这个价值在这一步就真正体现出来了。

我还遇到过很多人做图的时候，把图标画在 Frame 里就直接给开发了。开发拿去切图时，导出的是整个 Frame，背景色一起来，最后只能自己抠图。你需要把每个图标单独拆成一个组件，并且在导出时选择SVG格式。Figma 导出 SVG 是按你选中的图层的边界进行的，所以不要用导出整个 Frame的方式，要选中图标组件本身，再点右侧 Export。

5.3 终极实战：用最后 5 天从头到尾走一遍完整流程

最后这几天，时间很紧，但也不要再学新功能了。你只需要把前面练过的所有东西，在一个新的项目里从头到尾走一遍。我会强烈建议你换一个主题，不要用已经练了半个月的旧项目，因为旧项目里很多决策你已经做过一遍了，从头做时没有新鲜感。

方向可以是任何你感兴趣的、功能不算太复杂的服务，比如宠物预约、健身课程表、二手书交换。在开始画界面之前，先花半天时间想清楚两件事：用户是谁？他打开这个应用最想完成的一个核心任务是什么？如果你只能回答出一个任务，比如“找到附近能借充电宝的位置”，那这个项目就足够聚焦。

然后是画线框图。线框图不要用精致的颜色和字体，只需要用灰色矩形和文字把信息层级标出来。我留了一整天的时间给线框图，因为能不能节省后面改稿的时间，几乎都取决于这一步做得够不够细。线框图确认之后，再来设计 UI。这时候你已经有组件库了，画界面的速度会比前两周快很多，你会发现大部分页面其实都像拼图一样从组件库里拖出来，再填充真实内容。最后两天，把整个流程连起来，做成一个可点击的原型，再写上一份简单的项目说明文档。这个完整度已经可以放进作品集里当成一个项目展示了。

6. 一个额外的提醒：学习节奏比学习路径更重要

以前带过很多新人学 Figma，发现他们最终放弃的原因并不是软件难，而是几天没画就生疏了，觉得自己追不上进度，于是干脆躺平。其实我非常清楚，连续工作或者上课的日子很难保证每天一小时。所以我会建议你准备一个“碎片时间包”：在手机上装好 Figma 的客户端，用来查看和评论文件，但不建议在手机上画图。

遇到平台期的时候，可以切换一下练习方式。比如连续画了很多页面觉得枯燥，就可以去 Figma Community 里找一个开源的设计稿来拆解，看看别人是怎么组织组件、怎么定义自动布局的。这在设计圈里叫作“临摹”，是进步非常快的练习方式。拆解一个社区文件，比你自己闷头画一个晚上要强得多。

另外还有一点容易被忽略：关注 Figma 的官方更新日志。这款软件每月都会上线新功能，其中有些会直接影响你的工作流，比如变量、令牌、多编辑模式。你用旧习惯解决新问题的思维一旦固化，进步的瓶颈就不再是工具能力，而是信息差。作为从业者，保持对工具发展的敏感度，本身也是一种不可少的学习能力。

我个人的体会是，学习 Figma 最让人欣喜的时刻，不是学会了某个炫酷的动效，而是有一天你打开一个很久之前的文件，发现里面那些当时觉得很复杂的结构，现在几秒钟就能重建出来。看着自己明显提升的效率，你会感到这一整个月的坚持都没有白费。如果你在练习中卡在了某个具体功能上，可以回去翻每个阶段的任务清单，看看是不是前面某一步没有练得足够扎实。只要核心的组件、样式、自动布局这三个地基没有松动，后面做什么项目都会显得游刃有余。