第 2 课，共 7 课 · 10 分钟

搭建你的工作室

目标:准备好三个工具，弄清每个工具负责什么，并学会在 Figma 里找到方向。

从零开始的工作室

uxuiopen.com

三个工具，三份工作。AI 对话工具帮你思考，Claude Design 帮你快速探索方案，Figma 则是你亲手打磨最终设计的地方。设计日志把它们串在一起。先看这段两分钟的短片，然后动手搭建你自己的。

1 · 思考
ChatGPT
规划、调研、点子
2 · 探索
Claude Design
布局、方案、演示稿
3 · 精修
Figma
亲手打磨
4 · 记录
日志
你问了什么、决定了什么

带着新收获再来一轮

这些事交给 AI 对话工具…

规划项目，把它拆成步骤
研究受众或某个主题
头脑风暴名称、标题和创意
让它评估你的思路

这些事交给 Figma…

精确地排版界面和海报
亲手控制字体、颜色和间距
制作可以复用的组件
和别人分享设计与原型

动手试试

0/3

Figma
你的画布。在这里精修、整理和交付作品。
步骤
1. 1注册一个免费账号。
2. 2参加了班级课程？我们会帮你认证教育版，请用报名时的邮箱注册。
3. 3新建一个名为“Studio”的设计文件。
注册教育版
已就绪
ChatGPT
你的思考伙伴。调研计划、点子、评审和写作。
步骤
1. 1登录。
2. 2新建一个名为“设计工作室”的项目，让对话都集中在一起。
打开 ChatGPT 了解项目功能
已就绪
Claude 和 Claude Design
你的探索者。快速生成布局、样稿和演示稿，还能遵循设计系统。
步骤
1. 1登录 Claude。
2. 2新建一个名为“设计工作室”的项目。
3. 3Claude Design 需要付费套餐，目前是研究预览版。本单元中可选。
打开 Claude Claude 项目
已就绪

在 Figma 里找到方向

第一次打开 Figma 会觉得界面很杂，但每个文件都有同样的五个区域。认识一次，所有教程就都看得懂了。在这个简化的 Figma 窗口里四处点点，把五个区域都找出来。

动手试试

点击 Figma 窗口的各个部分，把五个区域都找出来。

已找到 0 / 5

Frame 1

Figma 里的一切都在一棵简单的树里。文件包含页面，页面包含画框，画框包含图层。看懂了这棵树，你就永远知道东西在哪儿。

📁Unit 1（文件）
📄练习场（页面）
#海报（画框）
▢页眉（编组）
T标题（文字）
◯圆形（图形）
🖼照片（图片）
📄日志（页面）

文件: 一个项目。可以通过链接分享给别人。
页面: 文件里的一个标签页。用页面把工作分开：练习场、日志、提示词库。
画框: 有尺寸的画板：一块手机屏幕、一张海报、一页幻灯片。设计都放在画框里。
图层: 画框里的任何东西：文字、图形、图片、编组。图层面板会把它们全部列出来。

光读工具说明学不到什么。这里就有一个精简版的设计工具，直接嵌在页面里。做完这六个任务，你在 Figma 里的头十分钟要做的事就都做过了。

动手试试

图层

Frame 1

Frame 1

位置和尺寸

自动布局

外观

%◜

裁剪内容投影

填充

描边

一个空文件、一个画框，六件要做的事。按 V 移动，按 F 画画框，按 T 加文字，按 R 画矩形——和 Figma 的快捷键一样。

1
给画框起个名字
在图层列表里选中它，在设计面板最上方输入一个真正的名字，比如“海报”。没有人能在满是 Frame 1、Frame 2、Frame 3 的文件里干活。
2
把它调成海报的比例
3
加一个标题
4
把标题放大：36 或更大
5
加一个形状
6
开始下一个画框

已完成 0/6

现在去真正做一遍。在另一个标签页打开 Figma，把这六步再走一遍——快捷键和你刚才用的一模一样。

在 Figma 里的头十分钟

新建文件
新建一个设计文件，命名为“Unit 1”。再添加两个页面：“日志”和“提示词库”。
画一个画框
按 F，然后在画布上拖动。在右侧面板里把画框设为 1080 × 1350，也就是社交媒体帖子的比例。
添加文字
按 T，在画框里点一下，输入一个标题。选中文字后，在右侧面板里修改字体和字号。
添加图形
按 R 画矩形，或按 O 画椭圆，拖出形状后，在右侧面板里选一个填充颜色。
移动和复制
按 V 回到移动工具。选中某个元素，按 Ctrl + D（Mac 上为 ⌘ + D）复制它。
看到全貌
按 Shift + 1 缩放视图，让所有内容都完整显示。按 Shift + 0 回到 100%。

关键词

画布: Figma 里无限大的工作区。滚动可以移动；按住 Ctrl 或 ⌘ 再滚动可以缩放。
填充: 图形、画框或文字内部的颜色（或图片）。
自动布局: Figma 中自动排列间距的设置，像一摞叠放的元素。从第 5 单元开始你会经常用到它。
组件: 可复用的元素，比如一个按钮。修改主组件，所有副本都会一起更新。

现在检验一下：你知道该用哪个工具吗？

动手试试

你会先用哪个工具？

为用户访谈草拟十个问题。
看看落地页的三种布局方向。
调整你选中那一版的间距。
把你的页面做成一套组件。
听听真诚的评审：为什么这个布局显得很乱？

🛠 动手做

建好你的工作室文件

建一个 Figma 文件，在接下来的整个课程里都用它。

1新建一个名为“UX UI Open – Unit 1”的文件，包含三个页面：练习场、日志、提示词库。
2在“练习场”里建三个画框：手机（390 × 844）、海报（1080 × 1350）和幻灯片（1920 × 1080）。
3在每个画框里放一个标题，每个用不同的字体。
4给每个画框重新命名，让名字说明它是什么。
5在讨论区告诉大家你已经搭好了，以及最让你困惑的是什么。

搭建你的工作室

目标:准备好三个工具，弄清每个工具负责什么，并学会在 Figma 里找到方向。

从零开始的工作室

uxuiopen.com

1 · 思考
ChatGPT
规划、调研、点子
2 · 探索
Claude Design
布局、方案、演示稿
3 · 精修
Figma
亲手打磨
4 · 记录
日志
你问了什么、决定了什么

带着新收获再来一轮

这些事交给 AI 对话工具…

规划项目，把它拆成步骤
研究受众或某个主题
头脑风暴名称、标题和创意
让它评估你的思路

这些事交给 Figma…

精确地排版界面和海报
亲手控制字体、颜色和间距
制作可以复用的组件
和别人分享设计与原型

动手试试

0/3

Figma
你的画布。在这里精修、整理和交付作品。
步骤
1. 1注册一个免费账号。
2. 2参加了班级课程？我们会帮你认证教育版，请用报名时的邮箱注册。
3. 3新建一个名为“Studio”的设计文件。
注册教育版
已就绪
ChatGPT
你的思考伙伴。调研计划、点子、评审和写作。
步骤
1. 1登录。
2. 2新建一个名为“设计工作室”的项目，让对话都集中在一起。
打开 ChatGPT 了解项目功能
已就绪
Claude 和 Claude Design
你的探索者。快速生成布局、样稿和演示稿，还能遵循设计系统。
步骤
1. 1登录 Claude。
2. 2新建一个名为“设计工作室”的项目。
3. 3Claude Design 需要付费套餐，目前是研究预览版。本单元中可选。
打开 Claude Claude 项目
已就绪

在 Figma 里找到方向

动手试试

点击 Figma 窗口的各个部分，把五个区域都找出来。

已找到 0 / 5

Frame 1

Figma 里的一切都在一棵简单的树里。文件包含页面，页面包含画框，画框包含图层。看懂了这棵树，你就永远知道东西在哪儿。

📁Unit 1（文件）
📄练习场（页面）
#海报（画框）
▢页眉（编组）
T标题（文字）
◯圆形（图形）
🖼照片（图片）
📄日志（页面）

文件: 一个项目。可以通过链接分享给别人。
页面: 文件里的一个标签页。用页面把工作分开：练习场、日志、提示词库。
画框: 有尺寸的画板：一块手机屏幕、一张海报、一页幻灯片。设计都放在画框里。
图层: 画框里的任何东西：文字、图形、图片、编组。图层面板会把它们全部列出来。

光读工具说明学不到什么。这里就有一个精简版的设计工具，直接嵌在页面里。做完这六个任务，你在 Figma 里的头十分钟要做的事就都做过了。

动手试试

图层

Frame 1

Frame 1

位置和尺寸

自动布局

外观

%◜

裁剪内容投影

填充

描边

一个空文件、一个画框，六件要做的事。按 V 移动，按 F 画画框，按 T 加文字，按 R 画矩形——和 Figma 的快捷键一样。

1
给画框起个名字
在图层列表里选中它，在设计面板最上方输入一个真正的名字，比如“海报”。没有人能在满是 Frame 1、Frame 2、Frame 3 的文件里干活。
2
把它调成海报的比例
3
加一个标题
4
把标题放大：36 或更大
5
加一个形状
6
开始下一个画框

已完成 0/6

现在去真正做一遍。在另一个标签页打开 Figma，把这六步再走一遍——快捷键和你刚才用的一模一样。

在 Figma 里的头十分钟

新建文件
新建一个设计文件，命名为“Unit 1”。再添加两个页面：“日志”和“提示词库”。
画一个画框
按 F，然后在画布上拖动。在右侧面板里把画框设为 1080 × 1350，也就是社交媒体帖子的比例。
添加文字
按 T，在画框里点一下，输入一个标题。选中文字后，在右侧面板里修改字体和字号。
添加图形
按 R 画矩形，或按 O 画椭圆，拖出形状后，在右侧面板里选一个填充颜色。
移动和复制
按 V 回到移动工具。选中某个元素，按 Ctrl + D（Mac 上为 ⌘ + D）复制它。
看到全貌
按 Shift + 1 缩放视图，让所有内容都完整显示。按 Shift + 0 回到 100%。

关键词

画布: Figma 里无限大的工作区。滚动可以移动；按住 Ctrl 或 ⌘ 再滚动可以缩放。
填充: 图形、画框或文字内部的颜色（或图片）。
自动布局: Figma 中自动排列间距的设置，像一摞叠放的元素。从第 5 单元开始你会经常用到它。
组件: 可复用的元素，比如一个按钮。修改主组件，所有副本都会一起更新。

现在检验一下：你知道该用哪个工具吗？

动手试试

你会先用哪个工具？

为用户访谈草拟十个问题。
看看落地页的三种布局方向。
调整你选中那一版的间距。
把你的页面做成一套组件。
听听真诚的评审：为什么这个布局显得很乱？

🛠 动手做

建好你的工作室文件

建一个 Figma 文件，在接下来的整个课程里都用它。

1新建一个名为“UX UI Open – Unit 1”的文件，包含三个页面：练习场、日志、提示词库。
2在“练习场”里建三个画框：手机（390 × 844）、海报（1080 × 1350）和幻灯片（1920 × 1080）。
3在每个画框里放一个标题，每个用不同的字体。
4给每个画框重新命名，让名字说明它是什么。
5在讨论区告诉大家你已经搭好了，以及最让你困惑的是什么。