设计规范 - 教程分享

Figma 自动布局实战：从卡片到响应式列表的完整步骤

手把手教你在 Figma 用 Auto Layout 搭出可复用的卡片组件，并用嵌套布局做出随容器宽度自适应的列表栅格。包含常见坑位（间距塌陷、文本换行、填充规则）与检查清单。

教程分享 23分钟前 0

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

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

教程分享 1小时前 0

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

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

教程分享 8小时前 0

Figma 自动布局 + 组件变体：做一套可复用的卡片列表（从 0 到可交付）

从零搭建一套可复用的 Figma 卡片组件：自动布局、变体、图标文字约束与响应式拉伸规则一次讲清，按步骤做完即可直接用于交付。

教程分享 15小时前 0

Figma 自动布局 + 组件变体：做一套可复用按钮系统（从规范到交付）

这篇教程用一个可落地的案例，带你在 Figma 里用 Auto Layout、组件变体和状态命名，搭一套可复用的按钮组件库。包含尺寸、圆角、图标、禁用加载态、交付开发的标注与导出流程。

教程分享 16小时前 0

Figma 字体排版快速上分：8步建立可复用的排版系统（含组件与样式）

从零搭建一套可复用的 Figma 排版系统：字体层级、行高与网格规则、Text Styles 命名、组件联动与落地检查。照着做 30 分钟即可把排版规范固化到文件里，后续做页面不再靠手感。

教程分享 18小时前 0

Figma 自动布局 + 变量：做一个可复用的按钮组件（从零到可交付）

这篇教程用一个“按钮组件”为例，手把手讲清 Figma 自动布局、Variants 组件状态、Variables 变量与样式联动的完整做法。按步骤做完，你会得到一个能在项目里直接复用、可快速换主题与尺寸的按钮系统。

教程分享 22小时前 0

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

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

教程分享 23小时前 0

Figma 自动布局入门：用一套规则做出可复用的按钮组件（含常见坑）

从按钮组件开始，用自动布局把「间距、内边距、对齐、状态」一次性规范起来。含最小可用设置、常见坑（拉伸约束文本换行）和复用建议。

教程分享 4天前 0

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

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

教程分享 5天前 0

交付不靠嘴：用标注和组件规则让还原更稳定

交付靠口头解释会带来大量偏差与返工。本文从标注内容选择、组件规则、状态说明到验收方式，讲清如何把设计意图写进可被实现的规则里，让还原更稳定。

设计经验 6天前 0

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

图标不统一会让界面显得杂乱、降低可信度。本文从线宽与端点样式、网格与留白、语义映射与命名方法出发，讲清如何把一套图标做成可维护的体系。

设计经验 6天前 0

UI组件做不齐的9个原因与统一方法

组件怎么摆都不齐，通常不是审美问题，而是缺少统一坐标、间距体系与组件规则。本文总结9个最常见原因，并给出一套可落地的统一方法（含检查清单），适合Figma Sketch等场景。

设计经验 1个星期前 0

设计师必备知识：电商常用作图尺寸规范

您是否经常为电商平台设计产品图片？以下是各大电商平台常用的作图尺寸规范，让您的设计更加符合要求，提升商品展示效果。

设计经验 2024-03-03 0

华为鸿蒙“HMOS”角标设计规范附模板

部分纯鸿蒙 HarmonyOS 应用已上线，图标上有“HMOS”角标的即为纯 HarmonyOS 应用，角标的官方规范藏的比较深，素材君找了翻了很久才找到，这边分享给正在开发鸿蒙应用的设计师。

设计经验 2022-01-17 0

国内外开源设计组件资源，UI设计师必备

早前阿里、头条已经开源了自己的设计组件资源，上周腾讯刚刚开源自己的的设计系统TDesign，可见现在做设计“内眷”多严重啊，为此素材君整理了目前国内外开源的UI设计组件资源，UI设计入门必备资源。不仅可随意对...

设计经验 2021-12-29 0

LOGO设计：辅助线的重要性

辅助线是标志设计中很重要的一个部分，这篇文章中详细讲解标志设计的规范，带你理解辅助线制图规范。

设计经验 2019-04-25 0

新手科普文，图标栅格系统基础知识+案例演示

我们都知道，如果按照图标的实际尺寸设计图标的话，会出现图标视觉大小不统一的问题，那么我们应当如何解决这个问题呢？这个问题就是我们要制定系统图标栅格系统的原因。

设计经验 2018-06-26 0

UI设计基础指南

每一个技巧都结合案例讲解，案例中正确错误不是绝对的，做一个对比的参考作用。

设计经验 2017-04-14 0

Android iOS 高效切图命名方法！

本文分享一个意想不到的切图方法，可以统一切图的命名以及大小，大大提高了团队的工作效率。

设计经验 2016-09-02 0

#设计规范