Figma 高效技巧:设计系统中的图标嵌套

Figma 高效技巧:设计系统中的图标嵌套

在设计中,图标起着不可或缺的作用。一套便捷易用的图标嵌套方法可以有效提高设计效率。

分享一下我在图标嵌套上走过的弯路和经验教训。我的图标嵌套可以分三个阶段:

第一阶段:建立图标库

一般来说,当有图标资源时,我们会整理并归纳现有图标,然后发布为组件。在设计项目中使用图标文件时,按需修改图标的尺寸、颜色等。

第二阶段:嵌套基础属性

随着设计项目的进行,会产生有一些通用需求,其中常见的是尺寸和颜色。

关于尺寸,常见的需求有:

  1. 组件中图标的尺寸需要调整;
  2. 直接引用的图标尺寸需要调整。虽然可以用缩放来实现,但直接选择更直观和高效。一次设置后永久生效,并且方便后续维护。

图标颜色则统一使用全局的设计规范。

因此,在这个阶段,我们会在图标组件上嵌套尺寸属性,并选用规范中的颜色。

第三阶段:系统化使用

随着设计项目的增多,甚至变得更加复杂,我们需要一套覆盖面更广、扩展性更好、易于维护的图标嵌套方法。

下面以设计系统中图标嵌套为例:

首先,在Figma中添加一个新页面,可以命名为任何与图标相关的名称,以便快速识别图标合集。

其次,准备图标。这一步很重要,需要注意以下几点

  1. 同类型的图标应该统一尺寸,例如常规图标 16px
  2. 图标内图层约束应设为:缩放&缩放,以避免在缩放时出现意外情况。

创建一个仅占位的无意义图标是有必要的。原因是减少信息干扰,仅起示意作用;在最终确定之前,图标可能发生变化,避免传递不准确的信息。

对于成组使用的图标,可以合并变体。

有相对关系的图标,可以设置属性值为ON/OFF、True/False 或 Yes/No,以便在使用时将属性选择转换为开关。

在这里插入图片描述
然后,选中这些图标组件,为它们添加自动布局,并按类别命名。

分组可以按实际需求增减。

在这里插入图片描述

最后,嵌套尺寸属性:

  1. 设置需要的尺寸变体;
  2. 嵌套的图标本身,尺寸设为 「固定、固定」;变体尺寸设置「适应、适应」;
  3. 嵌套的图标,创建实例交换属性,并清除偏好值 Preferred values。

在这里插入图片描述

在这里插入图片描述

完成图标属性嵌套后

我们将得到一个可以选择图标尺寸和样式的图标组件,并且可以自由调节图标的占位尺寸。

在图标组件完成后,可以在具体组件中应用了。具体应用有以下情况:

  1. 对于组件内无需变换尺寸的,直接引用图标组件本身即可。在创建实例交换属性时,按需增加偏好值,可以帮助我们更快选择所需图标。
  2. 对于组件内需要变换尺寸的,引用叠加尺寸属性的图标组件。
  3. 对于组件内无需变换尺寸但需要变换占位尺寸的,可以引用图标组件本身,并添加自动布局即可。在这种情况下,不引用叠加尺寸属性的图标组件,主要是为了减少组件嵌套层级,并避免不必要的尺寸选择,让使用者混淆。

如果需要叠加颜色属性(例如同一图标在不同背景色上需要显示不同的颜色),目前我是根据组件的具体需求去创建不同的图标颜色变体。

之前尝试过将尺寸、颜色、尺寸等属性层层嵌套,但在引用时会出现丢失嵌套属性的情况,而且 Figma 官方不也建议实例嵌套层级太多。

总结

随着使用场景越来越多,需要总结归纳的属性也会变多。过去的经验告诉我,最好不要一次性嵌套太多甚至全部属性,虽然这样可以在引用时省去思考,但在具体使用时会因选择太多而让人困扰,后续修改和维护也会变得更加困难。

在此过程中,我借鉴了一些国内外设计系统对图标嵌套的方法,并结合了自己的使用习惯和过往项目经历,形成了目前的嵌套思路。或许在以后的项目中,会有新的方法和灵感,期待下一次优化。

以上是我在图标嵌套过程中的实践经验。如果你有其他方法或疑问,欢迎留言探讨。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/675396.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

语音识别--光谱门控降噪

⚠申明: 未经许可,禁止以任何形式转载,若要引用,请标注链接地址。 全文共计7267字,阅读大概需要3分钟 🌈更多学习内容, 欢迎👏关注👀【文末】我的个人微信公众号&#xf…

