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…

Apple OpenELM设备端语言模型

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

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

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

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

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

向各位请教一个问题

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

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

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

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

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

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

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

Poisson_Image-Editing

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

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

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

在家中访问一个网站的思考

在家中访问一个网站的思考 1、家庭网络简介2、家庭WLAN DHCP2.1、家庭路由器PPPOE拨号2.2、DHCP(动态主机配置协议)2.3、接入家庭网的主机IP地址2.4、家庭总线型以太网2.5、Mac地址2.6、ARP协议2.7、IP协议 & UDP/TCP协议2.8、NAT(Netwo…

沙盘Sandboxie v5.56.4

菜鸟高手裸奔工具沙盘Sandboxie是一款国外著名的系统安全工具,它可以让选定程序在安全的隔离环境下运行, 只要在此环境中运行的软件,浏览器或注册表信息等都可以完整的进行清空,不留一点痕迹。同时可以防御些 带有木马或者病毒的…

OpenHarmony usb打开报错“usb fail error code = -3, error msg = LIBUSB_ERROR_ACCESS”

一、前言:最近公司项目需求,定位要求使用国产系统,国产系统无非就是 统信os ,麒麟OS, 还有这两年比较热的 OpenHarmony。于是,老板要求公司产品适配OpenHarmony , 跟上时代步伐。 二、在开发中使用 usb 通讯时&#x…

Unity射击游戏开发教程:(12)使用后处理

后处理 后期处理是向您的游戏场景添加一个或多个滤镜,确实可以为您的游戏提供精美的外观。在本文中,我们将讨论如何在 Unity 中设置后处理系统,从那里您可以探索和试验 Unity 提供的所有过滤器。 首先,我们需要从包管理器添加后处理器堆栈。包管理器是 Unity 产品的集合,…

淘宝数据分析——Python爬虫模式♥

大数据时代, 数据收集不仅是科学研究的基石, 更是企业决策的关键。 然而,如何高效地收集数据 成了摆在我们面前的一项重要任务。 本文将为你揭示, 一系列实时数据采集方法, 助你在信息洪流中, 找到…

怎么在家访问公司内网?

在当前的疫情情况下,越来越多的公司开始允许员工在家办公,这就需要解决一个问题:如何在家访问公司的内网资源呢?今天我将介绍一种解决方案——使用【天联】组网,它具有许多优势。 【天联】组网的优势 无网络限制&#…

在Node.js(express 框架)中使用 JWT 进行身份认证

文章目录 一、JWT 认证机制二、安装 JWT 相关的包三、基本使用1、生成 JWT 字符串2、添加中间件,解析 JWT 字符串3、获取管理员信息(admin) 一、JWT 认证机制 JWT 认证机制(图片来源于网络,侵权删除): 关于 JWT 原理可…

Conda下Richdem包遇到问题

Conda中Richdem包遇到问题 文章目录 Conda中Richdem包遇到问题问题一报错解决 问题二报错解决 参考 问题一 报错 RichDEM 是一套数字高程模型 (DEM) 水文分析工具,这次打算用richdem进行地形分析,尝试在conda里面安装richdem包的…

HDLC协议

目录 1.概念 2.配置 3.HDLC帧结构 4.HDLC帧类型 1.概念 HDLC(High-level Data Link Control)高级数据链路控制位于链路层协议,传输单位是帧,它是一组用于在网络结点间传送数据的协议。其特点是各项数据和控制信息都以比特为单位&#xff…

CUDA-共享内存法实现矩阵乘法(比常规方案提速一倍)

作者:翟天保Steven 版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处 共享内存是什么? 共享内存是在多个处理单元之间共享数据的一种内存区域。在计算机体系结构中,共享内存通…