使用Figma在创建设计系统或处理大型设计项目时,总会涉及批量修改.快速定位.自动布局问题,MarcAndrew这篇文章分享了技巧,可以大大提高设计效率,希望对大家有所帮助:
在这篇文章中,我列出了一些快速简单的方法来帮助你更快地使用它Figma制作设计系统。这里分享的大部分技能都非常适合处理设计系统,或者庞大的设计文件和设计项目,当然也适合Figma处理日常设计项目。
你可能熟悉一些内容,但也可能有一些内容是你从未发现过的宝藏。接下来,让我们开始:
1.批量修改颜色的使用「颜色选择面板」
当你想快速修改多个组件的颜色时,不要一个接一个地选择,所以工作量太大了。此时,最快的方法是选择侧面「颜色选择面板(SelectionColors)」这种方法是直接调用色彩系统中的色彩,可以达到批量修改的目的。
2.这个快捷键可以使图层清晰整洁
图层面板中的文件夹结构可以帮助您更快地找出包含哪些元素,但由于屏幕尺寸的限制,在复杂的设计系统中,由于元素太多,你很难清楚地了解整个系统。
使用最简单的快捷键Alt+L,所有的层都可以折叠起来,这样你就可以更清楚地看到整个系统的全貌,并专注于当前的项目。
3.搜索可以更快地定位文本样式
当你想改变文本风格时,你不需要无休止地滚动图层和选项来找到你需要的文本。此时,使用搜索功能可以帮助您更快地定位到相应的层。
例如,您可以直接搜索H2或者Headline2找到相应的文本层,而不是逐个浏览层面板。特别值得一提的是,当你在搜索时,如果你想搜索,比如Headline37、可直接搜索H37可以找到相应的图层。
使用简短的关键词搜索也能更快地提高编辑内容的效率。
4.使用列表选项更快选择颜色样式
正如我之前所说,尽快调整配色风格和文本风格,以便更快地设计。所以,当你使用它的时候。「色彩指示器(Inspcetor)」在调整颜色选项时,将网格布局改为列表布局,可以更容易地浏览和使用配色风格,更直观。
5.使用键盘快捷键更快地浏览图层
绝大多数用户习惯于通过鼠标滚动和点击图层面板,逐个控制,逐个文件夹,一个接一个地找到,这个效率超低,我也这样做了很长一段时间。然而,鼠标点击的效率远不如键盘快捷键方便快捷。
最快的方法就是使用Tab在图层中快速向下切换选择图层,然后使用车键确认。这种选择比鼠标快很多,但是Tab只能向下滚动选择,如果要向上切换选择,使用,Shift+Tab快捷键就可以了。
6.使用快捷键更换和更新组件
设计系统总是不可避免地涉及到不同时间、不同版本的设计系统分支之间的处理,比如版本V2.更换图标2V2.5.这时,按住。Alt+Cmd按钮,选择需要调整的组件,组件周围会有一层紫色的外界。此时,您可以在不同的版本之间切换和调整,非常快。
7.使用自动布局快速改变组件尺寸
当您设计当前项目的主要组件时,记得隐藏与主要组件无关的部分,并在层管理中保持此,您可以点击图层面板中的小眼睛图标来隐藏它们。同时,这个小图标也可以帮助您根据需要适应组件的大小。(这部分作者没有说清楚,知道学生记得在评论区留言纠正)
8.使用自动布局及时避免文本对齐混乱
在处理设计系统时,排版工作量会很大,会注意到这些文本元素不能像其他现有文本那样整齐一致地排列。此时,不要担心,记住在使用自动布局功能时,首先到文本排版,确定排版对齐规则,然后自动布局功能将遵循这个逻辑自动布局。
9.自动布局缩放异常时,应调整间距设置
在许多使用自动布局的组件中,当你试图调整某些元素的大小时,缩放的大小可能会发生变化。例如,在一个组件中UI在控制中添加标签组件(ChipsComponent),插入似乎很好,但当你想调整标签尺寸时,你会发现它很难控制。此时,在自动布局的设置面板中,尝试切换间距设置中的面板「Packed」和「SpaceBetween」选项,之后应该正常。更多figma内容:https://js.design/special/figma/
结语
我希望这些技能能帮助你,尤其是在处理复杂的设计系统时。这些技巧可以帮助你提高效率,在一定程度上缓解问题。Figma这是一个很好的工具,它有很多有效和省时的技巧,但它们需要你花时间去探索。