OpenDesign 中的 Figma 设计系统深度解析：黑白界面壳层、figmaSans 可变字体与精确设计语言

OpenDesign 中的 Figma 设计系统深度解析：黑白界面壳层、figmaSans 可变字体与精确设计语言

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design

本文以 design-systems/figma/DESIGN-ko.md 为骨架，结合仓库内 tokens.css、components.html、components.manifest.json 等实际交付物展开。读者将掌握：如何复刻 Figma 式"黑白画廊"设计语言的完整规则（可变字体权重停靠点、负字距体系、pill/圆形几何、虚线焦点），以及这套 Design System 2.0 包在 OpenDesign 中作为 Agent 可消费设计契约的落地方式——包括 token 结构、Tailwind v4 映射、组件清单与预览页的用法。

在 OpenDesign 的 design-systems 目录中，每个品牌目录都是一个"可被 Agent 直接消费"的设计系统包。figma包收录了 Figma 官网上极具辨识度的视觉语言——它是一套"自我设计的设计工具"的界面：界面壳层严格黑白，色彩只存在于产品内容中。本文从 DESIGN 文档出发，逐层拆解其设计决策，并用仓库中的 token 与组件源码验证每一处规则。

1. 视觉主题与氛围：黑白画廊 + 彩色展品

Figma 的设计系统核心是一个有趣的二元结构：

• 界面壳层（chrome）严格黑白——文档中记录，检测到的界面颜色只有字面意义上的#000000与#ffffff两种；
• 英雄区与产品展示区充满高饱和多色渐变——电光绿、亮黄、深紫、热粉，将产品截图当作"展品"陈列。

这套"白墙画廊"隐喻在 tokens.css 中直接被注释为gallery wall — no surface tint（画廊墙，无表面色调），--surface与--bg均为纯白#ffffff。

让 Figma 页面脱颖而出的另一核心是自定义可变字体 figmaSans：它提供了绝大多数排版系统不会使用的极端停靠点——320, 330, 340, 450, 480, 540, 700。这意味着标题层级不靠"常规 vs 粗体"的跳跃，而是靠肉眼几乎不可辨但结构上真实存在的微差（例如 330 与 340 之间）来建立视觉权重。

此外还有几项贯穿全文的标志性设计特征：

• figmaMono 等宽字体 + 宽字距 + 大写，用于技术标签；
• 按钮采用 pill（50px 圆角）或圆形（50%）几何；
• 所有可交互元素使用dashed 2px虚线焦点轮廓，呼应 Figma 编辑器里的选择手柄；
• 全局启用 OpenType"kern"特性，正文甚至也使用-0.14px到-0.26px的负字距。

2. 颜色体系与角色分工

Primary（界面主色）

在 tokens.css 中可以看到这一原则被忠实地 token 化：

--fg: #000000; --fg-2: #000000; /* 黑白系统无次级墨色层 */ --accent: #000000; /* 在严格黑白系统中，黑色本身就是强调色 */ --accent-on: #ffffff; --accent-hover: rgba(0, 0, 0, 0.85); --accent-active: rgba(0, 0, 0, 0.08); /* glass dark —— 次级按钮背景 */

值得注意的 schema 决策：--accent（强调色）直接绑定纯黑，而不是某个品牌色。文档注释明确写道 "black IS the accent in a monochrome system"。

Surface 与背景层级

• 纯白#ffffff：页面背景与卡片表面（--bg/--surface）；
• 玻璃黑rgba(0, 0, 0, 0.08)：辅助圆形按钮、玻璃效果的微妙暗色叠加（--accent-active）；
• 玻璃白rgba(255, 255, 255, 0.16)：深色/彩色表面之上按钮的磨砂玻璃叠加。

由于系统是纯黑白，--surface-warm直接var(--surface)别名（见 tokens.css），次级文本使用--muted: rgba(0, 0, 0, 0.55)、元信息使用--meta: rgba(0, 0, 0, 0.40)，边框则被压到rgba(0, 0, 0, 0.12)/0.06的极低存在感。

渐变体系

• 英雄区渐变：电光绿、亮黄、深紫、热粉组成的多停靠点渐变，是工具"创造性潜能"的视觉签名；
• 产品区块渐变：各个产品域（Design、Dev Mode、Prototyping 等）在展示时可使用各自的色彩主题。

3. 排版规则：可变字体的精确控制

字体族

• 主字体：figmaSans，回退链figmaSans Fallback, SF Pro Display, system-ui, helvetica；
• 等宽/标签：figmaMono，回退链figmaMono Fallback, SF Mono, menlo。

两者均被完整写入 tokens.css 的--font-display/--font-body/--font-mono。

完整层级表（继承自 DESIGN 文档）

这套层级在 tokens.css 中对应为--text-xs(12px) 到--text-4xl(86px) 的刻度，并配套--leading-tight: 1.00、--tracking-display: -0.02em（即 86px 下归一化的 -1.72px）。在 components.html 的参考实现中可以看到 h1/h2/h3 与.lead的精确落地：例如 64px 区块标题是line-height: 1.10; letter-spacing: -0.015em，26px 副标题是line-height: 1.35; letter-spacing: -0.01em; font-weight: 540。

