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.mzph.cn/news/833404.shtml

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

相关文章

目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)

文章目录 一、目标检测介绍二、YOLOv7介绍三、源码/论文获取四、环境搭建4.1 环境检测 五、数据集准备六、 模型训练七、模型验证八、模型测试九、错误总结9.1 错误1-numpy jas mp attribute int9.2 错误2-测试代码未能跑出检测框9.3 错误3- Command git tag returned non-zero…

【unity】(2)GameObject

GameObject类是基本的游戏对象类型,它可以用来代表场景中的任何实体。 基本属性 name 类型:string说明:GameObject的名称。用法: GameObject go new GameObject(); go.name "My GameObject";activeSelf 类型&#xf…

Apple OpenELM设备端语言模型

Apple 发布的 OpenELM(一系列专为高效设备上处理而设计的开源语言模型)引发了相当大的争论。一方面,苹果在开源协作和设备端AI处理方面迈出了一步,强调隐私和效率。另一方面,与微软 Phi-3 Mini 等竞争对手相比&#xf…

森林消防新利器:高扬程水泵的革新与应用/恒峰智慧科技

随着全球气候变化的加剧,森林火灾的频发已成为威胁生态安全的重要问题。在森林消防工作中,高效、快速的水源供给设备显得尤为重要。近年来,高扬程水泵的广泛应用,为森林消防工作带来了新的希望与突破。 一、高扬程水泵的技术优势 …

【Node.js】使用 PostgreSQL、Sequelize 和 Express.js 进行 Node.js 认证

使用 PostgreSQL、Sequelize 和 Express.js 进行 Node.js 认证 作者:Racheal Kuranchie 来源:https://medium.com/rachealkuranchie/node-js-authentication-with-postgresql-sequelize-and-express-js-20ae773da4c9 使用 PostgreSQL、Sequelize 和 Expr…

Linux上安装及卸载OpenJDK

Linux上安装Java Development Kit (JDK) 8的步骤如下: 1. 添加Java JDK 8的Yum源 首先,你需要添加Java JDK 8的Yum源到系统。这可以通过下载并安装Oracle JDK的方式完成,但由于Oracle JDK在某些情况下可能需要遵守特定的许可协议&#xff0c…

探索Baidu Comate:编程世界中的新利器

文章目录 Baidu Comate 介绍Baidu Comate的优势Baidu Comate安装过程Baidu Comate实战演练代码调优代码解释代码生成注释生成 总结 Baidu Comate 介绍 随着GPT的大火,衍生了各种AI工具,这些AI工具遍布在各行业各领域中,有AI写作、AI办公、AI…

[力扣题解] 216. 组合总和 III

题目&#xff1a;216. 组合总和 III 思路 回溯法 代码 class Solution { private:vector<vector<int>> result;vector<int> path;public:void function(int k, int n, int startindex, int sum){int i;// 剪枝// 超过了, 不用找了;if(sum > n){return…

向各位请教一个问题

这是菜鸟上的一道题目&#xff0c;单单拿出来问问大家&#xff0c;看看能不能解惑 &#xff0c;谢谢各位&#xff01; 题目25&#xff1a;求12!3!...20!的和 解题思路&#xff1a;这个题不知道为什么我用DEV C 5.11显示出来为0.000000&#xff0c;可能版本有问题&#xff1f;&a…

linux挂载数据盘详细步骤

在 Linux 上挂载数据盘通常涉及以下步骤&#xff1a; 1. **识别数据盘**&#xff1a;首先&#xff0c;你需要找到要挂载的磁盘设备。在命令行中使用 lsblk 或 fdisk -l 命令查看系统中的磁盘和分区。你会看到类似 sda, sdb, sdc 这样的设备名称&#xff0c;以及各自的分区。 l…

jenkins部署服务到windows系统服务器

1、安装openSSH windows默认不支持ssh协议&#xff0c;需要下载安装&#xff0c;主要适用于jenkins传输文件已经执行命令使用 点击查看下载openSSH 2、项目配置 这里简单说说怎么配置&#xff0c;主要解决点就是ssh执行cmd或shell命令时不能开启新窗口导致应用部署失败或者断…

