视觉设计 » 深度解析Figma实用技巧

深度解析Figma实用技巧

发表于: 视觉设计. 评论
Sponsor

本文主要根据我组的近期FIGMA实战经验,从实用性的角度,总结的一些实际应用中的问题,并提供解决方案和使用建议。

深度解析Figma实用技巧

Figma 是一款基于 Web 的在线设计工具,其以其轻量、便捷、跨平台使用、协同便捷的特点,迅速吸引了广大设计师们的注意。

本文主要根据我组的近期FIGMA实战经验,从实用性的角度,总结的一些实际应用中的问题,并提供解决方案和使用建议。帮助新晋FIGMA设计师们,快速了解FIGMA设计应用逻辑。更好的去使用这个工具,给自己的工作提效加分。

适用人群

· 准备使用,或者正在使用FIGMA的设计师

· 想要给自己的设计工作提效,获得设计技巧

· 热心网友,在线交流

贴心提示

工具更换过程中,一定会有一段时间的适应期。希望大家积极拥抱变化,迎来真香时代.

文章总览:

深度解析Figma实用技巧

深度解析Figma实用技巧

跨多业务协同+较低成本

近年,UI设计师们经历了从PS到Sketch、XD等工具时代。爽快多年后,发现它亦步上了先驱的老路:日趋卡顿。

协作工具Zplin → 蓝湖,解决了国外服务器网络慢的问题,但没多久按人头收费了。一刀一个快很准。对于我组:业务数量多,设计师交叉频率高;开发+产品查看权限50+等问题,促使我们必须对设计软件进行迭代。

总结就是:卡+穷,推动我们含泪成长

深度解析Figma实用技巧

深度解析Figma实用技巧

1、基础元素

Figma设计中应用的最小单位,可以独立拥有自己的样式/交互属性

深度解析Figma实用技巧

2、组合元素

最小设计单位的组合形式,帮助设计师们完成设计元素分类和快捷操作

深度解析Figma实用技巧

深度解析Figma实用技巧

1、元素类型

Figma有两种顶层元素,分别是Frame(框架)和Group(组)

Frame可以独立存在,拥有自己的样式属性,空白的Frame可以直接将看做一个矩形元素;

Group不能单独存在,如果删除Group内所有元素,那么Group也就不存在了

深度解析Figma实用技巧

2、适用场景

深度解析Figma实用技巧

3、实际应用

3.1、忽略约束

如果您想调整框架或主组件的大小,而不让所有内容都根据其约进行“适应”,可以在按COMMAND(Mac)进行调整。

3.2、批量替换颜色

通过 Selection Color,可以整体替换顶层组内颜色

这便于我们对整个页面进行颜色替换

深度解析Figma实用技巧

3.3、边界差异

Group的边界随元素变化,元素调整则Group边界跟随调整

深度解析Figma实用技巧

Frame的边界与元素大小无关,在Clip content模式下可以隐藏超出Frame的元素

深度解析Figma实用技巧

3.4、缩放模式

放大缩小group时,内部元素会随组的边界大小缩放

(非K模式下,效果、文字尺寸和描边的大小不会自动进行缩放)

深度解析Figma实用技巧

放大缩小Frame时,内部元素会随组的边界大小缩放

(非K模式下,效果、文字尺寸和描边的大小不会自动进行缩放)

深度解析Figma实用技巧

Frame可以设置内部元素布局来约束条件

深度解析Figma实用技巧

深度解析Figma实用技巧

1、组件类型

1.1、Library 资源库

单击小书本图标,可以在“资源”面板中查看所有可用的已发布的库。(Mac快捷键:OPTION + 3),免费版本资源库没办法跨文件共享

1.2、Style 样式库

基础元素的样式属性(颜色、文本样式、阴影等)都可以在其属性旁边使用相同的“四点”图标保存它们,形成固定的样式库

深度解析Figma实用技巧

2、实际应用

2.1、原始组件&组件实例

Figma 里的原始组件 叫做 Master ,从它复制出去的组件叫做 Instance(实例)

