翻译说明：本文为 MobileSetting 原文 的繁体中文转简体中文翻译。除繁简转换、明显错别字和排版外，保留原文标题、事实、观点、数字、结构和第一人称表达。
Figma 免费 Starter 版支援无限草稿文件同最多 3 个 Figma Design 项目，已足够学习 UI 设计，Pro 版 $15 USD/月适合需要版本历史同无限项目嘅专业设计师。
对于想入门 UI/UX 设计嘅香港人嚟讲，Figma 系目前最多设计师用嘅工具，免费版已经够用。唔需要安装任何软件，浏览器打开就用得，协作功能仲系业界顶级。本文带你由零开始，逐步学识 Figma 免费版嘅所有核心功能。
Figma 系咩？点解设计师都用它？
Figma 系一个基于浏览器嘅向量设计工具，2016 年推出，依家系全球最多 UI/UX 设计师使用嘅设计软件。相比旧式嘅 Sketch（Mac Only）或 Adobe XD（已停止开发），Figma 嘅最大优势系：
跨平台：Windows、Mac、Linux、甚至 Chromebook 都用得，只要有浏览器就够。香港好多公司用 Windows，Figma 完全冇问题。
即时协作：多人同时喺同一个档案度工作，改动即时显示，完全唔使 email 来回传送档案。设计师同开发者可以直接睇同一个 Figma 连结，开发者仲可以直接 inspect 每个元素嘅 CSS 值。
Components 系统：建立可重用嘅设计元件，一改全改，大大提升工作效率。
免费版已经好够用：对于学习同个人项目，Figma Starter 版完全唔需要俾钱。
2022 年 Adobe 曾试图以 200 亿美元收购 Figma，但最终因反垄断监管问题放弃，Figma 保持独立，依家系 B2B 设计工具市场嘅龙头。
免费版功能同限制（准确清单）
2026 年 Figma Starter 版包含：
免费包含：
- 无限草稿文件（Drafts）
- 最多 3 个 Figma Design 项目
- 每个项目最多 3 个共同编辑者
- 无限 FigJam 文件（白板工具）
- 基本 Prototype 功能
- 社区资源同插件使用
免费版限制：
- 版本历史只保留 30 天（Pro 版无限）
- 每个项目最多 3 个协作者
- 最多 3 个 Design 项目（Drafts 唔计）
- 唔支援 Team Library 跨项目共享 Components
Pro 版 $15 USD/月提供：
- 无限项目同协作者
- 无限版本历史
- Team Library（跨项目 Components 共享）
- 进阶 Prototype 功能
对于初学者同自由职业者，免费版完全够用。只有当你喺公司做多人协作设计，或者需要保留旧版本记录，先需要升 Pro。
基本操作教学（Frame、Shape、Text、Auto Layout）
建立帐号后，进入 Figma 介面，左上角系工具列，以下系最常用嘅操作：
Frame（F 键）：Figma 用 Frame 代替普通设计工具嘅 Artboard。按 F 键后，右侧面板可以选择预设装置尺寸，例如 iPhone 16（390×844px）或 Desktop（1440×1024px）。Frame 可以嵌套，系 Figma 最重要嘅概念。
Shape 工具：Rectangle（R）、Ellipse（O）、Line（L）系最基本嘅形状工具。选中形状后，右侧 Fill 面板可改颜色，Stroke 加边框，Corner Radius 加圆角。
Text（T 键）：按 T 键后点击画布，输入文字。右侧面板可设定字体、大小、行距、字距、对齐方式。香港设计师常用 Noto Sans TC 或 Inter 字体。
Auto Layout（Shift+A）：呢个系 Figma 最强大嘅功能之一。选中几个元素，按 Shift+A，就会自动建立 Auto Layout 容器，类似 CSS Flexbox。设定好 Direction、Spacing、Padding 后，入面嘅元素会自动排列，增减元素时唔会变形。
建议由 Frame + Rectangle + Text + Auto Layout 呢四样开始练习，做个简单嘅 Button Component。
Components 同 Styles 使用技巧
Components 系 Figma 嘅核心，掌握咗就能大幅提升效率：
建立 Component：选中任何元素或群组，右键选「Create Component」（或 Ctrl+Alt+K）。Component 会变成紫色图标，代表系「主 Component」。
Instance（复制使用）：将主 Component 拖拉到画布其他位置，就会建立 Instance（副本）。修改主 Component，所有 Instance 同步更新。但喺 Instance 上做嘅覆盖修改，更新主 Component 时唔会被覆盖。
Variants：一个 Component 可以有多个状态，例如 Button 有「Default」「Hover」「Disabled」三个 Variant。使用时可以喺右侧面板直接切换状态，方便做 Prototype。
Color Styles：喺右侧面板，点击「+」建立 Color Style，例如 Primary Blue、Text Dark 等。建立后，所有用呢个颜色嘅元素都会连结到 Style。改 Style 颜色，全部同步更新，系建立设计系统嘅基础。
Text Styles：同样原理，建立 Heading 1、Body Text 等 Text Style，统一全站字体规格。
Prototype 同 Share 功能
Figma 嘅 Prototype 功能可以直接喺设计工具里做出可点击嘅 Demo，唔需要 InVision 或其他工具：
建立互动：切换到右上角「Prototype」页签。选中一个元素（例如 Button），会出现蓝色箭头图标，拖拉到目标 Frame，设定触发方式（On Click）同动画效果（Smart Animate 最好用，会自动补间动画）。
Smart Animate：只要两个 Frame 入面有相同名称嘅元素，Smart Animate 就会自动制作流畅嘅过渡动画，效果好似 iOS 原生 App 咁。
Preview 测试：按右上角▶键，可以喺浏览器度直接测试 Prototype，或者用 Figma Mirror App 喺手机上预览。
分享连结：按右上角「Share」，可以建立查看连结、编辑连结或 Prototype 连结。将 Prototype 连结传给客户或开发者，唔需要对方有 Figma 帐号都可以直接睇。
Inspect 功能：开发者打开 Figma 连结后，选任何元素，右侧会自动显示 CSS、iOS 或 Android 对应嘅代码同尺寸数值，大大减少设计师同开发者之间嘅沟通成本。
对于香港初学者，建议由临摹一个现有 App 界面开始，例如 MTR App 或 OpenRice，练习用 Frame、Auto Layout、Components 重建出嚟，系最有效嘅学习方式。
常见问题
Figma 支唔支援广东话字体输入？
支援。Figma 用浏览器渲染文字，香港用家可以直接输入中文繁体，字体选择 Noto Sans TC 或本地已安装嘅中文字体，显示完全正常。
免费版可唔可以同其他人协作？
可以，免费版每个项目最多 3 个共同编辑者。如果只系想分享俾人睇（唔系编辑），分享 View Only 连结系无限制嘅。
Figma 同 Figma for Education 有咩分别？
Figma for Education 系免费嘅 Pro 功能，适用于教育机构嘅师生。香港大学生可以用学校电邮申请，有机会获得完整 Pro 版功能，包括无限项目同版本历史。
喺 Figma 设计完，点样交俾开发者？
最直接系分享 Figma 连结，开发者可以用 Inspect 模式直接睇 CSS 同尺寸，唔使 export 或转格式。如果需要 export 图片，选中元素后喺右侧「Export」面板设定格式同倍数。
Figma 有无手机 App？
有 Figma Mirror App（iOS/Android），主要用嚟预览 Prototype 喺真实装置上嘅效果，但唔系完整编辑器。正式编辑仍需要在浏览器或桌面 App 进行。
