Figma入门教程

Figma入门教程插图

这个入门教程适用于任何刚接触Figma的人,Figma 是一个基于浏览器的协作式UI设计工具,从推出至今越来越受到UI设计师的青睐,如今也有很多的设计团队也投入了Figma 的怀抱。

目录

Figma入门教程插图2

基础入门 → 层次结构

  • 层次结构:概述

    在一个组织中,你可以创建无限数量的团队。团队可以有自己的项目、文件和共享组件库。 Figma入门教程插图4

  • 层次结构:团队(Team)

    您的项目团队将在Figma组织中拥有自己的Team,您可以加入该团队并为其做出贡献。 Figma入门教程插图6

  • 层次结构:项目(Project)

    项目允许团队对其文件进行分组,通常由产品范围进行区分和定义。单个项目下可以有多个独立的文件。 Figma入门教程插图8

  • 层次结构:文件(File)

    文件包含设计团队创建的所有工作——它们是已完成工作的保存文档。每个文件也可以分解为一系列页面来组织工作。 Figma入门教程插图10

  • 层次结构:页面(Page)

    在一个文件中,可以根据需要创建任意多的页面。每个页面都提供了自己的画布,您可以在其中探索和迭代您的设计。页面是结构的最后一级,您可以根据页面的用途命名页面。 Figma入门教程插图12

基础入门 → 术语

  • 术语:框架(Frame)

    框架是父对象。这意味着它可以控制或影响放置在其中的任何子对象。
    和艺术板一样,框架允许你在画布上选择一个区域来创建你的设计。 Figma入门教程插图14

  • 术语:组(Group)

    组允许您将多个元素组合在一起作为一个顶层图层。
    组的边界由其子元素决定,因此调整或移动这些元素将导致组的边界自动调整。

  • 术语:组件(Component)

    组件是可以在设计中重用的元素。它们有助于创建和管理跨项目的一致性设计。
    可以将设计的任何图层或对象创建为组件。这可以很多类东西,比如按钮、图标、布局等等。 Figma入门教程插图16

  • 术语:图层(Layer)

    图层是可以放置图像或形状的层级。添加到画布中的任何框架、组或对象都将在“图层”面板中可见。
    可以通过左侧图层面板中图层旁边的图标来确定图层是框架、组还是特定类型的对象。 Figma入门教程插图18

  • 术语:资源(Assets)

    资源是Figma文件中使用的UI元素。在“资源”面板中可以找到所有组件。“资源”面板中的组件按标题分组。

    资源示例:

    -UI工具包和设计系统组件库
    -图标集
    -模板和模型
    -用于创建流程图或图表的工作流帮助程序
    -指向外部资源集合的链接

基础入门 → 关于文件

  • 关于文件:草稿

    草稿是您拥有的与任何团队或项目分开的文件。
    像素描本或笔记本一样,草稿是一个你可以记下你的想法并尝试不同概念的地方。Figma入门教程插图20

  • 关于文件:重命名文件

    Figma将你创建的每个新文件命名为“Untitled”。
    为文件指定一个唯一的名称,可以更容易地搜索和找到正确的文件。请与您的团队联系,查看他们的文件是否有命名约定。

  • 关于文件:移动

    文件可以移动到:
    - 另一个项目
    - 不同团队中的项目
    - 进入一个新项目

    要在编辑器中移动文件,请执行以下操作:
    1. 在工具栏中选择文件名,然后选择“移动到项目…”
    2. 选择要将文件移动到的项目或团队,或在团队中创建新项目
    3. 单击“移动”确认

  • 关于文件:复制

    右键单击文件名,然后从菜单中选择“复制”。Figma将为原始文件创建一个新的副本,后缀为“copy”,这样您就可以区分原始文件和副本。
    复制的文件将与原始文件存储在同一个项目文件夹中。
    此副本不包含原始文件中的任何注释或版本历史记录。

  • 关于文件:版本历史

    Figma通过在文件的版本历史记录中添加存档点来保存您的工作。在文件中不活动30分钟后,将添加一个新的存档点。
    您可以访问可追溯到文件创建时的事件时间表。

  • 关于文件:启用组件库

    如果您有文件的编辑权限,则可以在该文件中启用组件库。这将为每个具有文件编辑权限的人启用组件库。
    在编辑器中打开资源面板,然后单击团队库图标。可以单击组件库名称以查看该组件库中的样式和组件。
    使用这些切换可以在当前文件中启用或禁用该组件库。

  • 关于文件:组件更新

    当更新完成并发布到库中时,Figma将在使用这些样式和组件的任何文件中向您发送通知。
    这包括对现有样式和组件的更改,以及任何新的添加。使用此文件的每个人都将收到相同的更新。
    如果正在忙碌其他工作可以暂时不理会通知(Dismiss),但是组件实例将过期,需要稍后进行更新。

    Figma入门教程插图22