Figma 允许将 master 组件就近放在页面旁边,后面需要调整细节时,就可以边调整 master 细节边看它在整个页面中的效果。

深度解析Figma实用技巧

Alt+拖拽,或者复制原始组件可以生成实例

深度解析Figma实用技巧

调整原始组件,实例跟随改变;调整实例,不影响原始组件展示

2.2、组件实例

实例可以改变组件内元素样式属性(如颜色、边框、阴影等),需要改变元素数量时建议创建【组件变体】

深度解析Figma实用技巧

2.3、组件变体

通过原始组件右侧“Variant”选项或者“➕”,可以生成“变体组件”

拥有变体组件的实例,可以通过右侧Property选择并替换现有组件样式(类似sketch组件通过“/”后缀命名分组功能)

深度解析Figma实用技巧

3、组件实用技巧

3.1、即时添加组件描述信息

组件可以添加描述信息,这个信息在Inspect模式下也会展示出来,便于协同设计师或者开发小伙伴了解组件的应用方式和应用场景。

如果你添加了文件链接,Inspect会展示自动跳转按钮。使同类型组件快速产生关联。

深度解析Figma实用技巧

3.2、隐藏禁用的组件

将组件名命名为 __/xxx (两个英文下划线,/为路径)

之后会发现在资源中,生成了一个叫做“Privite to this file”的分组,引用的资源库中就看不到这些内容了

3.3、如何查看原始组件

如果你想了解当前应用的组件(◇标记图层)更多信息,课通过右键单击一个实例并选择“转到主组件”查看。它很可能让你打开一个新文件*,一个团队库,在那里您可以找到您正在查看的实例的原始主组件。

如果你想继续之前的浏览,可能需要你转回上个文件或者将左侧asset切换回pages选项

深度解析Figma实用技巧

深度解析Figma实用技巧

1、快捷键一览

点击界面右下角的“?”浮标,选中“keybpard shortcuts”(或者快捷键control+shift+?),可以看见详细的快捷键使用说明。

2、更换画布背景色

你可以通过点击空吧画板区域,随时更改画布的颜色。或在“属性”中调整

深度解析Figma实用技巧

3、复制图像

右键“复制图片”图片文件后,课直接粘贴到Figma中(在Mac中使用CMD+V,在Windows中使用CTRL+V)。如果粘贴时没有选中任何内容,它将浮动粘贴在画布上。如果选择一个形状,甚至另一个图像,然后粘贴,它将添加此图像作为该形状的填充,或替换现有图像。

4、只看外轮廓线(command+Y)

快捷键command+3,可以像AI一样隐藏图层信息,仅展示外轮廓线。

figma内图层常见符号和含义(figma内所有图层大致分4类,切合我们)

组、Frame、组件使用技巧

组件库使用和快捷方式

深度解析Figma实用技巧

5、快捷定位图层

右键单击对象并使用“选择层”,可以快捷查找当前鼠标停留位置下的所有所需的对象并进行选择。

深度解析Figma实用技巧

6、设置文件封面

右键单击文件,选择“set as thumbail”,就可以将任何Frame设置为文件封面。封面 1140*1024尺寸比例下,任意尺寸适合

深度解析Figma实用技巧

7、 文件置顶展示

右键选中文件后,选中pin可以再当前团队文件夹下将选中文件置顶,置顶的文件显示在页面内容区最顶层。通过取消removed from Pinned可以取消置顶

深度解析Figma实用技巧

8、快速收起所有的组(Alt+L)

当文件图层多个组都被打开,无法快速定位去选择一个或多个顶层组的时候,可以通过Alt+L的快捷键,一切收起所有图层子集,只显示顶层组。

9、制定Figma产研对接手册

figma的使用不光是设计师的工作,针对产研对接过程中常见问题,我们也做了对应协同文档。产研对接手册需要站在开发和产品的角度,解决他们关注的核心问题并给出三方协同建议。它可以有效的减少沟通成本,使兄弟部门快速上手,实现高效协同

深度解析Figma实用技巧

感谢阅读!

作者 | w大魔王
来源 | 站酷(zcool.com.cn/u/2240875)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }