12个高质量设计资源导航｜免费商用与协议提示

整理了 12 个常用的设计资源网站与工具（字体、图标、插画、配色、背景生成等），每条都标注“免费商用”或“需看协议”，便于快速选用。

设计经验 3个星期前 15 0

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

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

教程分享 3个星期前 17 0

Figma 教程：用 Auto Layout 做可复用按钮组件，一次搭好适配多尺寸

从 0 搭一个可复用的按钮组件：用 Auto Layout 解决内边距 间距，配合变体做尺寸与状态，最后放进组件集让整个项目都能一键复用。

教程分享 3个星期前 10 0

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

想快速做出更有质感的海报、PPT、网页和App界面，素材质量往往决定上限。这份清单汇总了常用的插画与图标资源站点，覆盖免费商用与需看协议两类，方便你按风格与授权快速筛选。

设计经验 3个星期前 27 0

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

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

教程分享 3个星期前 14 0

可商用设计素材网站清单｜插画图标字体配色一站收

做品牌、海报或新媒体视觉时，最耗时间的往往不是排版，而是找到合规、可商用且质量稳定的素材来源。下面整理一份常用资源网站清单，覆盖图片、插画、图标、字体与配色灵感，打开即可直接取用。

设计经验 3个星期前 12 0

Figma 实战：用 Auto Layout + 组件属性做一套可复用按钮（含状态/尺寸）

用一个按钮组件覆盖常见尺寸与状态：从 Auto Layout 搭骨架，到组件属性（Variant Boolean Instance swap）管理图标与加载态，再用样式变量统一间距与圆角。按步骤照做即可直接用于设计系统。

教程分享 3个星期前 11 0

设计师常用的免费商用矢量与图标资源清单｜12个高质量网站

整理 12 个高质量矢量 图标 插画资源站点，按「工具标题 + 地址 + 说明」格式汇总，适合做品牌、海报、UI与PPT素材补给。

设计经验 3个星期前 16 0

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

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

教程分享 3个星期前 20 0

8个免费可商用插画与图标资源网站｜附授权要点

做清单收藏时，最容易踩坑的是“看起来免费”，但商用要署名、限制用途或要求付费授权。下面整理8个常用的插画 图标资源网站：每条都给出直达链接，并在描述第一行标注“免费商用”或“需看协议”，方便你快速筛选。

设计经验 3个星期前 20 0