数据结构复习/学习9--二叉树

一、堆与完全二叉树 1.堆的逻辑与物理结构 2.父节点与子节点的下标 3.大小根堆 二、堆的实现(大根堆为例) 注意事项总结: 注意堆中插入与删除数据的位置和方法与维持大根堆有序时的数据上下调整 三、堆排序 1.排升序建大堆效率高 注意事项…

零基础代码随想录【Day27】|| 39. 组合总和,40.组合总和II, 131.分割回文串

目录 DAY27 39. 组合总和 解题思路&代码 40.组合总和II 解题思路&代码 131.分割回文串 解题思路&代码 DAY27 39. 组合总和 力扣题目链接(opens new window) 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有…

1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求

1.Axios的使用 Axios中文文档 | Axios中文网Axios 是一个基于 promise 的网络请求库&#xff0c;可以用于浏览器和 node.jshttps://www.axios-http.cn/ 2.与vue整合 App.vue: <template><div id"app"><Moviev-for"movie in movies":key&qu…

php使用服务器端和客户端加密狗环境部署及使用记录(服务器端windows环境下部署、linux环境宝塔面板部署、客户端部署加密狗)

php使用服务器端和客户端加密狗环境部署及使用记录 ViKey加密狗环境部署1.windows环境下部署开发文档验证代码提示Fatal error: Class COM not found in 2.linux环境下部署&#xff08;宝塔面板&#xff09;开发文档验证代码提示Fatal error: Uncaught Error: Call to undefine…

pwn学习(一)

pwn:二进制漏洞挖掘与利用&#xff08;程序里面的漏洞&#xff09; CTF中的Pwn是仅保留漏洞代码和基本逻辑的二进制程序&#xff0c;选手通过自身对漏洞的熟悉程度来快速的在逆向分析中找到漏洞点&#xff0c;并且结合自身对漏洞利用的熟悉程度来编写EXP脚本&#xff0c;从而获…

动态规划算法:简单多状态问题

例题一 解法&#xff08;动态规划&#xff09;&#xff1a; 算法思路&#xff1a; 1. 状态表⽰&#xff1a; 对于简单的线性 dp &#xff0c;我们可以⽤「经验 题⽬要求」来定义状态表⽰&#xff1a; i. 以某个位置为结尾&#xff0c;巴拉巴拉&#xff1b; ii. 以某个位置为起…

TypeScript学习日志-第二十天(模块解析)

模块解析 一、ES6之前的模块规范 前端模块化规范是有很多的&#xff0c;在es6模块化规范之前分别有一下的模块化规范 一、Commonjs 这是 NodeJs 里面的模块化规范 // 导入 require("xxx"); require("../xxx.js"); // 导出 exports.xxxxxx function() …

synchronized与volatile关键字

1.synchronized的特性 1.1互斥 synchronized 会起到互斥效果, 某个线程执行到某个对象的 synchronized 中时, 其他线程如果也执行到 同一个对象 synchronized 就会阻塞等待. 进入 synchronized 修饰的代码块, 相当于 加锁 退出 synchronized 修饰的代码块, 相当于 解锁 syn…

C语言常见的动态内存错误及几个经典笔试题以及c/c++内存开辟空间等的介绍

文章目录 前言一、常见的动态内存错误1. 对NULL指针的解引用操作2. 对动态开辟空间的越界访问3. 对非动态开辟内存使用free()4. 使用free释放一块动态开辟内存的一部分5. 对同一块动态内存多次释放6. 动态开辟内存忘记释放&#xff08;内存泄漏&#xff09; 二、几个经典笔试题…

SpringBoot3项目打包和运行

六、SpringBoot3项目打包和运行 6.1 添加打包插件 在Spring Boot项目中添加spring-boot-maven-plugin插件是为了支持将项目打包成可执行的可运行jar包。如果不添加spring-boot-maven-plugin插件配置&#xff0c;使用常规的java -jar命令来运行打包后的Spring Boot项目是无法找…

jmeter分布式集群压测

目的&#xff1a;通过多台机器同时运行 性能压测 脚本&#xff0c;模拟更好的并发压力 简单点&#xff1a;就是一个人&#xff08;控制机&#xff09;做一个项目的时候&#xff0c;压力有点大&#xff0c;会导致结果不理想&#xff0c;这时候找几个人&#xff08;执行机&#x…