🍀在Figma创建响应式图标组件的探索

软件：Figma

适合读者：对Figma有点基础的人

语境：从Design System（设计系统）中拉取图标到产品设计的情况

目的：在不干扰或减少干扰设计系统的情况下，优雅创建响应式图标组件。扩展：深入思考设计系统响应式组件的搭建方法。

在看了关于如何创建响应式组件的文章《How to create responsive mobile components in Figma》后，顺手做做笔记，也亲自试试文章所列方法。 感兴趣的可以先看看。然后我照着原文所说的方法做了一遍，感兴趣的可以下载我的Figma文件看看。

原文链接：https://setproduct.com/blog/figma-responsive-mobile-components

我自己翻译的：https://www.zcool.com.cn/article/ZMTE0ODc5Ng==.html

我的Notion链接：https://www.notion.so/How-to-create-responsive-mobile-components-in-Figma-Figma-f6d86a49d375406ab654eeb049f565e9

很重要的一点需要说明的是：假设已然有一套设计系统，此时你需要从设计系统中拉取图标组件到你设计的产品中，你需要的是把图标变成自适应的图标。前提条件已经是如前面所说的设置好了，而且你又想着保持设计系统的干净整洁，那你有必要读下去😏当然你不是从设计系统拉取组件（或者没有设计系统），那么你喜欢怎么弄就怎么弄吧。

文中介绍了3种方法创建响应式图标：1.分离图标 2.创建两种类型的图标组件 3.创建图标带文字的组件

第一种方法：分离图标（detach icons）：从设计系统拉取图标后，立即分离实例（Detach Instance）然后设置好约束条件（constraints）。

优点是简单粗暴无脑。此方法最大的缺点是：直接断开了跟设计系统的联系。断开与设计系统联系后，等于设计系统的图标套件跟你现在设计的产品毫无联系了。届时设计系统更新了，你不怕麻烦就只能手动更新产品的图标了。

第二种方法：创建两种类型的图标组件（创建Scale图标组和Center图标组）：一套图标的约束条件设为Scale，复制这套图标然后每个图标更改名字、约束条件设为Center。最后分别给这两套图标设为组件。两种图标（上面是Scale下面是Center）的区别看以下动图。这么做的优点：灵活性。缺点：图标太多不建议这么做，不嫌累另说。不过一定程度上增加了设计系统的重量。

第三种方法：创建图标带文字的组件：把图标跟文字打包一起变成组件。给图标和文字的约束设为Center再给组件本身设Scale，根据原子设计的原理，把图标跟文字当成原子，图标加文字则是分子，把分子设为组件。原文作者认为此法是最优雅的。缺点是增加了额外的组件。

介绍完原文的3种方法之外，还惊喜地发现了第4种方法（在其他人的留言中发现的）。保持标签栏为frame并添加布局网格（Layout Grid），然后为每个图标约束为Left&Right。优点：根据需要设置布局，减少甚至不对设计系统造成干扰。

💬Ashish： Another option could be to make the tab bar a frame and add a 5-column layout to it. Then assign left & right constraints to each icon. That way, the constraints on each icon will map to each column, making the tab bar scale the way to you wanted. 另一种选择是使标签栏成为frame并为其添加5列布局。然后为每个图标指定左右约束。这样，每个图标上的约束将映射到每一列，从而使标签栏按你想要的方式缩放。
Roman Kamushken： That’s an idea as well! Perhaps you could create a layout with constrained frames according to your approach? Publish an embed here. Thanks 这也是一个主意！也许你可以根据自己的方法创建带有受约束框架的布局？麻烦在此处发布链接。谢谢
Sachin Bhavsar： The best way is to use layout grid and set constraints of objects to Left & Right. 最好的方法是使用布局网格并将对象的约束设置为Left & Right。 See it in action here. http://www.giphy.com/gifs/pyhC7XucTlqm1IHU7jFigma source file: https://www.figma.com/file/CWgRUvwNtSsdHi3Vo6ncD8qa/Column-Constraints?node-id=0%3A1

以下动图在我自己翻译的站酷文章里的链接含有，而Figma源文件在上面👆

总结：看完了这4种方法没？建议都逐个自己尝试一下。概括一下：第一种方法从设计系统拖拽图标到产品后就分离，断开了跟设计系统的联系，不建议。第二种跟第三种方法都需要增加设计系统的组件。第四种方法，没有增加设计系统的组件。

扩展一下：聪明的读者会发现，其实你可以把图标组件拖进产品后，置于frame。frame大小需要你按照需求平分好。把图标组件和文字约束为Center，把frame约束为Scale。原理就是把图标组件和文字和frame当成分子处理，但是不把它们设为组件。这样也可以省点事，也不增加设计系统的组件。直接拉也没差。在这我觉得算是第五种方法 😏不过呢，保险一点是按照第四种方法，把frame限制在布局网格（Layout Grid）中，这样不管怎么拉都能保证是平分的，而且Layout Grid你是可以自己设很多参数的，比如width、gutter和margin。感兴趣建议自己试验一下，设置精细的布局网格和不设布局网格的区别，拉一下就看出来了 🤣

最后，我们应该思考的是如何从设计系统到产品的过程中，保持设计系统的干净或者减少对设计系统的干扰。学习别人的思维，而不是只是学会做响应式的标签栏而已。