组件库 - 教程分享

Figma 变量与主题色：用 Variables 做一套可切换的设计系统（可直接照做）

手把手教你在 Figma 用 Variables 建立“设计 Token + 主题色”体系：从创建变量集合、绑定颜色样式、在组件中引用，到一键切换浅色深色主题，按步骤操作即可复现。

教程分享 6小时前 0

Figma 零基础：用 Auto Layout 做一套可复用的按钮组件库（含间距/约束/变体）

这篇教程手把手教你在 Figma 里用 Auto Layout 做一套可复用的按钮组件库：从尺寸与间距规则、约束与对齐，到 Variant 变体与组件属性，让按钮在不同文案长度、图标组合和状态下都能自动适配。

教程分享 8小时前 0

Figma 自动布局实战：用 Auto Layout 做可复用卡片组件（含响应式技巧）

手把手教你在 Figma 里用 Auto Layout 快速搭建可复用的卡片组件：从层级整理、间距与填充、内容自适应，到变体与响应式规则设置，最后附一份可直接照做的练习清单，照着做就能做出可扩展的组件库。

教程分享 8小时前 0

Figma 网格系统实战：用 8pt 规则搭建可扩展组件库

从 0 到 1 用 8pt 网格规则建立 Figma 设计系统：定义间距、做组件变体、用自动布局组合模块，并用样式与变量保证后续扩展不崩。按步骤照做即可落地到真实项目。

教程分享 9小时前 0

Figma 实战：用 Auto Layout + 变量做可复用按钮组件（从 0 到交付）

这篇教程带你在 Figma 里从零搭建一套可复用的按钮组件：用 Auto Layout 做结构，用 Variables 管状态，用 Component properties 做开关，最后整理成可交付的组件说明与命名规范。照着做即可复刻到你的项目。

教程分享 17小时前 0

Figma 一键做出可复用的按钮组件：Auto Layout + Variants 实战

手把手教你用 Auto Layout 和 Variants 在 Figma 里搭建一套可复用按钮组件：从尺寸状态图标到交互演示，做完即可直接放进设计系统。

教程分享 17小时前 0

Figma 从 0 到 1：用 Variants + Auto Layout 做一套可复用按钮组件

用一套清晰的命名与结构，把按钮做成可复用组件：支持尺寸、样式、状态与图标开关，并能在项目里一键替换。本文按步骤操作即可完成。

教程分享 22小时前 0

Figma Variables 实战：做一套可切换的浅深色主题（含按钮/输入框组件）

这篇教程用最短路径带你在 Figma 里把 Variables 用起来：先搭颜色与字号变量，再建立 Light Dark 两套 Mode，最后把变量绑定到按钮与输入框组件，让整套 UI 一键切换主题并保持可维护。

教程分享 1天前 0

从零搭建高可复用的设计规范：字号、间距、组件命名一次讲清

想做一套好维护的设计规范，关键不在“好看”，而在可复用、可扩展、可对齐。本文用一套从零到一的方法，把字号体系、间距栅格、颜色语义、组件命名与交付规则讲清，并给出可直接落地的模板与检查清单。

教程分享 1天前 0

Figma AI：在设计稿里直接生成界面与文案的实战流程

Figma AI 把生成式能力直接放进协作设计流程：从线框到界面组件、从占位文案到可用微文案，一套方法把出稿速度拉满，同时避免“好看但不可用”的AI幻觉。

设计经验 1天前 0

Relume AI：把一句话变成网站线框与组件的 UI 生成工具

Relume AI 是一款把一句话需求快速转成网站信息架构、线框与组件方案的工具，适合产品、设计与独立开发提速原型到落地。

设计经验 1天前 0

Relume：把文案变成网站结构和线框图的AI助手

Relume 是一款面向产品与设计团队的 AI 网站搭建助手：输入业务描述与风格偏好，即可生成站点结构、页面区块与可编辑线框图，显著缩短从需求到原型的时间。

设计经验 1天前 0

Galileo AI：把文字变成可用UI界面的高效生成工具

Galileo AI 是一款以“文字描述→界面草图高保真UI”为核心的生成式设计工具，适合产品运营设计师在早期快速出原型、探索布局与组件风格，并可继续在 Figma 等工具里精修落地。

设计经验 2天前 0

Figma AI：用提示词快速生成UI草稿与组件的实战流程

Figma AI 是 Figma 内置的智能能力，适合用提示词快速生成界面草稿、文案占位与组件变体，并在同一画布里继续迭代与协作。本文用一套可复用流程，带你从需求到可交付的UI初稿。

设计经验 3天前 0

用 Figma 搭建可复用组件库：命名、变体与发布的实用流程

从命名规则、组件拆分、Variants 组织到发布复用，这篇教程用一套可落地的流程，教你在 Figma 里快速搭建稳定可维护的组件库。

教程分享 4天前 0

从零搭建可复用的设计组件库：命名、约束与交付清单

一份可直接照做的组件库搭建流程：从命名与层级、组件约束、变量 Token、到交付清单与维护机制，帮助团队减少返工、提升一致性。

教程分享 5天前 0

组件库越做越乱多半是命名问题：一套可执行的规则

组件库变乱往往不是组件太多，而是命名缺少规则，导致检索困难、误用频繁。本文从语义分层、属性命名、变体组织到代码映射，给出一套可执行的命名方法。

设计经验 6天前 0

组件库越做越乱多半是命名问题：一套可执行的命名规则

组件库失控通常不是因为组件太多，而是命名和变体表达不清晰。本文给出一套可执行的命名规则：以语义为中心、统一词汇表、让变体关系一眼可见，并把命名落地到设计与开发。

设计经验 7天前 0

图标不统一会显得廉价：从线宽到语义的完整规范思路

图标集一旦不统一，界面会出现一种说不出的“拼凑感”。本文从画布、线宽、圆角、对齐到语义隐喻，讲清楚如何建立一套可执行的图标规范，并把它落地到组件与状态中。

设计经验 7天前 0

#组件库

Figma 变量与主题色：用 Variables 做一套可切换的设计系统（可直接照做）

Figma 零基础：用 Auto Layout 做一套可复用的按钮组件库（含间距/约束/变体）

Figma 自动布局实战：用 Auto Layout 做可复用卡片组件（含响应式技巧）

Figma 网格系统实战：用 8pt 规则搭建可扩展组件库

Figma 实战：用 Auto Layout + 变量做可复用按钮组件（从 0 到交付）

Figma 一键做出可复用的按钮组件：Auto Layout + Variants 实战

Figma 从 0 到 1：用 Variants + Auto Layout 做一套可复用按钮组件

Figma Variables 实战：做一套可切换的浅深色主题（含按钮/输入框组件）

从零搭建高可复用的设计规范：字号、间距、组件命名一次讲清

Figma AI：在设计稿里直接生成界面与文案的实战流程

Relume AI：把一句话变成网站线框与组件的 UI 生成工具

Relume：把文案变成网站结构和线框图的AI助手

Galileo AI：把文字变成可用UI界面的高效生成工具

Figma AI：用提示词快速生成UI草稿与组件的实战流程

用 Figma 搭建可复用组件库：命名、变体与发布的实用流程

从零搭建可复用的设计组件库：命名、约束与交付清单

组件库越做越乱多半是命名问题：一套可执行的规则

组件库越做越乱多半是命名问题：一套可执行的命名规则

图标不统一会显得廉价：从线宽到语义的完整规范思路

大家都在看

设计笔记