以下是 UI 相关内容，总共有 164 条记录。
用一篇从零到交付的实战流程，带你在 Figma 里用 Auto Layout 做出可响应、可复用、可批量换数据的卡片组件，并沉淀为设计系统里的组件规范。
这是一篇可以直接照做的 Figma 教程：用 8pt 网格 + Auto Layout，从零搭出一套可复用的响应式卡片组件，并把约束、变体、排版、导出与开发交付一并做对。
这是一套可以直接照做的 Figma 按钮组件搭建流程：用 Auto Layout 做尺寸自适应，配合 Variants 管理默认 悬停 禁用等状态，并用组件属性实现图标 文字开关与对齐。按步骤完成后，你会得到可复用、可维...
从零做一个可复用的 Figma 卡片组件：用 Auto Layout 规范间距与自适应规则，做出可伸缩的标题 正文 标签 按钮结构，并通过组件属性实现多状态切换，最终能直接交付给开发使用。
这是一份可以直接照做的 Figma 排版教程：从布局网格、8pt 间距体系、字体层级到组件化落地，带你把页面对齐与留白一次性整理成可复用的规范。
从 0 开始在 Figma 里做一张可复用的玻璃拟态卡片组件：背景模糊怎么设置更真实、双层阴影参数怎么配、如何保证文字可读性和组件可编辑性。
想快速搭建视觉方案，最省时间的做法是先把素材与组件的可靠来源整理好。下面这份清单覆盖图标、插画、配色、UI组件、样机与纹理等常用方向，便于按项目需要直接取用。
这篇教程用“Auto Layout + 组件变量 + 样式”三件套，在 Figma 里搭一套卡片组件：从排版结构、间距约束，到响应式尺寸和交付给开发的标注清单，照着做即可直接用于项目。
这是一篇可以直接照做的 Figma 按钮组件搭建教程：从 Auto Layout 结构、状态 尺寸 类型变体，到命名规则、交互与团队交付检查清单。按步骤做完，你会得到一个可在项目中长期复用的按钮系统。
这篇教程教你在 Figma 里用 Auto Layout 从零搭建可复用的卡片组件：定义内容结构、约束与间距、做变体（含 不含图片、不同按钮状态），并用嵌套自动布局实现真正的自适应。跟着步骤做完，你就能把卡片作为...
做设计时最耗时间的不是软件操作，而是反复找素材、对比授权、筛选质量。下面整理了一份常用的设计资源网站清单，覆盖图标、插画、纹理、配色与样机等方向，直接打开即可下载使用。
整理了一份偏实用的设计资源清单，覆盖图标、插画、字体、配色与 3D 模型等常见需求。每个条目都附上直达链接与使用提示，方便你按项目类型快速挑选合适素材来源。
这是一份“可直接收藏”的插画与图标资源清单：每个条目都给出官网链接与授权提示，便于你快速找到适合项目的可商用素材。
用一套按钮组件把尺寸、状态、图标三类变化收进 Variants：从命名规范到交互原型，一步步照做即可复用到任何项目。
手把手教你在 Figma 里用 Variables（变量）+ Components（组件）搭一套可复用的主题系统：同一套组件在浅色 深色模式之间一键切换，适合做 App Web 的 UI 规范与组件库。
整理了一份常用的设计资源网站清单，覆盖图标、插画、字体、配色与UI组件等方向，方便在不同项目里快速补齐素材。
做视觉或UI时，最耗时间的往往不是画，而是找“能用、好用、版权清晰”的素材来源。下面这份清单把常用的图标、插画、照片、字体与配色等资源按工具列出来，打开就能直接取用。
这是一篇可以照做的 Figma 教程：用渐变与模糊做出玻璃拟态卡片，并通过组件、约束与自动布局把它做成可复用模块，最后整理样式与导出规范，方便在真实项目中落地。
整理一份围绕配色可访问性的工具清单，覆盖对比度检测、色盲模拟、调色板生成与设计交付检查。开头先给出选择与校验原则，随后按工具逐条列出地址与适用场景。
想找可商用的图标、插画、UI 组件与配色资源？这份清单把常用站点按场景整理好，直接收藏备用。
