打开软件界面，Figma会提示你建立集体与计划。此刻，随便在哪个地方（点选列表或CMD + N）就能立刻生成一个新文档。

主界面

与某些工具不同，Figma的文档不保存在个人电脑里，而是放在网络上，用户能随时随地在浏览器里查看所有项目。

1.2 导入草图文件

Figma能够迅速且精确地接收草图的文档，只要把文件移动到Figma的工作区域，便可以开始后续的工作。

将文件拖放到屏幕上

不足之处在于，单个元素不能通过复制粘贴操作在Figma中使用，拖拽操作会使其变成图片格式，但如果将单个元素另存为SVG文件，则可以单独复制该元素！

最好先安装Figma软件，然后才能导入，因为在网页上不能显示本机字体，还可能使文件错乱。

02 用Figma设计

2.1 建立新画板

和中间步骤相同，通过按A键或F键，可以在右侧的属性区域浏览所有画板类型，挑选需要的规格，或者先随便创建一个。采用1倍视图（即实际像素比例）进行设计，因为Figma里调整尺寸不会降低图像清晰度，最终导出时再设定精确的尺寸参数。

按“ F”设置新框架

这种画板跟常规的画板不一样，它们能够互相套入，这样以后设计更复杂的交互界面时就会更加方便。

2.2 栅格和布局

手机应用，能够借助规范的八点矩阵；网络平台，构建排版矩阵十分关键，因此构思时，应先搭建十二列基准矩阵。依我个人倾向，定制化CSS矩阵更为高效方便，务必在设计阶段与技术开发者达成共识。在右侧的矩阵参数面板里，可以修改列与行的规格，以及是否锁定，同时按实际需求设定间距。

创建栅格、列和行

Figma里关闭网格和行列的好处是，能够创建多个网格并保存为模板。这个功能特别实用，既方便页面适配不同屏幕，又可和同事们共用，或者在别的方案里轻松调用。

提示：使用Ctrl + G切换可见性。

2.3 图层和组

与一样，在屏幕的左侧找到图层面板。

左侧的图层面板

新增的每一个物件都会自行生成一个画层数据，可以借助拖曳动作调整各层级的上下顺序，这样能够改变它们之间的叠放关系。

组织图层，务必将图层进行归类，方法是选中图层后使用cmd加G键操作，这样做能让文件显得条理清晰。同时，这种方法也方便在多个帧之间迅速移动和复制内容。在分组内选取特定元素时，可以按住cmd键，再点击目标对象。

页面在涉及设计的不同部分或区域时，我一般会另设独立页面，该页面主要用于构思讨论，绘制框架，以及设计最终版本的交互方式，

资源→组件保存在此处，库按钮也位于此；

在Figma中，框架能够互相包含，这样在构建整体布局和打造可交互模型时，会变得十分便捷。

2.4 矢量形状

Figma使用一种称为 的方法，用来创建复杂的形状。

用Figma创建形状

从上方导航栏中进行选取，或者按下R键来生成矩形，按L键来画出直线，按O键来创建椭圆。若需维持形态比例，请同时按住Shift键，每个生成的图形都会独立形成一个新的图层。若要绘制更为复杂的图形，可以按下P键，或者从上方导航栏中找到钢笔工具。绘制结束后，按下Enter键即可自动完成路径闭合，在创作期间，随时可通过右侧的参数面板来调整各项参数，并对矢量图形进行操控。

矢量图像能够随意放大或缩小，并且导出的文件体积很小。这种图像由基本形状构成，非常适合制作按钮，图标，徽标以及各类简单图形。

2.5 图片

在Figma软件里，图片必须放在形状覆盖物里面。要调整图片的形状，需要先打开图片的详细设置，然后在右侧的参数面板上找到并选择“填充”这个选项。

Figma中的图像

下拉菜单中的选项：

填充→进行图像填充；

适合→当我们调整大小时，图像将不会被裁剪或隐藏；

切割，需要调整图像的形状和大小，并挑选合适的部分，这种做法不会造成图像信息的损失，仅仅是将其隐藏起来，与之前的方法不同。

平铺→根据需要重复原始图像，可调整平铺的大小。

Figma能够修改色调和纯度等参数，反复调整却不会影响初始图形特征。

操作图形时填充图像，需先选定图形，接着进入填充选项，在下拉选项中挑选图像，否则只能使用纯色填充注意版权问题，推荐使用高分辨率图片，同时Figma插件也很有用

2.6 版式

Figma自带了多种字体，若希望采用个人电脑上的字型，就必须安装Font软件或Figma的桌面版，同时要确认所有能打开这份文件的人也都安装了这一款字型。按下T键可以调出文字编辑界面，或者直接点击并输入文字，然后在右侧的参数面板里调整文字的各种特征。

Figma中的文字