返回目录

Figma入门教程插图24

团队协作

  • 团队协作:角色和权限

    每个团队成员都有团队权限,可以控制他们对团队文件和项目的默认访问权限。
    成员对团队文件和项目的权限继承自其团队权限。
    Figma入门教程插图26
    从左侧边栏中选择一个团队,然后转到该团队中的“Members”选项卡。
    从这里可以查看该团队成员的角色和权限。所有者或具有管理员权限的人可以更改其他团队成员的权限。

    Figma入门教程插图28

  • 团队协作:共享文件

    Figma中的每个文件和原型都有一个唯一的URL。您可以与任何人共享此链接以查看原型和文件。
    通过执行以下操作,可以共享指向文件中特定位置的链接:
    1. 选择要共享的框架
    2. 单击工具栏中的“Share”按钮
    3. “Link to selected frame”复选框
    4. 更新共享权限
    5. 复制链接并分享!
    Figma入门教程插图30

  • 团队协作:评论

    你可以使用评论来回应反馈,调整你的设计,加快迭代速度,所有这些都来自原始设计文件或原型。
    你可以点击顶部工具栏上的评论气泡,或者使用键盘上的快捷键“C”,进入评论模式。
    按“esc”键退出评论模式。
    Figma入门教程插图32

  • 团队协作:观察模式

    如果你点击一个人的头像,你将进入观察模式。
    和屏幕分享一样,观察模式在Figma中向你展示他们屏幕上发生的事情,并允许你在画布上跟踪他们的行动。
    Figma入门教程插图34

  • 团队协作:多操作者

    多操作者光标允许您查看文件中的人员在哪里工作。他们的名字将漂浮在光标旁边。
    如果愿意,可以在“视图设置”菜单中禁用多操作者光标。
    Figma入门教程插图36


返回目录

Figma入门教程插图38

键盘快捷键

  • Figma键盘快捷键:按键提示

    Figma入门教程插图40Figma有一个快捷菜单,显示所有不同类型的快捷方式,以及您以前使用过的快捷方式。
    Figma入门教程插图42

  • Figma键盘快捷键:缩放以适应

    Figma入门教程插图44在figma文件找不到画布中的框架了?使用此快捷方式放大页面并使其适合框架。
    Figma入门教程插图46

  • Figma键盘快捷键:显示/隐藏用户界面

    Figma入门教程插图48切换工具栏的可见性,在分享工作时尽量减少分心,并最大限度地提高屏幕的真实感。
    Figma入门教程插图50

  • Figma键盘快捷键:参考线

    Figma入门教程插图52当您试图在设计中精确定位图层或对象时,参考线很有用。要使用参考线,首先需要打开标尺。
    Figma入门教程插图54

  • Figma键盘快捷键:评论

    Figma入门教程插图56在Figma中发表评论,给出反馈。这可以在文件和原型中完成。
    Figma入门教程插图58

  • Figma键盘快捷键:搜索

    Figma入门教程插图60在Figma中搜索任何东西:命令、菜单或插件。
    Figma入门教程插图62

  • Figma键盘快捷键:按比例缩放

    Figma入门教程插图64要保留文本、框架、描边和组件的比例,可以使用缩放工具调整设计的大小。
    Figma入门教程插图66


