Alice

在之前的文章中,介绍过Figma的基本用法,没看过的小伙伴可以快速回顾一下:《掌握这些快捷操作,轻松上手Figma!

现在越来越多的公司使用Figma作为主要的软件工具,在使用Figma时不能按照以前的思维去设计,要尽可能发挥出它的最大优势,学会进阶使用。

 

1.使用组件集

图片

如果我们有大量的按钮、输入字段等变体,在进行任何调整时,都可能花费大量的时间。

图片

通过使用组件集,可以对其中包含的基础组件进行调整,然后统一应用到所有的实例中。基础组件本身不需要成为组件集的一部分,可以放在同一页或原型附近。

 

2.将封面图添加到Figma文件中

图片

当管理各种不同的项目和Figma文件时,有时候寻找需要的项目可能会很费力。

创建封面照片是一种简单而优雅的解决方案,使项目一眼就能被识别。

添加封面的步骤:

在文档中创建一个页面并将其命名为“封面”;

为封面图像绘制一个框架(1920×960效果最好);

添加一些设计元素如logo、图标等,让封面便于识别;

右键单击框架并选择“设置为缩略图”。

 

3.使用样式

图片

当使用样式进行设计并决定要测试颜色、描边粗细、字体样式等不同变化时,只要快速更改,设计就能自动更新引用该样式的实例。

 

4.组件集布局

图片

点击组件集的框架,然后按shift+a,使用自动布局,轻松组织和重新排序组件。

 

5.使用自动布局

图片

自动布局使我们能够更密切地设计产品的开发方式,并在设计文件中保持一致性和可扩展性。

图片

通过遵循使用自动布局设计,可以在删除/添加内容、创建响应组件等方面节省大量时间。

 

6.创建流程图

图片

为了清晰传达页面间的流程,可以尝试使用一个技巧——将Figma中的连接器复制并粘贴到Figma文件中,它将保留它的所有功能。

 

7.使用约束

图片

为了保持一个框架的组织性和适应性,使用约束来告诉Figma当我们调整框架大小时页面该如何响应。

约束帮助我们控制设计在不同屏幕尺寸和设备上的页面,避免了每次调整页面时里面的元素也要调整。

如果要忽略框架中对象的约束设置,只需要在调整框架大小时按住command或ctrl。

 

8.为组件创建模板

图片

为个人资料卡创建一个模板是好的选择,随着用户人数增多,资料卡模板能够快速地复用,为我们节省大量时间,使设计更轻松。

图片

模板的工作原理:假设一个博客组件中包括一张图片和一些文本,再创建另一个组件,在其中嵌套10次博客组件。把这个模板放到设计文件中,如果我们需要添加内容或者调整组件之间的空间,我们只需要在主组件上进行调整。

 

9.组织组件

图片

考虑使用按钮、颜色样式、输入等来组织组件,这样更能提高功共享的效率。同时从一个设计文件组织排版的好坏,也能看出来这个设计到底怎么样。

 

10.使用Loom插件

图片

Loom插件是远程工作时必不可少的工具,能够节省会议时间,让设计师把更多时间投入到设计中。

图片

如果设计团队的日程安排混乱、不在一起办公或者在不同的时区,都可以尝试使用Loom插件进行设计评论和共享。

 

原文地址:medium.com

作者:Danny Sapio

译文地址:Clip设计夹(公众号)

译者:Clippp

转载请注明:学UI网 » 掌握这些Figma进阶技巧,让你的工作效率提升10倍!

登录收藏
 
你可能喜欢的:
Figma让设计变得更轻松Figma让设计变得更轻松
【作品合集】老虎帮课程总监-小龙老师作品《随》【作品合集】老虎帮课程总监-小龙老师作品《随》
老虎帮学徒APP作品第三弹老虎帮学徒APP作品第三弹
老虎帮学员作品公开老虎帮学员作品公开
这样的工具,哪个设计师不想要呢?这样的工具,哪个设计师不想要呢?
Figma 免费公开课 来了!Figma 免费公开课 来了!
掌握这些快捷操作,轻松上手Figma!掌握这些快捷操作,轻松上手Figma!
Figma Variants组件集/变体组件(四)Figma Variants组件集/变体组件(四)
Figma组件和自动布局的应用(三)Figma组件和自动布局的应用(三)
Figma常用工具快速上手(二)Figma常用工具快速上手(二)