这段文字的表述方式需要转换成不同的说法，同时确保意思不变，可以将其拆分成几个部分，每部分之间用逗号隔开，并且调整句式结构，选用不同的词汇来表达相同的内容，专有名词保持不变，句末标点也要保留。

03 样式

具备可复制粘贴的性质，因而能够即时刷新大型文档，并且有助于设定色彩方案，文字格式，布局排列及视觉元素（比如立体感）。

要查看全部应用过的模板，请点击画板左侧的深色区域，相关设置会出现在右侧的详情列表里。

3.1 创建颜色样式

Figma里的色彩与渐变效果十分出色，选定一种方案便可在字样、底色及边框上反复应用。设计期间，用户随时能够通过鼠标右键操作来调整或移除该方案。

创建和使用颜色样式：

创建形状：

将填充更改为所需的颜色值；

单击包含颜色样式的正方形符号；

单击“ +”添加。

在为颜色取名时，应当明确其具体功能，而非仅仅依据颜色本身。比如，应该称作“强调用色”，而不是“红色”。

3.2 创建文字样式

与某些软件不同，Figma里的文本格式仅记录字体族别、尺寸、行距及字符间距。这种方式能让样式集合显得整洁且精炼。

设置文本样式与颜色样式几乎相同：

单击您想要制作样式的文字：

在右侧的属性菜单上，单击样式正方形图标；

单击+并为样式命名；

给已有文字应用格式，先点中文字，再往右边的选项卡里，从样式区域挑选想要的格式；

添加样式后，还可以通过同一菜单更改属性或分离样式。

这个设计方案的构思非常独特，它融合了多种艺术元素，展现出一种新颖的审美风格，这种风格既现代又带有古典韵味，让人耳目一新，具有很强的视觉冲击力。

3.3 更多款式

Figma的功能更加丰富，网格能够储存、传播并再次利用为样式元素。不仅如此，还存在效果样式，诸如投影、内嵌阴影、图层虚化以及背景虚化等。

04 组件

组件属于界面构成部分，能够反复应用于设计文档。组件有助于维持设计上的一致性，亦可进行更新与调整，从而有效节省大量工作。

4.1 创建可再用组件

确定目标，接着点击界面上方或使用快捷键cmd + alt + K来生成构造项。在图层区域，出现深紫色构造标记，表明一个核心构造已建立完成。

主组件和实例

生成该模块的另一个完全一致的版本，称作原版仿制。该模块任何地方的改动，都会同步影响到所有对应的版本。在左侧的图层区域，选择资源面板里的所有部件，把它们移动到设计画布上。

长远角度考虑，需要让Figma中的模块与前端模块（比如那些组件）保持一致，最好和技术部门商讨决定。

4.2 交换和嵌套

组件能够包含在主组件之中，这表示可以在一个组件里面，放置好几个组件。要更换嵌套的组件，可以借助右侧的实例切换选项，或者按住cmd加alt键，将其从团队素材集合里拖出来。

4.3 覆盖

范例在尺寸和整体排布上一直依照主体构造，不过能够调整范例的设定，诸如 ，文字和。若要恢复到初始形态，需留意右侧设定栏内的撤销按钮。能够通过鼠标右键来实现分离。

4.5 命名组件

同样，采用“/”来标识构成部分，比如，要把“ share-icon”转变为icon / share。Figma会随即生成一个叫作icon的上级分类。

确保正确命名您的组件

临时补充一下，假如您在好几个页面上都设有主要构成部分，那么这些部分会依据页面来划分归类。

要想构件排列整齐，需要为每个构件单独建立结构，比如设立“按钮”区域或者“表单”板块。

05 自动版面

动态框架能够根据内容变化自动调整大小，这种布局方式极大提升了效率，不仅减少了手动调整的耗时，还能通过单次操作快速验证设计的准确性。

5.1 将图层改为自动版面

输入内容；

按下Shift加A键会围绕文本层自动生成一个带自动布局的新框架，这个框架会同时添加垂直和水平方向的空间填充。您可以在右侧的自动布局设置面板里修改这些填充数值。

更改内容会看到按钮自动调整大小。

5.2 嵌套自动布局

构建复合布局系统，融合横向与纵向排列方式，达成视觉上突出的界面呈现效果。

挑选目标，按下shift加A键，自动排布的框架会变成父框架中的子框架。

在右侧的属性选项里挑选垂直排列或者水平排列，以免文本框架朝单一方向扩展，务必确认设定为固定值或者高度。

提示：仅移动图层即可在父帧中交换子帧的位置；

注意：任何自动版面都可以另存为组件。

06 Figma中的原型

Figma能够满足您在网页和软件界面设计方面的原型制作需求，无需借助其他辅助工具。

6.1 建立原型

确定一个结构，接着在右边的参数列表里点一下“模型”。点“模型配置”，然后挑选需要规划的器具。往右上方点那个播放标志可以检视规划，还能把Figma在器具上直接下载来实时察看。

