Figma软件 v93.4.0官方版

Figma中文破解版是一款非常优秀且简单的原型设计工具，它是基于浏览器的协作式UI设计软件，可以跨平台使用，支持多种内核的浏览器。内置了丰富的编辑工具，包括画布、图层、矢量和形状、图片、文本、图层样式、原型等等，可以满足设计师UI设计、原型设计、标注设计、前端协作、云端同步的设计要求，相比于Sketch软件，Figma使用更简单，并且能够直接导入sketch文件进行在编辑。新版本的Figma对UI的整体外观、图层面板、属性面板等参数进行了修改，功能方面没有做更新。本站提供了破解版的Figma软件，大家下载后便可以无限制使用，需要的小伙伴快来本站下载吧。

Figma基本功能

【UI 设计】

Figma 是为 UI 设计而生的设计工具，除了有和 Sketch 一样基本的操作和功能，还有许多专为 UI 设计而生的强大功能。

【原型设计】

你可以在 Figma 里面无缝完成从设计到原型演示的切换，不需要反复同步设计图到第三方平台，我们同样可以利用 Figma Mirror 在手机上预览效果。

【前端协作】

工程师可以在设计图上量取位置、并且可以导出所需任何资源(包括 CSS、iOS、Android 样式)

【实时协作 + 内置评论】

在 Figma 里，设计和协作可以是同时进行的，任何人都可以在设计图的任何地方添加评论， 你可以在评论中@其他人或将评论标记为已解决。

【矢量网络(Vector Network)】

同一个锚点连接多个锚点，自动填充闭合区间，直接拖动锚点间的线条

【团队 Library】

我们可以跨项目共享和更新 Component、Style，需要注意的是免费版不能跨文件共享 Component。

【Web Font & Font Icon】

Figma 原生支持 Google fonts 和 FontAwesome。

【已经推出的 Web API 和即将推出的 Write API】

可以快速轻松地对内部公司工作流程进行脚本改进，或将 Figma 与其他工具集成

【Uber 和 GitHub 如何使用 Figma API】

Uber 员工通过 Figma的 API 查看反馈到电视上的实时设计文件

GitHub Octicon 在 Figma 和 Github 仓库中，未来可以通过 Write API 可以做到双向同步

Figma工具介绍

工具栏

工具栏包含你在Figma中设计时可能使用的各种工具和功能。工具栏中显示的内容取决于你在画布上选择的内容。

画布

Figma 中的画布是所有框架、组和图层所在的背景，它在 X、Y 轴的上限为 -65,000 到 +65,000。

默认情况显示矢量预览，但你可以以 1x 和 2x 分辨率打开像素预览，以便精确编辑。

图层面板

当你在编辑器中时，你会看到画布两侧的侧边栏，这些侧边栏与工具栏一起构成了 Figma UI。

属性面板

当你在编辑器中时，你会看到画布两侧的侧边栏，这些侧边栏与工具栏一起构成了 Figma UI。

视图设置

您可以在 视图设置(View Settings) 菜单中自定义编辑器的视图设置。你可以通过单击编辑器右上角的“缩放”下拉列表来找到它：

像素预览

你可以使用快捷键 CTRL + P，然后选择画布并找到右侧面板的“Pixel Preview”，或单击工具栏中的“眼睛”图标并选择 Pixel Preview 来启用“像素预览”模式。

距离测量

你可以使用以下步骤测量画布上对象之间的距离(以像素为单位)：

参考线

要使用参考线，首先需要在画布上启用标尺。 你可以使用 Shift + R 键盘快捷键，或单击编辑器左上角的菜单图标并搜索 “Rulers”。

Figma快捷键

【文件和属性】

导出(Export)⌘ + ⇧ + E

保存(Save)⌘ + S

置入图片(Place)⌘ + ⇧ + K

拾色器(Color Picker)^ + C 或 I

进入图片编辑模式(Enter Image Crop Mode)⌥ + 双击

【视图】

平移(Pan)空格 + 拖拽

放大(Zoom In)+

缩小(Zoom Out)–

缩放至适合屏幕(Zoom to Fit)^ + 1

缩放至适合选择元素(Zoom to Selection)^ + 2

缩放到 100%(Zoom 100%)^ + 0

重命名图层(Rename Layer)⌘ + R

显示标尺(Show Rulers)⇧ + R

像素预览(Pixel Preview)⌃ + P

显示网格布局(Show Layout Grids)⌃ + G

显示图层面板(Show Layers Panel)⌘ + ⇧ + \

显示 UI 界面(Show Figma UI)⌘ + \

显示像素网格(Show Pixel Grid)⌘ + '

线框模式(Outline Mode)⌘ + Y 或 ⌃ + ⇧ + 3

【矢量】

移动工具(Move Tool)V

钢笔工具(Pen Tool)P

油漆桶(Paint Bucket)B

弯曲工具(Bend Tool)⌘ + DRAG

连接选择点(Join Selection)⌘ + J

复制(Duplicate)⌥ + DRAG

退出矢量模式(Exit Vector Edit Mode)ESC or RETURN

【文本】

文本工具(Type Tool)T

下划线(Toggle Underline)⌘ + U

斜体(Toggle Italic)⌘ + I

加粗(Toggle Bold)⌘ + B

【元素】

移动工具(Move Tool)V

钢笔工具(Pen Tool)P

形状工具(Rectangle Tool)R

椭圆工具(Ellipse Tool)O

线条工具(Line Tool)L

框架工具(Frame Tool)A or F

缩放工具(Slice Tool)S

复制(Copy)⌘ + C

剪贴(Cut)⌘ + X

粘贴(Paste)⌘ + V

重复/复制(Duplicate)⌘ + D or ⌥ + DRAG