排版原则

1. 可变字体精度：使用 320/330/340/450/480/540 这类非常规停靠点，用微差而非剧烈跳变建立层级；330 与 340 的差别几乎不可察觉但结构上有意义。
2. 以轻为默认：绝大多数正文使用 320–340（比常规 400 更轻），营造与设计工具美学匹配的"空气感"阅读体验。
3. 处处 kern：所有文本元素启用 OpenType"kern"——components.html 中 body 上写有font-feature-settings: "kern"，注释为 "structural, not decorative"（结构性而非装饰性）。
4. 负字距为默认：正文也使用 -0.1px ~ -0.26px，展示文本进一步压缩至 -0.96px / -1.72px。
5. 用等宽构建结构：figmaMono + 大写 + 正字距（0.54px–0.6px）构成技术里程碑标签。

4. 组件样式：pill 与圆形的纪律

按钮家族

黑色实心（pill）——主 CTA

• 背景纯黑#000000，文字纯白#ffffff；
• 图标按钮为圆形（50%）；焦点为 dashed 2px outline；最大强调级。

白色填充（pill）——深色/彩色表面上的标准 CTA

• 背景纯白，文字纯黑；内边距8px 18px 10px（非对称垂直）；圆角 pill（50px）；焦点 dashed 2px outline。

玻璃黑——浅色表面上的次级动作

• 背景rgba(0, 0, 0, 0.08)，文字纯黑，圆形（50%）。

玻璃白——深色/彩色表面上的次级动作

• 背景rgba(255, 255, 255, 0.16)（磨砂玻璃），文字纯白，圆形（50%）。

在 components.html 中，.btn基类统一使用border-radius: var(--radius-sm)（50px pill），.btn-black悬停变rgba(0,0,0,0.85)，.btn-white带 1pxrgba(0,0,0,0.15)边框且悬停变 4% 黑叠加。焦点则统一是.btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }——这与 USAGE.md 强调的 "Dashed focus outlines echoing Figma's editor selection handles" 完全一致。

卡片与容器

• 背景纯白；边框无或最小化；
• 圆角：6px（小容器）、8px（图片/卡片/对话框）；
• 阴影：微妙至中等的高差效果；
• 产品截图作为"卡片内容"。

token 侧对应--radius-md: 8px与--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)（见 tokens.css），.card类在 components.html 中直接消费这三个 token。

导航

白色背景上的水平导航：黑色 Figma 字标、pill（50px）产品标签页、黑色文字链接（1px 下划线装饰）、黑色填充 CTA；Hover 通过 CSS 变量切换文本颜色。

特殊组件

• 产品标签栏：水平 pill 形标签（50px 半径），每个标签代表一个 Figma 产品域（Design、Dev Mode、Prototype、Slides），激活态加粗强调。参考实现见 components.html 的.tab/.tab.active——激活态为黑底白字（background: var(--fg); color: var(--accent-on)），非激活态为透明底黑字、字重 480。
• 英雄渐变区：全宽多色渐变背景 + 86px 展示标题白字叠加 + 渐变内悬浮的产品截图。
• 虚线焦点指示：所有交互元素聚焦时使用dashed 2px轮廓，呼应编辑器选择手柄——这是一个连接"网站 UI 语言"与"产品 UI 语言"的元设计决策。

组件层面的完整性由 components.manifest.json 把关：该清单统计了 34 个选择器、17 个类、19 个元素，并按 groups 组织（buttons、inputs、cards、links、icons、typography、layout），其中 badges 与 keyboard 两个组present: false——说明该 fixture 刻意不包含这两类组件。

5. 布局原则

间距系统

• 基本单位：8px；
• 完整刻度：1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px。

token 化的间距为--space-1(4px) 到--space-12(48px)（见 tokens.css），并额外定义了区块纵向节奏：--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px——即"画廊式"的区块呼吸节奏。

网格与容器

• 最大容器宽度 1920px（--container-max）；
• 英雄区：全宽渐变，内容居中；产品区块：交错展示；页脚：深色全宽区块；
• 响应范围 559px 至 1920px；
• 容器边距按断点切换：桌面 40px、平板 24px、手机 16px（--container-gutter-*）。

留白哲学

• 画廊式呼吸：充裕的留白让每个产品区块都像独立展品；
• 以色彩作视觉呼吸：渐变英雄与产品展示在单色区块之间提供"彩色喘息"。

圆角刻度

6. 深度与高差

阴影哲学：Figma 对阴影极为克制——主要的深度机制是背景对比（彩色/深色区块上的白色内容）以及产品截图自身的立体感。这解释了为何--elev-flat: none是默认值，而--elev-raised只有0 4px 16px rgba(0,0,0,0.08)这么轻的一层（见 tokens.css）。

7. Do's and Don'ts（快速评审清单）

Do

