从零开始使用Figma-Figma新手教程

如果您是从零开始使用Figma从图形设计切换 到 UI,或者如果您(像我一样)从 Sketch 切换,本教程适合您。

从零开始使用Figma-Figma新手教程

在过去的几年里,我全心全意地喜欢 Sketch,我仍然是一个忠实的粉丝。然而,当扮演团队角色和交接时,Dropbox、Abstract、Craft、Craft、和 InVision 之间开始了痛苦的跳跃和更新。不管我使用什么组合,它最终都会有点高并导致额外的成本。原型设计也有点笨拙。Figma 承诺结束这一切,并没有更换恢复。

优点:

  • 是免费的!!!(账户最多两个用户和三个项目)
  • Mac和PC上运行(仅在Mac上使用Sketch)
  • 实时团队,
  • 您可以导入 Sketch 文件(但要注意,您不能导出到 Sketch!)
  • 苹果机和PC的集成开发人员移交/规格🥳
  • 神奇的团队图书馆/设计系统,单一的事实来源
  • 集成的原型设计

坏处:

  • 需要您用英语才能工作。但是,您可以在本地保存文件,对其进行处理并稍后再次添加。

1.1 获取 Figma

去figma.com,注册并按照说明进行操作。一分钟后你就可以开始了……哇!!!

从零开始使用Figma-Figma新手教程
登录并准备开始。

您可能会注意到 Figma 允许您创建团队和项目,我将在稍后介绍,现在很适合任何地方(从菜单或cmd+N)创建一个新文件快速启动。您可以稍后移动文件。

从零开始使用Figma-Figma新手教程
主屏幕概述。

与 Sketch 不同,Figma 的文件不是存储在本地计算机上,程序基于云的。您可以随时随地通过浏览器访问您的所有作品。我推荐的Figma 应用程序适用于 Mac 和 PC,但您非常需要它。

反对:你需要互联网。但是,您可以将文件下载到应用程序以脱机工作。

1.2 导入旧的 Sketch 文件

Figma 让您快速准确地导入 Sketch 文件。将 Sketch 文件拖走 Figma 画布上。完美!您会发现所有图层和设置都已就位。

从零开始使用Figma-Figma新手教程
将 Sketch 文件拖到屏幕上

反面:你不能从 Sketch 复制和整体项目到 Figma(你可以,但它们会被转换成图像)。所以即使你想要一个按钮,你也需要从 Sketch 导入整个文件。

更新:感谢Sevikpar提示如果您的插图主题并复制为 SVG,您可以从草图中复制单个项目

☝️提示:我建议在从 Sketch 导入时下载 Figma 应用程序,因为您将无法在浏览器中渲染局部字体并且会弄乱您的文件。

2.1 设置新框架(又名画板)

如果您使用过 Sketch,那么您将非常了解这一切。按AF在有自己的属性面板中查看所有框架选项,然后选择您想要使用的尺寸或简单地绘制的框架。与草图一样,您可以在1x(即实际像素大小)下工作,因为调整大小时没有质量损失。您仍然可以导出您可能需要的任何更大尺寸的资产。

从零开始使用Figma-Figma新手教程
按“F”设置新框架

与传统板不同,您可以将彼此连接在一起。这允许您相互交互的更复杂的设计。稍后会详细说明。

2.2 布局和布局列

对于移动设备,您可以使用标准的8点网格。对于网络,它不是关于间距而是更多关于布局网格,因此您可以从安全的一侧开始使用流行的12列引导网格。或者使用我个人最喜欢的自定义 CSS Grid更现代一些。最好与您的开发人员交谈,同时您将使用的设置达成一致。

右侧在的网格属性菜单中调整网。您可以从网格e月刊到,使其并固定流动,并根据您的需要设置边距状语从句:装订线

从零开始使用Figma-Figma新手教程
创建网格、列和行

有关的figma 网格和列的伟大的事情是,你可以设置一些网格并将它们存储在你的样式中(我们将讨论深入风格后)。这是一个方便的功能,可以让你的布局适应各种设备、与团队成员共享或在其他项目中简单地重复使用它们。

☝️提示:使用ctrl+G切换可见性

2.3 层和组

与Sketch,一样在屏幕的,你可以找到图层面板。

