XMind Design

设计令牌

Design Token, 设计令牌的主要优点是它们提供了一种可扩展、一致且可维护的方式来管理设计属性。通过将这些属性存储在一个集中的位置，设计师和开发人员可以更轻松地协作，并确保项目的视觉一致性。此外，当需要对这些属性进行更改时，只需更新设计令牌即可，而无需在整个项目中手动更改每个实例。

其实设计令牌提供是一种设计系统中的可重用原子化变量，这个在我们生活中也很常见。一份猪脚，一份米饭，一份青菜，可以定义成一份猪脚饭。猪脚饭和一个老火排骨海带例汤可以组成一份猪脚饭套餐，猪脚饭套餐可以和另外的白切鸡套餐，组成双人套餐。你点了双人套餐，还可以加一份猪脚。这个例子类比了多层的继承关系的好处，既方便了客户点餐，也不失灵活性。

原子设计理论

Atomic Design是一种用于设计和构建设计系统的方法论，由Brad Frost于2013年提出。它的思想是将UI设计分解为更小、更基础的组件，这些组件被分为不同的层级（原子、分子、有机体、模板和页面），并且可以逐层组合构建出复杂的UI界面。Atomic Design提供了一种组织设计系统的有效方式，使得设计师和开发者能够更高效地工作，同时也能够提高UI的一致性和可维护性。

设计令牌类型

全局令牌

Global Tokens，全局令牌是我们设计语言中的原始值，由与上下文无关的名称表示。我们的颜色板、动画、字体和尺寸值都记录为全局标记。这些标记可以直接使用，并被所有其他标记类型继承。

别名令牌

Alias Tokens，别名令牌与特定上下文或抽象相关联。别名有助于传达标记的预期目的，并且当一个具有单一意图的值将出现在多个地方时，别名非常有效。

组件特定令牌

Component-specific Tokens，组件特定令牌是与组件相关联的每个值的详尽表示。它们通常继承自别名标记，但以一种允许工程团队在组件开发中尽可能具体地应用标记的方式命名。

而在前期设计令牌的准备中，从256 x 256 x 256 = 16,777,216的颜色中按照色相去划分了各个颜色，每个颜色再按照100-900的梯度通过oklch去得出某个具体的色值。这部分类似怎么卤猪脚，你的配方和烹饪方式是什么，当然很少人重新研究新的轮子，有现成的成熟配方。

Figma的颜色系统 Primary Color，六个基础色是一个官方figma文件看到的，而Default Color Token 是figma官方插件提供的170多个，而Basic Color是我其中去除重复的抽离出来的，有23个颜色。而具体到某个位置的组件的token是检查元素看的。可以看到，不严谨的说，是这样的四层继承关系。可以发现，并没有常见的gray-100之类的颜色分类。

存储成通用json

而设计令牌通常被定义为一个集合，例如 JSON 或者 YAML 文件，这些文件可以被设计工具、代码编辑器和开发框架等工具引用和使用。

字体间距

在使用黑色背景时，增加字母间距可以提高文本的可读性。通常建议将字母间距增加 0.5% 到 1% 之间，以确保文字清晰可辨。

由于字距通常是一个相对较小的值，因此这个公式使用了指数函数来实现快速收敛。具体来说，当字体大小增大时，字距的增加速度会逐渐减慢，以避免字距过大影响文本的可读性。

行高

我们将行高向上取整，使其成为 8 的倍数，这样文本可以很好地适配我们在 UI 中使用的 8x8 基础网格。

为小字号定制的Inter

Inter 是一款由设计师Rasmus Andersson开发的免费开源字体，其设计旨在提供清晰、现代且易于阅读的体验。类比San Francisco，Helvetica的字体，都是接近等宽的字体，所以看起来紧凑、整齐、统一。Inter总共有2548个字符，支持中英法德，西里尔语，希腊语，100多种语言。而从软件对于opentype字体的支持程度来说，可以看出figma的设计师是一个非常了解字体，opentype视觉可视化也做的非常直观。

11完美像素

Inter最初是针对特定的字体大小进行设计的，即11像素。

选择2816作为UPM值是非常合适的，因为这样可以使其大写字母高度恰好为2048个单位（64个32个单位的正方形），而小写字母x的高度为1536个单位（48个32个单位的正方形）。这样一来，字体设计师可以更轻松地进行设计，因为他们可以使用整数而不是分数来处理字体设计中的各种细节，同时还可以使用完美的网格布局来保持字体的准确性。

此外，选择2816作为UPM值还可以使得Inter字体在11dp大小下的像素呈现完美匹配。在以11px分辨率渲染时，每个像素恰好对应256个单位。在2倍缩放比例下，每个像素对应128个单位，在3倍缩放比例下，每个像素对应64个单位，以此类推。这使得设计师可以更好地调整Inter字体以达到最佳的像素级渲染效果。

图标也是8的倍数，且对齐像素。

展示标题字体

油墨陷阱字体（Ink Trap Font）是一种特殊设计的字体，旨在解决印刷过程中油墨扩散的问题，提高字体的可读性和清晰度。在印刷过程中，印刷机上的油墨容易在字形的锐角处扩散和渗透，导致文字出现模糊和不清晰的问题。为了解决这个问题，设计师会在字形的锐角处添加一些微小的凹槽或者斜角，这些凹槽或斜角能够帮助油墨在字形内部停留，不会扩散到其他区域，从而提高了字体的清晰度和可读性。

那天分享完油墨陷阱，去健身房回家的路上就看到这个下水道，后面发现也是一个有趣的油墨陷阱。

以8为单位的间距

采用网格系统的布局

其实网格系统的概念历史悠久，但很少有看起来执行起来这么有强迫症的。所以这里用Grid的布局就会比较灵活，Grid是二维网格，可以控制行和列的大小、位置和间距，从而实现更灵活的布局效果。比如说Format Panel是240个像素，分成8个column的网格，左右再加一个8的spacing。

组合变体

在Figma中，Component（组件）是可重复使用的元素，可以在设计中反复使用，如按钮、表单、卡片等。Component Set（组件集）是将多个相关的组件组合在一起形成的集合，可以方便地在设计中使用，如整个UI Kit或某个页面的元素集合等。Instance（实例）是指从组件或组件集创建的具体的实例，是组件或组件集的复制品，可以独立地在设计中使用，也可以修改组件或组件集的属性以满足不同的设计需求。

Figma的Combine Variants功能是一种多态（Polymorphism）的应用。在面向对象编程中，多态是指在父类中定义的方法可以被子类继承并且可以有不同的实现方式，因此不同子类对象调用相同的方法可以有不同的行为。在Figma中，用户可以将不同变体的组合创建为单个组件，这些组件在设计中具有不同的表现和行为，因此也符合多态的概念。

而组合变体有4种属性可以设置：

而组合变体内部可以添加内部交互，不同于页面交互。一个Change to，一个是Navigate to，也就是说，类似:hover，:pressed等伪类可以在选择器中使用，用于选择元素的特定状态，被成为元素的交互。