• 用 figmaSans 的精确可变字重（320–540）——微差控制本身就是设计；
• 界面保持严格黑白——色彩只来自产品内容；
• 所有交互元素使用 pill（50px）与圆形（50%）几何；
• 应用 dashed 2px 焦点轮廓——签名式可访问性模式；
• 所有文本启用"kern"；
• 标签使用大写 figmaMono + 正字距；
• 全局应用负字距（-0.1px 到 -1.72px）。

Don't

• 不要给界面加色——单色板是绝对的；
• 不要用标准字重（400/500/600/700）——必须用可变字体的停靠点（320/330/340/450/480/540）；
• 按钮不要用尖锐直角——只允许 pill 与圆形；
• 不要用实线焦点——虚线才是签名；
• 正文字重不要超过 450——轻盈美学是核心；
• 正文不要用正字距——永远是负值。

8. 响应式行为

断点

收缩策略

• 英雄文本：86px → 64px → 48px；
• 产品标签：移动端横向滚动；
• 功能区块：堆叠为单列；
• 页脚：多列 → 堆叠。

components.html 中对应的实现是两档媒体查询（max-width: 1023px与max-width: 639px），切换容器边距与区块纵向内边距；.hero-grid（双列）在 1023px 以下降为单列，.features-grid（三列）依次降为双列再降为单列。

9. Agent 使用指南：把 DESIGN 文档变成可执行契约

在 OpenDesign 的体系里，这份 DESIGN 文档不是给人看的说明书，而是给 Agent 消费的设计契约。USAGE.md 规定了阅读顺序：

1. 先读 USAGE 理解包契约；
2. 读 DESIGN.md（英文主版）理解视觉意图与反模式；
3. 将 tokens.css 粘贴进首个 artifact 的<style>块，再写组件 CSS；
4. 用 components.manifest.json 做紧凑的组件清单，需要精确选择器/状态时打开 components.html；
5. 需要视觉核对时查看preview/页面（colors.html、typography.html、spacing.html）。

包结构本身由 manifest.json 声明：tokens.css是 token 源，design-tokens.json与tailwind-v4.css是派生产物。其中 tailwind-v4.css 展示了如何把 schema token 完整映射进 Tailwind v4 的@theme块——--color-accent、--text-4xl、--radius-pill、--shadow-raised等一一对应，注释明确要求 "Keep tokens.css as the source of truth"（以 tokens.css 为唯一事实源）。

快速颜色参考

• 一切界面："纯黑 (#000000)" 与 "纯白 (#ffffff)"；
• Glass Dark：rgba(0, 0, 0, 0.08)；
• Glass Light：rgba(255, 255, 255, 0.16)。

示例组件 Prompt（可直接给 Agent 使用）

"在鲜艳的多色渐变（绿、黄、紫、粉）上创建 hero。标题用 86px figmaSans 字重 400、line-height 1.0、letter-spacing -1.72px，白色文字。白色填充 CTA 按钮（50px 圆角，8px 18px padding）。"

"用 pill 形按钮（50px 圆角）设计产品标签栏。激活态：黑底白字；非激活态：透明底黑字。figmaSans 20px 字重 480。"

"创建区块标签：figmaMono 18px，大写，letter-spacing 0.54px，黑色文字。启用 kern。"

"创建正文：20px figmaSans 字重 330、line-height 1.40、letter-spacing -0.14px。白底纯黑。"

迭代五原则（Agent 自检）

1. 精确使用可变字体停靠点：320, 330, 340, 450, 480, 540, 700；
2. 界面永远是黑 + 白——不要给 chrome 加色；
3. 焦点用虚线而非实线；
4. 正文永远负字距，等宽标签永远正字距；
5. 按钮/标签用 pill（50px），图标按钮用圆形（50%）。

10. 溯源与审计：这份包的证据边界

source/evidence.md 明确声明：本包是基于 OpenDesign 整理的 bundled fixture（DESIGN.md + tokens.css + components.html）派生的 Design System 2.0 回填，并不声称对上游品牌官网做了全新抓取。因此在使用时：

• 不要声称"来自上游原始来源"的证据；
• design-tokens.json与tailwind-v4.css是派生输出，应通过报告与 token 样式表重新生成，而非手工编辑。

source/tokens.source.json 提供了逐 token 的审计证据：每个 token 都标注了 value、layer（A1-identity / A1-structure / A2 / B-slot 分层）与tokens.css中的声明行号（如--bg→tokens.css:32、--accent→tokens.css:48）。这构成了可机器校验的 token 契约：任何一处视觉值都能追溯到样式表中的唯一声明。

总结

Figma 设计系统包是 OpenDesign 中"设计纪律如何被编码"的典型样本：它把"黑白绝对主义 + 可变字体微差 + pill 几何 + 虚线焦点"这套极难手工保持一致的美学，固化成 56 个 schema token、34 个选择器的组件 fixture 与逐行审计报告。对希望复刻该风格的开发者，本文第 3、4、5、9 节提供了可直接照抄的层级表、组件规则与 Agent Prompt；对希望理解 OpenDesign 设计系统包架构的读者，manifest.json、USAGE.md 与 source/tokens.source.json 展示了从"设计文档 → token 契约 → 派生产物 → 审计证据"的完整链路。

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design