【论文阅读笔记】MAS-SAM: Segment Any Marine Animal with Aggregated Features

1.论文介绍 MAS-SAM: Segment Any Marine Animal with Aggregated Features MAS-SAM&#xff1a;利用聚合特征分割任何海洋动物 Paper Code(空的) 2.摘要 最近&#xff0c;分割任何模型&#xff08;SAM&#xff09;在生成高质量的对象掩模和实现零拍摄图像分割方面表现出卓越…

阿里/腾讯/华为云国际使用须知

一&#xff1a;针对国内客户业务&#xff1a;务必限制国内IP的访问。建议客户使用代理进行访问&#xff0c;或者考虑使用第三方CDN服务来屏蔽腾讯云国际服务器的IP或域名&#xff0c;以降低客户投诉和风控服务器风险。 二&#xff1a;对于国外客户业务&#xff1a;务必设置禁止…

【spark实战:报错】spark序列化报错:Kryo serialization failed: Buffer overflow

文章目录 spark序列化报错问题解决 spark序列化报错 org.apache.spark.SparkException: Kryo serialization failed: Buffer overflow. Available: 0, required: 61186304. To avoid this, increase spark.kryoserializer.buffer.max value.at org.apache.spark.serializer.Kry…

第 7 章 MyBatis 缓存配置

第 7 章 MyBatis 缓存配置 一. 一级缓存1. 代码讲解一级缓存2. 关闭一级缓存的方法二. 二级缓存1. 介绍2. 配置二级缓存2.1 开启二级缓存全局配置2.2 两种配置方法2.3 mapper.xml中配置二级缓存 ❤❤❤默认配置配置参数讲解2.4 Mapper 接口中配置二级缓存❤❤❤2.5 同时使用时注…

海云安受邀参加诸子云 4.27南京「金融互联网」私董会

4月27日&#xff0c;“安在新媒体网安用户行业活动”第四期私董会在南京顺利举办。活动以“金融&互联网”为主题&#xff0c;邀请十余位业内资深的甲方用户以及典型厂商代表。摒弃传统的议题分享&#xff0c;采取“随时问答&#xff0c;自由讨论”的形式&#xff0c;提问题…

Poisson_Image-Editing

1.算法介绍 快速泊松图像编辑&#xff08;Fast Poisson Image Editing&#xff09;是一种图像处理算法&#xff0c;用于将源图像的某个区域无缝地嵌入到目标图像中。它基于泊松方程的性质&#xff0c;通过求解离散化的泊松方程来实现图像的融合。该算法的核心思想是&#xff0c…

Shell 初始化配置指北 | Ubuntu

唠唠闲话 概要&#xff1a;在不同的Shell环境&#xff08;如Bash和Zsh&#xff09;中设置环境变量、设置初始脚本&#xff0c;以及如何根据不同的使用场景&#xff08;用户级或系统级&#xff09;管理和设置初始运行命令。 p.s. 如果你很熟悉 Linux&#xff0c;推荐跳到最后一…

信息系统项目管理师0092:项目管理原则(6项目管理概论—6.4价值驱动的项目管理知识体系—6.4.1项目管理原则)

点击查看专栏目录 文章目录 6.4价值驱动的项目管理知识体系6.4.1项目管理原则1.原则一:勤勉、尊重和关心他人2.原则二:营造协作的项目管理团队环境3.原则三:促进干系人有效参与4.原则四:聚焦于价值5.原则五:识别、评估和响应系统交互6.原则六:展现领导力行为7.原则七:根…

如何使用Knife4j进行接口测试

Knife4j是一个为Java MVC框架提供增强的Swagger UI界面的开源工具&#xff0c;它集成了Swagger UI并提供了更丰富的功能。使用Knife4j可以进行接口的测试&#xff0c;以下是使用Knife4j进行接口测试的详细步骤和解释&#xff1a; 1. 引入Knife4j依赖 首先&#xff0c;确保你的…