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

www.zhiqu.org     时间: 2024-06-18
  文中还提到了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可以在视觉稿上直接评论,快捷沟通解决问题。开发可以切换到开发者模式查看切图标注。

~


#辛旺玲# 如何快速掌握UI设计师基本技巧? -
(19582956667): 目前UI设计通常接触APP类的界面颇多,一般元老级的设计师,都经历过PC时代的疯狂.所以总结经验如下:1.界面的布局有规律可循,当打破规律后会发现使用不畅,别扭,碍手的感觉.所以如果您曾有几款设计得当的作品,不妨把界面的比...

#辛旺玲# UI设计是什么
(19582956667): 1基本概念编辑案例软件设计可分为两个部分:编码设计与UI设计.编码设计大家都很熟悉,但是 UI设计还是一个很陌生的词,即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思.UI的本意是用户界面,是英文User和 interface的缩...

#辛旺玲# UI 设计初学者应该怎样入门 -
(19582956667): 如果是零基础学习UI设计,那么以下几种软件是必不可少的:PS、AI等. 那软件要学到什么程度?学到你可以用它临摹出任何使用这种软件设计的图形.好好去理解每个软件可以实现什么,优势是什么,极限在哪里.前面的几点都为你提供了...

#辛旺玲# UI设计需要掌握哪些基础知识? -
(19582956667): 需要的基础就是一些简单的美术基础和平面设计基础,要求也不算高,你这个情况应该没问题,编程不太需要.一般流程是这样的,大致5个阶段,都会培训你一些基本需要的基础.PS ,Illustrator , DW,InDesign都会用到.第一阶段 UI用户设计基...

#辛旺玲# 学习UI动效设计会用到什么软件 -
(19582956667): 软件的使用根据自己的情况,没有定论的,有的人习惯用ps,ae,fw.没有基础的可以先学习手绘和软件基础,这些是基本的内容,然后学习icon,设计规范,不同平台的ui设计,交互设计,用户体验和跨界设计.

#辛旺玲# 什么是UI和UX设计 -
(19582956667): 现在越来越多公司都在提倡UX体验设计,那么到底什么是UX体验设计?和UI有哪些区别? 感觉这个词语熟悉又陌生,那么今天我和大家分享下我的理解,仅代表我个人的观点和大家互相交流探讨,如有不对的地方欢迎多交流. 一、什么是UI?...

#辛旺玲# 在公司UI设计是主要做什么的? -
(19582956667): UI即User Interface(用户界面)的简称.泛指用户的操作界面,包含移动APP,网页,智能穿戴设备等.互联网新科技兴起,从国外引进了UX设计师的感念,但是公司内部协作分的更细,分为了:UI设计师(视觉)和UE设计师(交互),设计...

#辛旺玲# UI设计是什么? -
(19582956667): UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计.从字面上看是用户与界面两个组成部分,但实际上还包括用户与界面之间的交互关系.界面设计不是单纯的平面设计,他需要定位使用者、使用环境、使用方式并且为最终用户而...

#辛旺玲# 为什么出现交互设计留学热 -
(19582956667): 互设计专业是近阶段比较火爆的一个留学专业,近两年来,明显可以感觉到申请交互复设计专业留学的同学越来越多,但是由于很少有前辈的案例或者攻略,所以很多同学在申请时会有比较多的疑惑,对于学校的选择,对于作品制集的要求,甚至于对交互设计本身都存在着大大的问号.对于交互设计专业而言,作品集可谓是最重要的一个材料,那么一本好的交互设计作品集百到底是怎样的呢?每个国家,每个学校对于作品集的规格要求和风格都会有所不同,这其中我们又需要格外注重规格要求,一份作品集如果不符合学校的规格要求(比如页数/作品集数量/提交格式等),那么学校也许就会直接拒绝.至于风格,其实大部分学度校都没有严格的限制和要求.

#辛旺玲# 学习UI设计用什么绘图软件? -
(19582956667): UI设计软件主要有Pixso、Figma、Sketch、Adobe XD等.Pixso:全平台覆盖、精细化矢量设计、智能化布局、团队组件样式共享、社区和资源库、多人实时协作、高保真原型交互动画、成果一键交...