您的位置：首页 > 百科管理 > 详情

figma怎么创建画板-UI设计干货Figma的使用方式你还不会吗？

原创：找图网 2023-04-19 07:53:52

掌握这些快捷操作，轻松上手Figma！

Hi, 我是Clip。后台有小伙伴留言想了解「Figma」的用法。Figma的界面和功能与Sketch基本保持一致,掌握基本用法后,每个人都能轻松上手使用。

Figma作为基于浏览器的多人协作式设计工具,可以跨Win/Mac等多个平台使用。Figma操作页面与其他软件类似,熟悉Sketch或XD的铁汁可快速上手Figma。

这里提供一些常用的、能够快速提升工作效率的快捷操作,一起来看看～

Tips: 在Windows中Cmd为Ctrl,Option为Alt。

Cmd+D: 复制所选元素。点击Cmd+D时,在所选元素的原位置上将出现一个新的副本。

Option+鼠标拖动: 另一种熟悉的复制方式。按住Option键,用鼠标拖动所选元素,出现一个新副本。操作完成后,可以使用Cmd+D连续创建新副本。

Option+鼠标拖动: 按住Option键,用鼠标拖动所选元素,图形从中心放大或缩小,但里面的文字比例不变。

K键: 如果想让文字随着比例缩放,点击所选元素,再点击K键,文字会等比例变化。

Shift键: 如果想在调整大小时保持比例,或在拖放时保持水平/垂直对齐,按住Shift键。

Option+Shift: 可以使大小和比例都与中心成比例。

和Sketch中调整画板的方式不同,调整Figma画板大小,画板里面的内容也会移动。

Cmd+鼠标拖动: 如果只想调整画板的大小,保持画板内的元素固定,选择画板后按住Cmd调整大小,这样只有画板的大小改变。

Option+Cmd+鼠标拖动: 按住Option+ Cmd键,可以从画板中心等比例缩放。

Option+Cmd+C: 选择想要复制的文本样式、按钮颜色或任何可复制的元素,点击Option+Cmd+C,选择想要调整的元素,点击Option+Cmd+V。

Cmd+[: 所选元素下移一层。

Cmd+]: 所选元素上移一层。

Cmd+R: 选择想要重命名的元素,点击Cmd+R,快速重命名。

Fn+↓: 页面向下移动一页。

Fn+↑: 页面向上移动一页。

数字键: 选择元素后,单击1到9数字键来更改不透明度。(1键表示10%,9键表示90%,0表示0/100%)

使用箭头键移动元素时,默认情况下元素会移动1个像素,使用Shift+箭头键,默认情况下移动10个像素

移动量: 在figma中可以自定义设置移动的像素多少。修改路径:Preferences>Nudge Amount>Small Nudge或Big Nudge。

Control+Shift+?: 可以在Figma中找到所有快捷键。实际上我们不需要知道所有的快捷键,只需要记住那些最常用并能让我们的工作更快捷的组合就足够了～

最后帮大家整理了Windows/Mac版本的安装包,后台回复: Figma 即可获取。

没用过的小伙伴赶快上手体验一下吧!❤️

精彩推荐:

1、聊聊卡片式设计的运用

2、案例分析:栅格系统的布局设计

3、如何设计深色模式?这3点因素需要考虑

4、深度解析:服务蓝图的应用逻辑设计

UI设计干货Figma的使用方式你还不会吗？

文中还提到了Sketch迁移到 Figma 的一些问题和解决方案,来,我们一起学习吧。Figma进阶功能

3.1 组件(components)

组件和实例:组件是母体,实例是复制体,组件可以删除和修改,不可逆向为组,实例不可直接编辑,但可以逆向为组,然后修改。没有一个固定位置用来存放组件,你最初组件化的那个组,就是唯一的组件母体,且组件不会被收起在一个组件页中,而是存在原本的位置。

组件和实例是分开的,简单理解就是,你最初设计的一个元素,通过Component功能打包为组件A,这个组件就是原始组件A,此时在左侧assert模块下就会存在一个固定组件(类似组件库模块),当你从Assert模块中拖动出来一个新的组件A,或者从原始组件A复制一个新的组件A,这个新的组件A就是实例,实例可以被还原为组。

