钟祥建设局网站,在线设计logo图片,定期报告系统下载官网,外贸网站增加外链方法Figma 高效技巧#xff1a;设计系统中的图标嵌套 在设计中#xff0c;图标起着不可或缺的作用。一套便捷易用的图标嵌套方法可以有效提高设计效率。 分享一下我在图标嵌套上走过的弯路和经验教训。我的图标嵌套可以分三个阶段#xff1a; 第一阶段#xff1a;建立图标库
一…Figma 高效技巧设计系统中的图标嵌套 在设计中图标起着不可或缺的作用。一套便捷易用的图标嵌套方法可以有效提高设计效率。 分享一下我在图标嵌套上走过的弯路和经验教训。我的图标嵌套可以分三个阶段 第一阶段建立图标库
一般来说当有图标资源时我们会整理并归纳现有图标然后发布为组件。在设计项目中使用图标文件时按需修改图标的尺寸、颜色等。
第二阶段嵌套基础属性
随着设计项目的进行会产生有一些通用需求其中常见的是尺寸和颜色。
关于尺寸常见的需求有
组件中图标的尺寸需要调整直接引用的图标尺寸需要调整。虽然可以用缩放来实现但直接选择更直观和高效。一次设置后永久生效并且方便后续维护。
图标颜色则统一使用全局的设计规范。
因此在这个阶段我们会在图标组件上嵌套尺寸属性并选用规范中的颜色。
第三阶段系统化使用
随着设计项目的增多甚至变得更加复杂我们需要一套覆盖面更广、扩展性更好、易于维护的图标嵌套方法。
下面以设计系统中图标嵌套为例
首先在Figma中添加一个新页面可以命名为任何与图标相关的名称以便快速识别图标合集。
其次准备图标。这一步很重要需要注意以下几点
同类型的图标应该统一尺寸例如常规图标 16px图标内图层约束应设为缩放缩放以避免在缩放时出现意外情况。
创建一个仅占位的无意义图标是有必要的。原因是减少信息干扰仅起示意作用在最终确定之前图标可能发生变化避免传递不准确的信息。
对于成组使用的图标可以合并变体。
有相对关系的图标可以设置属性值为ON/OFF、True/False 或 Yes/No以便在使用时将属性选择转换为开关。 然后选中这些图标组件为它们添加自动布局并按类别命名。
分组可以按实际需求增减。 最后嵌套尺寸属性
设置需要的尺寸变体嵌套的图标本身尺寸设为 「固定、固定」变体尺寸设置「适应、适应」嵌套的图标创建实例交换属性并清除偏好值 Preferred values。 完成图标属性嵌套后
我们将得到一个可以选择图标尺寸和样式的图标组件并且可以自由调节图标的占位尺寸。
在图标组件完成后可以在具体组件中应用了。具体应用有以下情况
对于组件内无需变换尺寸的直接引用图标组件本身即可。在创建实例交换属性时按需增加偏好值可以帮助我们更快选择所需图标。对于组件内需要变换尺寸的引用叠加尺寸属性的图标组件。对于组件内无需变换尺寸但需要变换占位尺寸的可以引用图标组件本身并添加自动布局即可。在这种情况下不引用叠加尺寸属性的图标组件主要是为了减少组件嵌套层级并避免不必要的尺寸选择让使用者混淆。
如果需要叠加颜色属性例如同一图标在不同背景色上需要显示不同的颜色目前我是根据组件的具体需求去创建不同的图标颜色变体。
之前尝试过将尺寸、颜色、尺寸等属性层层嵌套但在引用时会出现丢失嵌套属性的情况而且 Figma 官方不也建议实例嵌套层级太多。
总结
随着使用场景越来越多需要总结归纳的属性也会变多。过去的经验告诉我最好不要一次性嵌套太多甚至全部属性虽然这样可以在引用时省去思考但在具体使用时会因选择太多而让人困扰后续修改和维护也会变得更加困难。
在此过程中我借鉴了一些国内外设计系统对图标嵌套的方法并结合了自己的使用习惯和过往项目经历形成了目前的嵌套思路。或许在以后的项目中会有新的方法和灵感期待下一次优化。
以上是我在图标嵌套过程中的实践经验。如果你有其他方法或疑问欢迎留言探讨。
