掌握Figma进阶技巧,在工作中快速提高工作效率

Figma作为一款新潮的UI设计软件,它打破了我们一些以往的设计思维,如何在工作当中让Figma发挥的最大优势呢?这也是我目前工作时一直探索与学习的。

 

  • Figma组件集

在工作中我们时常会用到有大量的按钮、输入字段等变量体,在不同界面进行不同调整时,都需要花费大量的时间。

这时我们通过组件集,就可以对包含的原子组件进行调整,统一应用到所有的实例当中。原子组件本身不需要成为组件集的一部分,可以放在同一页或原型文档中归类,创建成属于自己的组件库。

如何利用Figma构建组件库?我们团队总结了这篇经验

 

  • 将封面图添加到Figma文件中

当管理各种不同的项目和Figma文件时,在寻找需要的项目时会比较费时费力。

这时创建封面照片就是一种非常好的解决方案,可以使得项目文件一眼就能被识别。

 

  • 使用样式

当使用样式进行项目的设计或者测试颜色、描边粗细、字体样式等不同变化时,只要快速更改样式中的参数,设计就能自动更新并引用该样式到实例中。同时团队版的用户可以共享样式,这样使得团队协作更为准确切高效。

 

  • Auto Layout自动布局

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

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

 

  • 创建流程图

图片

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

 

  • 使用约束

图片

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

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

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

 

  • 为组件创建模板

图片

为信息卡片创建一个模板是非常棒的选择,信息卡片模板能够快速地复用,为我们节省大量时间,使设计更加轻松。

图片

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

 

  • 组织组件

图片

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

  • 使用Loom插件

图片

Loom插件是远程工作时必不可少的工具,能够节省会议时间,让设计师把更多时间投入到设计中。如果设计团队的日程安排混乱、不在一起办公或者在不同的时区,都可以使用Loom插件进行设计评论和共享。

 

部分图文来源于:medium.com

2

Fey.Fang

学习是进步的基石

发表评论



微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

掌握Figma进阶技巧,在工作中快速提高工作效率
嘿!有什么能帮到您的吗?
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close