3.11我如何找到最初的组件?

首先需要说明,Figma的组件管理方式很灵活,但相较于Sketch的确不够规范,这里仍建议设计师新建一个layers,以组件来命名,将原始组件都放置在这个页面,易于管理。

该Layer主要目的在于管理原始组件,例如当需要大批量修改组件时,切换到组件Layer快速修改,修改后快速映射到所有设计稿。

当需要调用组件时,则推荐使用官方提供的Assert模块,通过拖拽调用组件实例。

在实际工作场景中,我们需要从实例跳转到原始组件,以进行大批量效果修改时,可通过属性检查器中的组件icon快捷跳转至原始组件。

3.12实例操作

在实际工作中,我们会遇到使用一个类似组件来建立新组件的场景,此时需要将组件逆向为组,然后进行编辑,在Figma中仅实例可以进行逆向,方法是右键,或者在属性检查器区域执行Detach

instance命令。

当直接在当前正在操作的实例上进行少量变更后,可以通过覆盖功能将当前的属性同步给组件和所有实例。

方法是在右侧属性检查器执行Push Overrides to Main Components。

3.13组件库的使用

如何上传和维护组件库?

Figma的组件库系统极其友好,易于维护。设计师只需要将已经设计完成的组件系统和样式系统放置在一个文件中,然后就可以基于当前的文件已有的样式和组件直接建立共享组件库,只需要在Assert的Library入口进入组件窗口,通过组件库窗口中的上传(Publish)功能,完成上传,团队成员就能获得该组件库内容。

后续维护组件库的工作只需要在该文件上进行修改和完善,随后回到library窗口进行更新。当然,在你对组件库进行修改后,Figma会自动弹出快捷窗口以供你迅速更新组件库,这也不失为一种好办法。

当你更新组件库后,其他使用了该组件库内容的设计师会同步收到更新消息,且可以快速同步到最新版本,以保证设计一致性。

如何使用团队成员已上传的组件库?

在Library窗口,团队已公开的组件库会以List的形式展示,设计师只需要点击你的目标组件库左侧的switch,即可唤醒该组件库,回到你的文件画板中,此时即可调用该组件库的内容,如组件、颜色样式、字体系统等。

想要快速查看组件库内的内容可以使用Option+2,快速调起Assert资源窗口,在左侧图层列表查看。

3.2响应式约束(constraints)

通过约束功能的官方定义我们更容易理解这个功能。首先要说明其限制条件,约束功能只有在Frame中才可以发挥作用,也只有Frame中的元素,才会展示Constraints工具。因此,官方定义其为:“允许你将设计元素固定在父框架的不同位置”,所以,请谨记约束功能以建立Frame为前提,而其主流使用场景就是构建流畅的布局以适应不同设备尺寸,即当设计师将Frame尺寸进行变更时,Frame内的元素会自动按照预先设定的规则固定位置。

但在真实场景下,响应式约束的功能并不局限于此,它更是可复用、可快速编辑组件的必要组成条件。Figma的Frame不同于Sketch的画板工具,可以互相嵌套且不会影响到复杂度产生墒增的问题,因此可以通过Constraints配合Frame组合成规范布局的组件系统,再加上我们后面要讲的Auto

layout功能,可以构建出高自由度,可任意调用,且能够根据真实填充数据自动布局的超级组件,这样构建的组件一方面还原了真实场景下的设计效果,一方面大大减少了设计师重复性工作。

下面是响应式约束的不同条件及对应的效果。

响应式约束的常规案例。

3.3自动化布局(Auto layout)

自动化布局工具是制作复杂组件的核心技巧,与响应式约束搭配可以设计出高度自由可编辑的组件乃至半成品页面。

一般来说,我们谈到组件系统主要聚焦的是其规范一致性,设计资源管理等方面,但实际上,组件库在提升设计师效率,减少重复性工作方面能够发挥更强大的作用。常规组件调用后需要花费一定精力修改,但通过自动化布局工具设定好规则后,设计师能沉淀一整套可直接使用、根据内容填充物自动布局变化的超级组件,甚至是成熟的典型页面,可极大提升设计效率,减少在移动、复制、填充内容等基础操作上的时间浪费。