从零开始使用Figma-Figma新手教程
左侧的图层面板
  • 图层→交通您添加的每个新元素都会自动创建³³一个图层。您可以通过拖放重新排列图层。
  • 图层图层确保对图层进行效果(选择图层并按cmd+G)有保持文件井条cmd。可以帮助您跨帧快速移动和这些组。要在列表中选择一个元素,请按cmd并点击该项目。
  • 页面→您可以设置设计的不同部分。没有关于什么是它们的规则。我通常有单独的页面或某个区域的用途的未来趋势、线型和接口类型。
  • Assets → 你的组件保存在这里,你会在这个部分找到你的库按钮(稍后会详细介绍库、组件和实例
  • 框架框架→在Figma中你还可以框架框架。这在构建和原型设计时会派上用场。

2.4 矢量图

Figma 使用了一种超越矢量网络的东西允许创造出复杂的姿态。再见插画师

为形状,从顶部菜单中选择或点击R(椭圆)L(直线)或O图(椭圆)并开始默认绘制你的形状。形状变换以保持比例到位。每个形状都会自动创建的。层。

要制作您自己的更复杂的形状,请按P或从顶部菜单选择笔。完成后,关闭路径中点击进入。不需要连接!好的!您可以在设计过程中随时通过的属性更改属性和操作矢量形状菜单。如果您想了解更多信息,矢量网络非常强大。我推荐这个来自 Design+Code 的教程。

☝️注意:如果您是初步的,矢量可以缩放和导出为任何大小,但文件大小可以观察到。它们非常适合简单的形状、按钮、图标、标志和各种简单的插图。

2.5 图像

将图像拖到您的工作区。如果你习惯了草图,这里就是你需要适应新格式的地方。在FIGMA中,图像总是放置在一个形状内(如面具)。要更改图像的行为,请转到右侧属性窗口显示中的填充并打开图像属性。

从零开始使用Figma-Figma新手教程
Figma 中的图片

在下拉菜单中,您可以选择:

  • 填充→ 图像将填充容器。
  • 适合→当我们调整图像大小时将永远不会被真实或隐藏
  • 糖果→ 将图像选择为您的尺寸和图像选择。请注意,您不会在 photoshop 中留下图像的其余部分,您只是需要掩盖图像。
  • 平铺→根据需要重复原始图像,您可以调整平铺的大小。

此外,Figma 允许调整颜色和恢复度等属性。请注意,它们始终可以调整,并且您不会丢失丢失的图像属性。

☝注意:您可以使用图片填充形状。还可以点击形状,找到“填充物”,然后从下拉列表中选择“图片”,您将在其中设置颜色。

☝注意:。如果您是新手,注意请您需要拥有或社群中心您正在使用的图像的权利你也。可以使用免授权图片,我最喜欢的页面是Unsplash,高质量的惊人图片,他们甚至有一个FIGMA插件。

2.6 排版

Figma预装了谷歌字体,非常棒!您更喜欢使用本地字体,则需要安装字体助手或Figma 桌面应用程序。此外,请确保访问该文件的其他人安装的字体都相同。

T,创建文本窗口或直观的并开始输入。您可以在属性菜单上设置所有文本属性。

从零开始使用Figma-Figma新手教程
Figma 中的文本

我们稍后讨论了自动调整大小,自动长度、自动高度和固定大小之类的文本框行为将是相关的。

☝️提示:如果您是和应用程序设计的起点,请确保您的复制文本永远不会小于 16 像素,最好以字体18 像素为目标。根据您的,我建议还为行高添加一点提高个别性。

让样式您保存状语从句:重新应用属性。这样,大文件可以瞬间更新。可以为颜色,文本,状语从句:网格阴影等效果创建³³样式

查看所有使用的样式,请点击框架附近灰尘背景,它们将可能的属性菜单中显示

3.1 创建颜色样式

Figma 中颜色和渐变样式棒非常棒,因为您可以设置一种样式并在文本、填充和轮廓上重复使用它!您的更改删除样式任何时候在你的设计过程中通过右击到样式。

创建和使用颜色样式:

从零开始使用Figma-Figma新手教程
Figma中的颜色样式
  1. 创造一个形象
  2. 将填充更改为您想要的颜色值
  3. 包括色彩缤纷的蝴蝶符号
  4. 单击“+”添加类。完毕!

☝️提示:自然的颜色时,最好使用后调用,而不是颜色。例如。使用“突出的颜色”而不是“橙色”。

3.2 创建文字样式

与 Sketch 不同,Figma 中的文本样式属性是仅存储字体系列、大小、行高和简洁。这使您的样式库既美观又小巧,因为不是另一种颜色或自身特定版本的复制样式

设置文本样式工作方式与颜色样式几乎相同:

从零开始使用Figma-Figma新手教程
Figma 中的文本样式
  1. 点击你想制作样式的文字
  2. 在一组属性菜单上,点击图标图标
  3. 单击 + 并为您的风格
  4. 想要将样式添加到现有文本中,简洁的文字,然后通过样式背景从文本菜单中选择您想要的样式。

添加样式后,您还可以通过相同的菜单更改属性单独样式

☝️提示:命名文本样式时,最好在使用后调用,例如“H1”或“段落”,“引用”,不是而关于字体或大小的具体描述通过这种方式,您可以随时调整字体而无需重新命名。

4.1创建可重用组件

  1. 选择对象,然后按屏幕顶部的创建组件按钮cmd+alt+K。
  2. 在图层面板中,您将看到重要的组件图标。您创建了一个主要的组件。
从零开始使用Figma-Figma新手教程
主组件和实例

如果我们现在制作此主组件副本,它会自动创建一个相同的副本,例如实例。主组件中的任何更改都会导致对所有实例进行相同的更改。

您可以在上面图层的资产选项卡中找到所有组件,也可以将它们拖到框架上。

从零开始使用Figma-Figma新手教程

➝️提示:从视觉,你的目标应该是让你的Figma组件与你的尖端组件(例如ReactJS中的组件)保持一致性。最好与您的编程团队交谈以保持一致性。

4.2 交换和嵌套

组件的实例可以在主组件内进行编码。这意味着你可以拥有组件、组件内部、组件内部(如果你知道《盗梦空间》,就会明白我的英文)。

你可以通过使用实例的实例交换菜单或简单地自定义cmd+alt+option并从资产概览或您的库中拖放它们来交换团队实例。

4.3 覆盖

实例的大小和总体布局将始终贯穿始终,但您可以更改实例的属性,例如 颜色、文本和轮廓

注意请右侧属性菜单中的还原按钮,以防您想将其重置为原始状态。您还可以通过右键单击实例分离实例。

4.5 固有组件

如在中使用“/”来引入一个组件,将“共享图标”更改为图标/共享。Figma将自动创建一个命名图标父类,这为交换实例和导出梦想成真!

从零开始使用Figma-Figma新手教程
确保正确命名您的组件

大讲一句,如果您在多个页面上有大师组件,它们就会按页面组织。

☝️提示:为了让您的组件井井有条,请为每个组创建一个新框架,例如“按钮”或“表单”。现在将您的主要组件拖到那里,您会发现在组件概览中,您可以找到按字母顺序组织的所有内容。

布局自动创建³³网求允许随着您更改其中的内容增长或缩小动态框架。这是一个巨大的改进,因为它为您节省了大量重新调整的时间,并且还可以让您一键检查您的设计是否与真实内容良好。

5.1 将图层自动布局

从零开始使用Figma-Figma新手教程
Figma中的自动布局
  • 输入您的内容
  • shift+A自动在文本层周围创建一个新的自动布局框架,您可以带着垂直和水平填充。可以在自动布局属性菜单中调整这些值。
  • 现在更改内容,您将看到按钮自动调整大小

6.1 建立原型

选择一个框架,在然后右侧的属性菜单中单击“原型”。单击“原型设置”并选择您正在设计的设备。现在点击右上角的播放按钮以查看您的设计。您还可以将FIGMA镜像应用程序下载到您的手机上,以便在您的设备上实时预览

从零开始使用Figma-Figma新手教程
简单的菜单

6.2 连接屏幕

您确保位于右侧的原型菜单中。请注意所选元素如何在其周围有一个带有蓝色小按钮蓝色框点击并识别对象。如果看到,您会看到一个手柄出现,可以将其与另一个框架连接

在有的属性面板中,您可以选择动作(跳跃、点击动画、鼠标悬停等)和(移入、推入、滑出等)。

 

6.3.习惯行为

除了滚动,还提供了其他非常逼真的角色。

  • 水平滚动→所有元素选择它们的效果。可以绘制大小的框架,复制内部的组,隐藏移动。在下拉列表中,选择鼠标滚动。
  • 像谷歌地图一样,→框架并添加图像。在鼠标滚动中选择水平和水平。
  • 固定元素→要使标题或按钮具有位置,请确保“固定元素菜单”(在选择属性菜单的“设计”>“约束中”)

 

6.4 智能动画

智能动画寻找匹配的图层,差异识别并在原型中的帧之间为图层设置动画。这使您可以创建强大的原型。但是,它比本教程更高级,建议我您深入观看FIGMA团队的视频。掌握智能动画后,您无需任何额外的制作工具。

7.1 演示模式

菜单右上角的播放图标种植新选项对话卡上打开演示屏幕,允许您单击所有帧。包括所有原型设计,对于移动设计,它将添加一个设备。它带有评论状语从句:全屏模式,一个以及简单的分享链接

从零开始使用Figma-Figma新手教程
演示模式

7.2创建团队和项目

Figma 上的团队允许与人集体或简单地构建您的工作。您可以邀请成员添加项目和特定存储。

要创建团队,点击Figma 概览上的“创建团队”按钮,然后按照说明进行操作。

从零开始使用Figma-Figma新手教程
Figma 中的团队、项目和文件
  • 团队→好人,例如设计师、开发人员、文案等。
  • 项目→ 将相关文件放在一起。
  • 文件→个别设计文件,这里是特定设计发生的地方

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

7.3 图书馆

在一个团队中工作时,要我们保持所有组件风格状语从句:最新的更新一个特别的地方的英文所有团队成员都可以访问-所谓一个的单一数据源。该FIGMA库团队处理这种出奇的好,成为将您设计系统的骨干。

 

创建团队库:

  1. 在左侧菜单中,转到附件链接书本图标
  2. 新闻发布
  3. 您为发布的命名;这将保存一个副本(基本上是版本控制,很好的触摸)
  4. 在团队内打开一个新的干净文件
  5. 转到资产选项对话卡,库单击图标种植激活您刚刚创建³³的库。完毕!
  6.  

更新团队库:

更改主组件或样式时,FIGMA会提示更新团队库。更新后,所有其他团队成员都会收到更新可用的通知,他们可以查看和更新单个组件或一次性更新所有内容。

☝注意:共享库非常重要,这是第一个开始,但如果您计划在工作中使用团队库,则有大量资源深入了解团队的最佳实践,值得一看。

7.4 与其他设计师和开发者分享

通过点击顶部中的蓝色按钮邀请菜单,然后输入电子邮件地址或复制链接并发送。

其他设计师 和文案→ 为编辑模式。提供对所有功能的访问。您将看到其他用户的画像和局部,可以在同一个文件实时协同工作

从零开始使用Figma-Figma新手教程
编辑模式

开发人员→ 设置为VIEW MODE。这将向他们所有规范(切换 CSS、他们和 Android 代码)。还可以访问您的原型,还可以下载所需大小的任何资产

从零开始使用Figma-Figma新手教程
查看模式

注意如果在文件的同时与开发人员共享处理,最好在您的设计中设置一个页面,明确标志为开发团队的最新版本,重现您。

7.5 导出资产

如上所述,在FIGMA中,所有资产都可以直接从共享文件中以任意大小导出,仅即使授予“查看”权限,因此,作为设计师,您无需自己导出任何内容。但是,如果您想,无论怎么,这是它的工作原理:

从零开始使用Figma-Figma新手教程
在 Figma 中导出的资产
  1. 选择对象
  2. 单个属性菜单上的导出
  3. 定义如何导出并完成!

注意:不要用“/”命名例如,image/home/image,icon/iconname 会自动将导出到文件中。

备忘单,什么时候过去什么:

  • SVG →用于矢量文件,例如标志和图标。SVG 可扩展到任何尺寸而不会降低质量。确保退出 png 回。
  • Jpg →用于各种可见的椭圆图像和照片。确保提供适合的尺寸 (1x) 以及一些细节 (2x)。
  • Png →使用,如果图像或照片需要 透明背景。还需要 1x 和至少 2x 导出。
  • 1倍,2 → 1个是实际尺寸,2个两倍的尺寸。视网膜显示器上的清晰图像需要2倍。请注意,2倍,3倍等带有@ 2倍,3倍@后缀,这将在编码时相关识别和调用正确的图像。
  • w & h → 您还可以设置宽度,例如300w =宽度为 300px 的图像高度=h 相同
  • pdf →用于导出整个页面,用于例如发送或添加到演示文稿中并需要一份礼物。

-翻译自原文

https://uxplanet.org/Figma-all-you-need-to-know-156b52b88e54-图片、GIF来自网络;

封面动图 by Gur Margalit

作者:澜呦呦,如若转载,请注明出处:https://www.uifig.com/1408.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

分享本页
返回顶部
本站建设中,敬请期待!