【UI设计】Figma —— 响应式栅格系统

目录

• 什么是栅格系统
• 如何设置栅格系统
• 响应式设计的定义
• 如何实现响应式布局
• 小结

什么是栅格系统

栅格系统（Grid Systems），或称网格布局体系，是由一系列水平和垂直基准线构成的结构化框架。

此系统旨在优化页面内容的组织方式，确立统一的对齐准则与元素排列顺序。

为什么栅格在网页设计中很重要？

栅格系统为设计师提供了一种强大且可复用的基础架构，使得设计师能够精确地控制页面元素的位置、大小以及相互之间的关系。

这种高度结构化的框架不仅简化了设计流程，还有效地帮助设计师确保页面布局的平衡与整体设计的一致性。

如何设置栅格系统

1. 创建页面

   首先打开 Figma，新建草稿后，点击快捷键 “F” 创建页面。

   设计页面时，我们通常从小尺寸做起，缘由后续详述。

   • 网页常用的页面宽度有 1024、1480、1920 等，高度不限。
   • 有效可视区为 950px ~ 1200px