下面我实现了一个最简单的案例,再该search组件中需要填充真实数据以模拟真实场景下的样式,设计师只需要输入新的填充内容,组件内其他元素会自动匹配到对应的正确位置。

自动布局按照常规布局规则划分为三个属性,分别是左右空隙、上下空隙、元素间空隙。

当选中多个元素,执行Shift+A(建议熟悉快捷键提升效率)后,会为这些元素建立自动布局,规则可以在右侧属性检查区设定。

例如我需要建立一组横排的card,此时可以先设计好三个card,然后选中它们,执行Shift+A即可创建一组横排的自动布局(横排竖排根据你真实场景下元素的排列情况,也可以在右侧更改横排为竖排)。另外一种小技巧是,直接给一个card执行Shift+A命令,然后选中组内的card执行复制命名cmd+D,后复制出的每一个card也会按照预定规则排列。

如下图案例所示,元素与元素组合构成自动布局的组件,自动布局的组件组合则能构成更复杂的大兴组件乃至典型模块、典型页面。建议设计师快速掌握该技巧的方法是将其套入实际需求中,从提升设计效率,减少重复工作的出发点开始设计自己的典型组件模块。

3.4共享样式 (style)

关于共享样式,从sketch转型到Figma的同学应该再熟悉不过了,共享样式是组件库的核心构成之一,主要包括颜色、字体及各种样式效果。这里着重说明一下Figma共享样式与Sketch共享样式的差异。Figma中对样式进行了更为细致的划分,共包括颜色、字体、效果三类。

以颜色为例,Figma中颜色样式可自由运用到图形、描边、字体等各细分元素上面,无任何限制,可与各元素自由搭配。以字体为例,字体样式仅包括字体字号、字重、行高等字体本身的属性,不包括颜色,换言之,Font样式的颜色可以自由使用Color样式。

概括来讲,Sketch更注重常规理解下,组件系统的实际应用时的场景,如字体样式是由字体字族、字号、字重、行高、颜色所有属性一同构成的,而Figma强调更高的自由和编辑性,孰优孰劣无法一言蔽之,从严谨性和组件自我封闭完整性来讲,sketch的要更好一些,但从组件自由度,组件嵌套组合的效率上来讲Figma要更好一些,所以关键在于设计师能否合理运用,快速掌握技巧并提高效率。

3.5交互原型

Figma的交互功能,在设计软件中我愿称之为最强,极简的操作逻辑以及优秀的实现效果使其在中小复杂度的交互场景下不逊色于专业UI动效设计软件。在FIgma的交互模式下能看到Principle的影子,其背后的设计逻辑高度相似,符合UI设计领域快速输出产品交互物的场景。

如下图所示,界面间的交互逻辑通过选择起始画板或其中的元素然后简单的连线即可完成。当然,如果设计师不满足于此可以在右侧属性检查器制作更精致的过度效果。Figma拥有者完善的交互手势可供设计师选择,如点击、hover、拖拽等。

然后是过渡效果,在这里我只推荐一种交互方式,那就是Smart Animate,一句话概括,Smart

Animate复刻了Principle元素演变的逻辑,所以如果你是Principle的忠实拥趸,那在FIgma交互模式下你可以无缝代入到Principle的使用经验中。

除此之外,需要特殊说明的一个交互功能是弹窗交互Open

Overly。使用该交互会调起一个覆盖层,适合弹窗类场景。方法如下图所示。Figma交互模块有很多功能,感兴趣的可以自行探索,而对于大部分设计师来讲,掌握最基础的Figma交互原型功能就已经能够让你的演示事半功倍了。

遗憾的是,每次演示只能演示一条流程。如下图所示,有编辑权限的设计师需要将播放功能固定到起始画板,演示模块会以此为当前交互线程的出发点。若你有多条交互线程,那只能手动调整起点进行演示了。

3.5输出

直接分享链接给对应的利益相关者即可。PM可以在视觉稿上直接评论,快捷沟通解决问题。开发可以切换到开发者模式查看切图标注。