返回目录

Figma入门教程插图68

组件化设计

  • 组件化设计:转换为组件

    左侧:主组件
    第一次将UI元素转换为组件时,会创建主组件,并定义组件的属性。

    右侧:实例
    该实例是主版本的副本,可在多个设计中重用。实例继承对主组件所做的所有更改。对实例所做的任何调整都不会影响主组件。

  • 组件化设计:变体(Variants)

    大多数主组件都会有变体。可以在“属性”侧栏中的不同变体状态之间切换。
    Figma入门教程插图70

    组件化设计 → 自动布局(Auto Layout)

  • 自动化布局:这是啥?

    自动布局是一种可以添加到框架和组件中的属性。它非常适合添加新的子图层、容纳更长的文本字符串,或者在设计迭代过程中保持对齐。
    让我们来看一下使用自动布局的一些方法。
    Figma入门教程插图72

  • 自动化布局:嵌套

    在本例中,我们在启用垂直自动布局的卡中嵌套一个框架。这对于向卡片布局中添加其他模块或子模块很有用。

  • 自动化布局:重新排序

    可以选择并拖动对象,以更改它们在自动布局框架中的显示顺序。这仅在主要组件或组件外部的自动布局框架上受支持。

  • 自动化布局:调整大小

    通过编辑约束和调整大小选项,可以使用“自动布局”来适应组件中的各种文本长度。如果希望组件中的文本在编写时展开,请在“Resizing(调整大小)”下选择文本并选择“Hug contents(适应内容)”。

  • 组件化设计:查找主组件

    如果要对主组件进行更改或只是想引用它。

    1. 右键单击实例
    2. 选择“Go to main component(去主组件)”
    3. 它会把你带到主组件,即使它在另一个文件中!


返回目录

Figma入门教程插图74

原型交互:如何设置文件用于原型制作

  • 原型交互:原型窗格

    Prototype选项卡(右侧工具栏)允许您访问所有原型功能。
    这允许您在设计中的框架之间建立连接。然后可以用来模拟用户实际的交互动作。

    Figma入门教程插图76

  • 原型交互:调整原型设置

    您可以通过更改原型设置来调整查看原型的方式。这些定制允许独特的观看体验。

    你可以:
    1. 选择设备、型号和方向
    2. 预览你的原型
    3. 选择背景色
    4. 为原型设定一个起始框架Figma入门教程插图78

  • 原型交互:建立交互

  • 1.选择连接的交互点
    2.这可以是整个框架,也可以是框架内的组件
    3.选择交互点后单击+图标以创建连接
    4.将其拖动到要导向的框架/组件

  • 原型交互:创建交互动作/动画

  • 创建连接后,将出现“Interaction details(交互详情)”菜单。从这里,您可以:
    1. 设置交互细节
    2. 应用动画
    3. 预览动画
    Figma入门教程插图80

    原型交互:演示你的演示视图中的设计

  • 原型交互:演示交互设计

    使用演示视图预览静态设计,或与您创建的原型连接交互。您的设计必须位于框架内,才能在演示视图中预览。
    单击工具栏中的播放图标以访问演示视图。
    如果有原型连接,Figma将只显示那些有连接的框架。点击每个屏幕或与任何交互点互动。
    Figma入门教程插图82

  • 原型交互:共享原型

  • 原型交互:共享

    在演示视图中使用工具栏中的“共享原型”按钮,如果您想共享它。
    你可以向特定的人/群体发送邀请,也可以复制链接并单独分享。
    Figma入门教程插图84


  • 返回目录

    海量UI素材登录免费下载 一键登录