Figma 零基础入门教程（新手从零学会用）

文章目录

• • 一、Figma是什么
  • 二、前期准备（Mac/Windows通用）
  • 三、Figma基础界面认识
  • 四、新手必学核心工具用法
  • • [1. 选择工具 V](#1. 选择工具 V)
    • [2. 框架工具 F](#2. 框架工具 F)
    • [3. 矩形 R / 圆形 O](#3. 矩形 R / 圆形 O)
    • [4. 文字工具 T](#4. 文字工具 T)
    • [5. 钢笔工具 P](#5. 钢笔工具 P)
  • 五、新手第一步：从零做一个简单手机界面
  • 六、图层基础逻辑（看懂这个就入门一半）
  • 七、必记常用快捷键（提升效率）
  • 八、汉化版使用小技巧

一、Figma是什么

Figma是在线云端UI设计工具 ，不用复杂安装，浏览器就能用，也能装桌面客户端。

主打：APP界面、网页设计、小程序UI、产品原型、图标设计、团队多人协作，现在设计师、产品、前端必备工具。

二、前期准备（Mac/Windows通用）

1. 注册Figma账号
   官网直接用邮箱注册，支持谷歌/邮箱登录，免费版足够个人学习使用。
2. 安装客户端（推荐）
   网页版功能有限，建议装桌面汉化版FigmaEX，中文界面、自带插件、省去自己汉化折腾。
3. 浏览器建议
   登录、授权优先用 Chrome、Edge、Safari，避免小众浏览器登录跳转、打不开页面。

三、Figma基础界面认识

打开软件主要分四大块：

1. 左侧工具栏：选择、框架、矩形、文字、画笔、切片等所有绘图工具
2. 中间画布区：做设计、画界面的主工作区
3. 右侧属性面板：改颜色、大小、圆角、阴影、字体、布局排版
4. 顶部菜单栏：文件操作、图层、对齐、EX汉化设置、插件入口

四、新手必学核心工具用法

1. 选择工具 V

最常用，选中、拖动、缩放、移动所有元素，按 V 快速切换。

2. 框架工具 F

做APP、网页必备，相当于画板，先建框架再往里面放按钮、文字、图片。

预设自带：手机、平板、电脑、网页尺寸，直接选就能用。

3. 矩形 R / 圆形 O

画按钮、卡片、背景色块，支持调圆角、渐变、阴影。

4. 文字工具 T

输入标题、正文、按钮文字，右侧可改字体、字号、行高、字间距。

5. 钢笔工具 P

画不规则图形、图标、自定义形状，做原创图标必备。

五、新手第一步：从零做一个简单手机界面

1. 新建文件 → 选择手机框架
2. 用矩形画顶部导航栏，填底色
3. 文字工具输入页面标题
4. 画卡片矩形，加圆角和阴影
5. 卡片内加文字、小图标占位
6. 右侧调整对齐、间距、颜色
   全程拖拖拽拽，不用复杂命令，新手10分钟就能做出完整UI页面。

六、图层基础逻辑（看懂这个就入门一半）

1. 所有图形、文字、图片都是图层
2. 上层会盖住下层
3. 选中图层可以编组 Ctrl+G，方便整体移动
4. 双击可进入组内单独修改元素

七、必记常用快捷键（提升效率）

• V：选择工具
• F：框架画板
• R：矩形
• T：文字
• Ctrl+Z：撤销
• Ctrl+Shift+Z：重做
• Ctrl+G：编组
• Alt+拖动：快速复制元素

八、汉化版使用小技巧

1. 用FigmaEX汉化版，全程中文菜单，新手无压力
2. 顶部EX菜单可一键切换中文/英文
3. 自带插件侧边栏，免安装直接用组件库、图标库
4. 遇到界面空白：退出账号重新登录即可恢复

汉化教程参考：https://blog.csdn.net/2501_93482674/article/details/161091676?spm=1011.2415.3001.10575&sharefrom=mp_manage_link