Figma-UI设计和原型设计工具 - 图1

Figma迅速成为流行应用程序（例如Sketch和Adobe Experience Design（XD））的绝佳替代品

Figma 是一个 基于浏览器 的协作式 UI 设计工具，从推出至今越来越受到 UI 设计师的青睐，也有很多的设计团队投入了Figma 的怀抱

这有两个原因：

  • 个人免费（对于团队来说便宜）
  • 它是基于网络的。
  • 它提供了可下载的本机桌面应用程序（它使用Electron来实现）
  • 它提供UI和原型 设计，而不仅仅是设计。
  • 它具有强大的矢量功能。

单击顶部工具栏左上角的小+图标，以创建一个新项目。以后将在其中花费大部分时间

image.png

界面

image.png

  1. 任务栏菜单可以访问带有许多不同选项的下拉菜单，类似于本机桌面应用程序
  2. 选择工具还带有带有下拉箭头的缩放工具
  3. 可以使用切片工具，该工具可用于指定导出区域
  4. 矩形部提供了预定义的几何形状。
  5. 钢笔工具可以让您创建带有锚点的自定义形状，并且它还附带了铅笔工具
  6. 文字工具
  7. 聊天图标允许您留下特定于位置的消息，以交流想法和/或提供反馈
  8. 共享按钮使您可以与他人共享设计和原型
  9. 播放按钮使您可以使用设计和原型
  10. 眼睛图标可让您访问一些简单设置

创建画板

image.png

修改形状

创建一个矩形
创建一个矩形然后设置它的颜色。
image.png

修改形状
**
双击选中的矩形，进入编辑模式。在该模式下可以访问锚点。您可以在锚点周围移动，这将使您更加改变形状。
image.png

合并，减去，相交和排除选择

一次选择多个对象时，可以使用这些工具根据对象相互重叠的位置来操作这些对象。

  • union 选择 （合并选择）
  • subtract 选择 （减去选择）
  • intersect 选择 （相交选择）

选择两个对象相交的部分

  • exclude 选择 （排除相交选择）

会把两个对象相交的部分排除掉

image.png

编辑SVG

能够将SVG文件从您的桌面或文件夹简单地拖放到Figma内部的画布上

image.png

可以使用拖拽的方式来编辑SVG图像。方便！

文字

image.png