UI设计 - 值得一看 - 第2页

Figma 自动布局入门：做一套可复用按钮组件与间距系统

这篇教程带你从零用 Figma 的 Auto Layout 搭一套可复用按钮组件：包含间距圆角字号规范、组件变体、状态与可维护的命名方式，照着做就能在项目里直接用。

教程分享 2个月前 0

Figma 自动布局+变量：做一个可复用按钮组件的完整流程

这是一篇可直接照做的 Figma 教程：用自动布局、组件变体与变量做一套可复用按钮，并在真实界面里落地。

教程分享 3个月前 0

Figma 自动布局 + 变量：做一套可复用的响应式卡片组件教程（从零到可交付）

这篇教程用“卡片组件”做例子，带你把 Auto Layout、变量（颜色间距圆角）、组件属性和响应式约束串成一条可落地的工作流：从结构拆解到可交付规范，照着做就能在团队里复用。

教程分享 3个月前 0

Figma 玻璃拟态按钮组件教程：从样式到可复用变体（可直接照做）

手把手教你在 Figma 做一套玻璃拟态按钮组件：从基础样式、阴影与模糊参数，到 Auto Layout、Variants 和交互状态的完整搭建，照着做就能直接放进项目复用。

教程分享 3个月前 0

Figma 自动布局实战：用 Auto Layout 做可伸缩按钮与信息卡（含组件变体）

从 0 到 1 教你在 Figma 用 Auto Layout 做可伸缩按钮与信息卡：间距对齐填充与 Hug、文本自适应、变体状态（默认悬停禁用）、以及可复用的约束与排版习惯。照着做即可复刻。

教程分享 3个月前 0

Figma：用 Auto Layout 做可复用按钮组件（变体 + 响应式）

这是一套可以直接照做的 Figma 按钮组件搭建流程：用 Auto Layout 做尺寸自适应，配合 Variants 管理默认悬停禁用等状态，并用组件属性实现图标文字开关与对齐。按步骤完成后，你会得到可复用、可维...

教程分享 3个月前 0

Figma 组件变体实战：做一个可复用的按钮系统（含命名与交互规则）

这是一篇可以直接照做的 Figma 按钮组件搭建教程：从 Auto Layout 结构、状态尺寸类型变体，到命名规则、交互与团队交付检查清单。按步骤做完，你会得到一个可在项目中长期复用的按钮系统。

教程分享 3个月前 0

可商用插画与图标资源清单｜20个高质量网站

这是一份“可直接收藏”的插画与图标资源清单：每个条目都给出官网链接与授权提示，便于你快速找到适合项目的可商用素材。

设计经验 3个月前 0

Figma 玻璃拟态卡片教程：从布局到导出的一套可复用流程

这是一篇可以照做的 Figma 教程：用渐变与模糊做出玻璃拟态卡片，并通过组件、约束与自动布局把它做成可复用模块，最后整理样式与导出规范，方便在真实项目中落地。

教程分享 3个月前 0

免费可商用图标与插画工具清单｜12 个高质量站点一篇收齐

想找可商用的图标、插画、UI 组件与配色资源？这份清单把常用站点按场景整理好，直接收藏备用。

设计经验 3个月前 0

Figma教程：用Auto Layout做可复用按钮组件（含变体与约束）

手把手教你在Figma里用Auto Layout做一套可复用的按钮组件：从基础尺寸与内边距开始，加入图标与文本间距规则，再用Variants做默认悬停禁用状态，并设置约束让按钮在不同容器里自适应。

教程分享 3个月前 0

12个免费插画与图标资源网站｜收藏级清单：UI设计快速出图

整理了 12 个常用的插画图标资源网站，覆盖可编辑 SVG、成套插画库与开源图标。每个条目都标注授权提示，方便你在项目里更安心地选用。

设计经验 3个月前 0

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

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

教程分享 3个月前 0

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

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

教程分享 3个月前 0

为什么导出 PNG 会发虚：像素对齐与抗锯齿的十个检查点

导出 PNG 出现发虚、边缘毛、文字不清晰，很多时候不是软件问题，而是像素对齐、缩放比例、抗锯齿与导出流程的组合坑。本文给出一套可逐项排查的检查点，帮助你快速定位并修复。

设计经验 3个月前 0

UI 设计里「一致性」不是死板：6 个你能立刻用上的规则

很多团队把“一致性”理解成所有页面长得一模一样，结果牺牲信息层级与效率。本文用 6 条可落地的规则解释：什么时候该一致，什么时候该刻意变化，并给出快速自检清单。

设计经验 3个月前 0

配色不脏不灰：从对比到饱和度的 7 个快速修正方法

配色看起来发灰、发脏，往往不是颜色选错，而是对比关系、饱和度分配、材质与光照逻辑没统一。本文用 7 个可直接套用的修正方法，帮助你把界面与海报的颜色拉回干净、清晰、有层次的状态。

设计经验 3个月前 0

12个免费图标网站清单：可商用资源与使用要点

整理12个常用免费图标网站，附网址，并说明授权与下载格式要点，适合UI 海报产品设计快速取用。

设计经验 3个月前 0

为什么你做的按钮“不够清晰”？对比度与WCAG的入门科普

界面看不清往往不是“字体太小”，而是前景与背景对比度不足。WCAG给出对比度建议：正文常用4 5:1，大号文字3:1，有助于提升可读性与无障碍体验。

值得一看 3个月前 0

从“好看”到“能用”：新手做UI最容易踩的10个细节坑与修正方法

把UI做得“能用”比做得“好看”更难。整理10个新手最容易踩的细节坑：对齐、间距、状态、字号、对比、触达面积、文案长度、图标一致性、导出规范、交付信息。每个坑都给可操作的修正方法。

设计经验 3个月前 0

#UI设计

Figma 自动布局入门：做一套可复用按钮组件与间距系统

Figma 自动布局+变量：做一个可复用按钮组件的完整流程

Figma 自动布局 + 变量：做一套可复用的响应式卡片组件教程（从零到可交付）

Figma 玻璃拟态按钮组件教程：从样式到可复用变体（可直接照做）

Figma 自动布局实战：用 Auto Layout 做可伸缩按钮与信息卡（含组件变体）

Figma：用 Auto Layout 做可复用按钮组件（变体 + 响应式）

Figma 组件变体实战：做一个可复用的按钮系统（含命名与交互规则）

可商用插画与图标资源清单｜20个高质量网站

Figma 玻璃拟态卡片教程：从布局到导出的一套可复用流程

免费可商用图标与插画工具清单｜12 个高质量站点一篇收齐

Figma教程：用Auto Layout做可复用按钮组件（含变体与约束）

12个免费插画与图标资源网站｜收藏级清单：UI设计快速出图

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

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

为什么导出 PNG 会发虚：像素对齐与抗锯齿的十个检查点

UI 设计里「一致性」不是死板：6 个你能立刻用上的规则

配色不脏不灰：从对比到饱和度的 7 个快速修正方法

12个免费图标网站清单：可商用资源与使用要点

为什么你做的按钮“不够清晰”？对比度与WCAG的入门科普

从“好看”到“能用”：新手做UI最容易踩的10个细节坑与修正方法

大家都在看

设计笔记