/figma-learn

figma-learn

Figma 简单使用 - 基于浏览器的设计软件

(1) 文件类型：

  • New Design file 设计文件
  • FigJam file 绘画架构图

(2) 工具栏：

  • 箭头工具
  • Frame画框工具 - 画布（可以在上面绘画东西）
  • 绘画几何图形工具
  • 钢笔工具
  • 文字工具
  • 移动工具
  • comment（评论）

(3) 预设尺寸

  • Frame 有多个预设尺寸，Phone，Tablet，Desktop等

(4) 快捷键

  • 空白键： 游标变成手板，可以拖动整个工作区域
  • Ctrl+鼠标滚动：放大缩小

(5) Inspect

  • 预览 CSS code

(6)自动填充宽度（自动适应 Frame 宽度）

  • Design -> 左右 Constraints 改为 Left and right

(7) 加渐变颜色

  • Design -> Fill 点击+号 -> 默认是 Solid，改为 Linear（加上由白色渐变到全透明白色的图层）

(8)Auto layout（自动布局) CSS flexbox

(9) 组件的 Variants

  • 组件分身（Assets直接拖拉）：改变组件颜色和大小，会影响所有组件。（可重用原则）

  • 组件Variants：可以给一个组件，定义多个不同状态下的样式 （Design - Properties - Variant）

figma 插件开发

  • 大多数 Plugin API 都可以通过 figma 这个全局对象使用。

  • 某些 Plugin API 只在特定文件类型才生效。如 createShapeWithText 只在 FigJam 文件中才可用。