Hal Lee

05月21日发布

我做的 Figma 系列教程

系列教程
基础操作

https://www.bilibili.com/video/BV1yK411c712

Figma 更新频繁,虽然 Youtube 上有实时更新的教程,但国内没有特别好的系列教程。前段时间我开始录制一个 Figma 系列教程,争取每一个都在 5 分钟左右讲完,每一节除了基本功能介绍还会附带一些小技巧,欢迎观赏。

1. 认识一下 Figma

主要内容:

  • Figma 账号注册
  • 团队、项目和文件
  • 客户端下载
  • 如何使用本地字体

https://www.bilibili.com/video/BV1yK411c712?p=1

2. 编辑器简介

主要内容:

  • 导航栏介绍
  • 主菜单和快速搜索(Quick actions)
  • 左侧面板和右侧面板
  • 画布缩放
  • 标尺和参考线
  • 快捷键指南和彩蛋

https://www.bilibili.com/video/BV1yK411c712?p=2

3. Frame 是什么?

主要内容:

  • Frame 和 Group 的区别
  • Frame 和 Group 的互相转换
  • Frame 层级
  • 不同层级元素的快捷选中
  • 快速定位元素
  • 设置文件封面

https://www.bilibili.com/video/BV1yK411c712?p=3

4. 形状工具

主要内容:

  • 矩形、圆、多边形和星形(五角星)
  • 形状的操控柄(快捷绘制环形、多边形等)
  • 拖拽调节数值
  • 直线和箭头
  • 形状合并打平(Flatten)
  • 描边转填充(Outline stroke)

https://www.bilibili.com/video/BV1yK411c712?p=4

5. 钢笔和矢量编辑

主要内容:

  • 矢量网格
  • 矢量路径的复制和剪切
  • 链接锚点
  • 填充颜色
  • 弯曲锚点(贝塞尔曲线)

https://www.bilibili.com/video/BV1yK411c712?p=5

6. 填充颜色和描边

主要内容:

  • 填充颜色
  • 渐变
  • 混合模式
  • 颜色的复制、剪切和粘贴
  • 填充和描边互换

https://www.bilibili.com/video/BV1yK411c712?p=6

7. 投影和模糊效果

主要内容:

  • 外投影和内投影
  • Spread
  • 投影的复制、剪切和粘贴
  • 图层模糊
  • 背景模糊

https://www.bilibili.com/video/BV1yK411c712?p=7

8. 文字图层

主要内容:

  • 基本属性
  • 文字列表
  • 可变字体属性
  • 文字链接
  • 文字转曲

https://www.bilibili.com/video/BV1yK411c712?p=8

9. 共享样式

主要内容:

  • 创建共享样式
  • 发布共享样式
  • 在其他文件使用
  • 样式的分类排序

https://www.bilibili.com/video/BV1yK411c712?p=9

10. 栅格布局

主要内容:

  • 网格
  • 行与列
  • 内边距参考
  • 复制粘贴排序
  • 加入共享样式
  • 隐藏栅格

https://www.bilibili.com/video/BV1yK411c712?p=10