发布于 2026-01-06 2 阅读
0

Figma基础知识学习,第一部分:Figma用户界面简介;文件浏览器;Figma文件结构;文件编辑器:

Figma基础知识学习,第一部分:Figma用户界面简介

文件浏览器:

Figma 文件结构:

文件编辑器:

在开始使用 Figma 之前,了解它的功能和局限性非常重要。

Figma 的功能:

Figma 旨在帮助您创建用户界面和进行协作。
您可以使用 Figma 创建用户界面、图形设计和插图。

Figma 的局限性:
Figma 不涵盖照片编辑、3D 设计或视频编辑。

创建 Figma 帐户:
在开始之前,如果您还没有帐户,请访问 figma.com 并创建一个帐户。

文件浏览器:

登录 Figma 或打开项目文件后,您将进入文件浏览器:

Figma 文件浏览器

文件浏览器允许您浏览您的帐户。您可以使用它来访问个人文件、创建和加入团队,以及与更广泛的 Figma 社区互动。
页面左侧是侧边栏,这是浏览 Figma 的主要方式。
您的文件、团队和项目都显示在文件浏览器的主体部分。
来源:help.figma

Figma 文件结构:

Figma 通过其四级文件结构(团队、项目、文件和页面)帮助您更好地管理文件。

Figma 文件结构 01

Figma 文件结构 02

1 - 团队:

团队是包含团队成员创建的项目列表的标签页。

创建新团队:

  • 要创建新团队,请点击侧边栏底部的“+ 新建团队”按钮。

Figma 新团队

  • 给团队添加名称,然后点击“新建团队”。
  • 添加团队成员邮箱地址,或点击“暂不添加”。
  • 选择入门计划

您可以在侧边栏中访问您的新团队。

2 - 项目:

项目是指分配给同一个项目的一组文件。

创建新项目:

项目在团队内部创建。免费套餐最多只能创建三个项目。

  • 在侧边栏中选择一支队伍
  • 单击文件浏览器右上角的“新建项目”按钮

Figma 新项目

  • 给项目命名,然后点击“创建项目”。

3 - 文件:

文件包含您的设计。

创建一个新文件:

在 Figma 中创建新文件有两种方法:创建草稿文件团队项目文件

草稿文件:

  • 点击侧边栏草稿选项卡旁边的“+”图标。

草稿

您的新文件将被分配到草稿项目。
要访问您的草稿文件,请在侧边栏中选择“草稿”选项卡。

团队项目文件:

  • 选择一支队伍
  • 打开一个项目
  • 点击文件浏览器右上角的“+”图标

项目

4 - 页数:

在 Figma 文件中,您可以创建页面。每个页面都有自己的画布,您可以在其中创建不同的画板来展示您的设计。
页面功能非常实用,可以在同一个文件中创建同一设计的不同版本。

创建新页面:

  • 打开项目文件。
  • 转到侧边栏的选项卡菜单,点击第 1 页以显示页面部分。

页

  • 点击页面部分右侧的“+”图标。

创建新页面

  • 给页面添加名称。

文件编辑器:

Figma 拥有一个极简的文件编辑器,包含四个主要区域:工具栏、图层面板、画布和属性面板。

文件编辑器

工具栏:

工具栏包含一系列可在创作过程中使用的工具。

工具栏

更多信息请参见:
https://help.figma.com/hc/en-us/articles/360041064174-Navigate-the-Toolbar-in-the-Editor

帆布 :

画布是存放画板和图层的容器。

图层面板:

图层面板侧边栏允许您访问文件中包含的所有图层、资源和页面。

更多信息请参见:
https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-assets-in-the-Layers-Panel

属性面板:

属性面板允许您访问任何选定图层、原型或检查对象代码的属性。

更多信息请参见:
https://help.figma.com/hc/en-us/articles/360039832014-Design-Prototype-and-view-Code-in-the-Properties-Panel

以上就是 Figma 基本用户界面的全部内容。在下一篇文章中,我们将探索框架功能以及如何创建设计画板。

这篇文章是 Figma 设计基础系列文章的一部分。
请不要忘记关注和分享。我们下篇文章见 ;)

文章来源:https://dev.to/raoufbelakhdar/learn-figma-basics-part-1-introduction-to-figma-user-interface-13l8