いらっしゃいませ!Figma 豆技巧专场 II

锵锵锵~

既然有人催了,那就开始写第二豆。

我假定你在使用 Figma 前曾也在 Sketch 上浸淫了多年的 Symbols,那一定对 Symbols 的组织命名方式不陌生吧?

Lorem/Ipsum/Neque/…

对 Symbols 的命名用「斜杠」分割就可以使其分类。👆以上面这条假字为例,当你在 Symbols 菜单调用它时,它会以「Lorem」→「Ipsum」→「Neque」这样的层级关系显示在菜单中。

Figma 的 Components 在这个环节和 Symobls 的呈现逻辑是一模一样的。

哦,你以为我今天「豆」你玩的就是 Components 的命名么?

ちがうよー!(回忆一下《韦驮天》里阿部贞夫的嘴脸)

我是为了引出主角罢了。

Figma 的收费模式很有意思。

如果你是一匹独狼,它提供的免费账号(Starter Plan) 其实已经 90% 满足使用需求了。但深入使用后,往往你就会管不住自己输入信用卡账号的手,就为了能体验「Shareable team libraries」。

那这个 Shareable team libraries 有多香呢?包含些啥呢?让我给你数一数:可被所有有访问权限的人引用的 Components、Grid Styles(设定好的栅格)、Text Styles(字体组、字重、字号、行高、字间距等等一系列与字符有关的配置项)、Effects Styles (投影(小小吐槽,一下,Figma 的 Drop shadow 简陋的过分了…)、Blur),以及 Color Sytles。还记得所谓的 Design Token 么?这就是 Design Token 呀我的朋友。(也欢迎回听一下我台 NO.93期节目「设计师要不要学写代码?」)

好了回到正题上来,当你设置了一海票的 styles 之后,一定会苦恼一件事:

预设好的样式越多,选取时就越头大,乱就是了。

样式是否可以被分类展示呢?

当然!而且再简单没有了。回到本文的开头吧,你依然只需要遵循 Lorem/Ipsum 的命名方式即可。(需要注意的是,Style 不支持多级的分类)

锵锵~

つづく

11 Replies

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

https://share.getcloudapp.com/L1upJv8j