原型菜单

6.2 连接画面

右侧的“原型”菜单里，选中某个元素后，它的周边会显现出蓝色小圆圈。接着，用鼠标点击并保持住这个圆圈，然后进行拖拽，就能看到代表连接的图标。同时，在右侧的属性面板上，需要挑选出相应的动作类型，比如滑动、单击或是鼠标悬停，并且还要设定动画的种类，诸如移入、推入、滑出之类的效果。

6.3 滚动形式

Figma在支持垂直滑动的同时，也具备多种高度仿真的页面翻动模式。

横向滑动，需要将全部项目进行归类，先画出一个符合尺寸的轮廓，然后把它放到里面，让滑动不显眼，接着在下拉选项里，选定水平滑动。

如同画布般移动，接着设定一个区域并插入视觉元素，然后针对滑动模式，挑选左右移动或上下移动的选项。

固定元素，想让标题或按钮始终显示，请确认已勾选“固定位置”，这个选项位于右侧属性菜单里的“设计”>“约束”中

6.4 智能动画

智能动画能够找到对应的图层，通过识别不同之处sketch outlines，为范例里各帧之间的图层加上动态效果，这样就能制作出效果出色的范例。

07 与他人共享和合作

7.1 演示模式

点击界面右上角的播放标记，将在新开启的窗口里展示手机端设计稿，允许你进行评论操作，也能够将展示的连接地址分享出去。

演示模式

7.2 创建团队和项目

团队在Figma平台能够和他人共同完成工作，可以邀请成员加入，可以创建项目，还可以将它们保存在资料库中。

组建集体，只需在Figma总览里点选“组建集体”选项，再依照指引开展即可。升级账户能解锁更多高级特性。

Figma中的团队，项目和文件

团队→一组人员，例如设计师，开发人员，撰稿人等；

项目→将相关文件放在一起；

文件→单个设计文件。

注意：您可以随时在项目和团队之间移动文件。

7.3 共享库

合作进行时，务必要让全部部分即时同步，并且保存位置得让组内每个人都能查到，Figma共享库正适合这个场景。

设计系统是当下用户体验和界面设计的关键构成sketch outlines，有必要投入时间掌握其基本理念和各类实践方式。

创建共享库：

在左边的菜单中，进入并单击book图标；

点击发布；

命名发布，同时保存一份副本；

在团队中打开一个新文件；

进入选项卡，单击库图标并激活刚创建的共享库。

更新共享库：

更改设计要素或整体外观后，Figma会提醒同步团队资源库。更新完成，其余组员都会接到通知，大家能够同步浏览。

共享库功能十分突出，能够有力辅助设计环节。实际工作中运用共享库，能提供大量可供借鉴的资源。

7.4 与其他设计师和开发人员共享

顶部的那个蓝色选项能够用来发出邀请，也可以手动键入电子邮箱，或者复制一段信息。

发送给创作者和文案作者→调整为可修改状态，共享方可使用全部操作选项。您会察觉到其他成员，在同一个文档里即时共同完成创作！

编辑模式

研发人员需切换至研发状态，以便技术专家能够查看全部技术参数，包括调整界面样式，优化移动端表现，以及查阅源代码文件。同时，他们能够获取并利用设计原型进行后续工作。

查看模式

若需在编辑文档期间与技术人员协作，建议另开一个页面，这样可以防止产生误解。

7.5 资源导出

依照前面所说的，在Figma这个平台上，即便只被分配了“浏览”类的访问资格，使用者依然能够从那些被公开的文档里，把里面所有的素材，不管它们是什么尺寸，都直接取出来，所以，担当设计职责的人员，就不必再手动去导出任何东西了。不过，要是您想要确保，在任何状况下都能达成这样的效果：

在Figma导出资源

选择对象；

单击右侧属性菜单上的导出。

请注意：务必采用“ / ”作为命名方式，例如image / home / ，icon / ，这样能够确保导出的文件被自动归类到对应的文件夹中。

备忘单，什么时候导出什么：

矢量文件用来制作徽标和图标，比如SVG格式，这种格式不会因尺寸放大而损失画面清晰度。

这种格式适合存放所有实心方块的视觉材料，包括静态图片，务必标明原始尺寸，同时也要附带两倍像素密度的版本。

当图形带有无色底板时输出，必须同时生成基础尺寸与放大版本，且放大版本至少包含两倍分辨率。

1x代表真实尺寸，2x的尺寸是其两倍，视网膜屏幕需要2x的分辨率才能显示清楚，编码时，带有@2x，@3x等后缀的2x，3x会被技术处理

设置图片的宽度和高度，比如300w代表图像宽度是300像素。

输出为PDF格式，需要将全部页面导出，比如准备邮寄或者插入到演示文稿里获取高清图片，就应该选用PDF选项

如有侵权请联系删除！