成组(Group Selection)⌘ + G

取消成组(Ungroup Selection)⌘ + ⇧ + G

显示/隐藏图层(Toggle Visibility)⌘ + ⇧ + H

锁定/取消锁定图层(Toggle Lock)⌘ + ⇧ + L

扩展(Flatten Selection)⌘ + E

扩展描边(Outline Stroke)⌘ + ⇧ + O

蒙版(Toggle Mask)⌥ + ⌘ + M

Figma使用技巧

一、Figma的图层效果使用说明

图层效果

你可以在效果列表中添加或删除图层效果。Figma 可以渲染每种阴影类型最多 8 个，每个模糊类型 1 个。请记住，这些效果所使用的模糊可能导致性能不佳，背景模糊通常是最耗性能的图层效果。

1、投影：

阴影可以设置偏移量，模糊大小、颜色和混合模式。

投影也可以应用于整个组下的组和层，而不是每个单独的形状。

2内阴影：

形状的内部阴影。

像投影一样，内阴影可以应用于组。

3、图层模糊：

这会模糊任何给定图层的形状。

大量像素的模糊可能会导致性能问题。

4、背景模糊：

这会模糊图层边界下所有图层。

大量像素的模糊可能会导致性能问题。

要使用背景模糊，请确保填充不透明度设置为远低于 100%。不透明度可以设置为低至 1%，以使用背景模糊。

5、图层效果渲染顺序

在 Figma 中，图层效果适用于图层和组。使用组模糊和阴影可以提高性能，但请记住下表中的堆叠顺序差异。

在重叠层上，组和层阴影的差异最明显。当形状不重叠时，外观通常应该是相同的。

6、图层：

图层模糊(顶部)

描边

内阴影

填充

投影

背景模糊(底部)

7、组：

图层模糊(顶部)

内阴影(组的子元素)：

适用于所有子元素

填充、描边、蒙版和图层效果

渲染背景填充(如果启用和或加入到导出)

投影(子元素和背景填充)

背景模糊(底部)

二、使用Figma创建样式

样式功能允许你定义对象的一组属性，使得可以在团队的设计中重复使用。

你可以使用样式来定义颜色，文本和应用于对象的图层效果，或者布局网格的结构和外观。

每当你更改样式的属性时，例如将文本颜色从红色更新为蓝色，使用该样式的任何对象都将立即更新。

与组件一样，可以通过将样式发布到团队库来共享样式，这使你可以轻松地在团队项目中建立和维护一致的样式。

创建样式

你可以从现有对象创建样式，这将允许你将某些应用于对象的属性保存为样式，以便可以在其他对象上重复使用它。

1. 颜色样式

颜色样式可应用于设计中的填充，描边和文本，你也可以为渐变创建颜色样式。

选择你要为其创建样式的对象。

在“属性”面板中，单击要保存的属性旁边的样式图标(四个点)。 (对于颜色样式，这可以是填充或描边属性。)

单击 Color Styles 菜单中的 “+” 图标以创建样式：

系统会提示你为样式指定名称

单击 Create Style 按钮以保存样式。

提示

我们建议根据你在设计中使用样式的方式命名样式，而不是仅使用颜色作为名称。

为了更容易地查找和选择样式，你还可以通过使用斜杠命名约定命名它们来将样式组织到组中。在样式菜单中，你将看到通过团队库共享的本地样式和任何样式。样式将按团队名称的字母顺序排序，然后按文件名称排序。

例如：要将所有文本颜色样式组合在一起，你可以将它们命名为 Text/Purple, Text/Green, Text/Blue 等。然后，Figma 将在 “Text” 标题下一起显示这些颜色样式。

渐变样式

可以将渐变填充和图像填充添加为样式。

为渐变创建样式时，使用的颜色和渐变方向或角度都将保存到样式：

#2. 文字样式

样式也可以应用于文本，当你想为不同的文本块设置不同的属性时，这非常有用。

你可以将文本样式应用于整个文本对象，或将其应用于其中的部文字。

这非常适合定义标题的样式(例如 h1，h2，h3)和正文，以及确定如何在段落中设置不同的文本样式(例如链接)。

创建文本样式的过程遵循与颜色样式类似的过程：

选择你要为其创建样式的文本。

单击属性面板中文本标签旁边的样式图标(四个点)。

单击 Text Styles 菜单中的 “+” 图标。

设置文本样式的名称。

单击 Create Style 以完成该过程。

提示

无法使用文本样式设置文本对齐方式，你需要单独设置每个文本块的对齐方式。

#3. 图层效果

你还可以创建图层效果，如内阴影或阴影。

选择你要为其创建样式的对象。

如果尚未添加，请将需要的图层效果添加到对象中。

单击属性面板中效果标签旁边的样式图标(四个点)。

单击 Effect Styles 菜单中的 “+” 图标。

设置图层效果的名称。

单击 Create Style 以完成该过程。

提示

你可以为具有多个样式的对象创建样式，并且所有效果将包含在最终样式中。

例如：如果你有多个属性应用于对象(例如，两个投影和一个内阴影)，则所有这些属性都将保存到一个图层样式。

#4. 布局网格样式

最后，我们可以为布局网格创建样式，如果你想要跨多个设计复制特定格式或结构，这将特别有用。

在画布中创建或选择框架。

在属性面板中，将“布局网格”添加到“框架”。

更新布局网格以匹配你要保存到样式的属性。详细了解布局网格。

单击属性面板中 Layout Grid 旁边的样式图标(四个点)。

单击“+”图标。

设置布局网格样式的名称。

单击 Create Style 以完成该过程。

#与你的团队共享样式

你可以与团队共享样式，或通过将样式发布到团队库，从其他文件和项目中访问它们。