# Create a Grid System for Web & UI Design in Figma In this article, I will guide you through the process of creating a grid system in Figma for web and UI design. A well-structured grid system helps designers maintain alignment, consistency, and organization across layouts, making designs more professional and user-friendly. This tutorial is especially useful for students like you or beginners looking to understand the importance of grids and how to create them step by step. --- ### Why is a Grid System Important? A grid system is important in web and UI design for several reasons: 1. **Consistency**: Grids keep your design consistent, making sure spacing, alignment, and layout are the same across different screens and devices. 2. **Efficiency**: Grids save time by reducing the need to align objects manually, letting you focus on creativity and functionality. 3. **Responsiveness**: Grids help create designs that easily adjust to various screen sizes and resolutions. 4. **User Experience**: Well-organized and consistent layouts make it easier for users to navigate and read, improving their overall experience. By following this guide, you'll learn to set up a grid system for different devices and screen sizes, and see how it fits into professional web and UI design workflows. --- # **Okay Let us Start** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728011072978/35d564b1-a43e-49c2-909b-e53d19bf6f67.png align="center") ## **Create a New Frame** * Start by creating a new frame in Figma that matches the resolution of the device you are designing for (e.g., Desktop, Tablet, Mobile). * Use the Frame Tool (F) and select your desired frame size, or you can customize the dimensions manually. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728011116231/a5a4d2fe-58b5-4579-902e-9eb5ae5fa8f1.png align="center") #### **Access the Layout Grid Options** * After selecting your frame, go to the right-hand sidebar and scroll to find the **Layout Grid** section. * Click on the “+” icon next to Layout Grid to add a grid to your frame. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728011140461/00f74eb4-1a88-47d6-b762-6aac629f7675.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728011176175/31e1eb40-b48e-411f-b2c1-47353b2b0914.png align="center") Click the dropdown --- ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728011193966/1dc1a77f-7c66-4925-8c41-52184a4ad712.png align="center") Choose columns --- ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728012585070/c8a3a8b8-1de2-4b76-9281-06228bd2caac.png align="center") Customuze the value **Count**: 12 **Type**: Stretch **Width**: Auto **Margin**: 160 **Gutter** 32 --- ### **ADD ROW LAYOUT** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728011318668/30f1c7eb-2437-47f3-8fe2-d41b76139962.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728011388424/1d8e810e-25fd-4931-8d87-f105bede9d8d.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728011457910/cd01ecbc-cbc2-4aac-ab4f-cc24288c6752.png align="center") Customize the value **Count**: 1000 **Type**: Top **height**: 8 **Offset: 0** **Gutter: 8** --- # Tablet View Add column and row layout in the tablet view **COLUMNS:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728012818392/99effeb0-fb3c-4533-968f-49b1da05d710.png align="center") Customuze the value for column **Count**: 8 **Type**: Stretch **Width**: Auto **Margin**: 32 **Gutter** 16 --- **Add for row** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728012844748/36c07a62-9f6b-41f5-ad6c-d4eb99b8abdd.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728012870620/7b90bdd0-4d7b-4022-b6a8-ca5709a1ab60.png align="center") Customize the value for row **Count**: 1000 **Type**: Top **height**: 8 **Offset: 0** **Gutter: 8** --- ### MOBILE VIEW ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728013202681/9513cc8f-e64e-459b-bc09-bfc0ec1762d1.png align="center") Customuze the value for column **Count**: 4 **Type**: Stretch **Width**: Auto **Margin**: 16 **Gutter** 16 --- Add Row Layout ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728013247969/d4b5edc7-dd12-4919-be2b-3feded3c47d9.png align="center") --- ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728013302166/ed6186c2-15e3-40ef-967c-d2bc5583d359.png align="center") Following these steps, you can create a professional grid system in Figma for web or UI design projects. This not only organizes your design visually but also makes it easier to collaborate with other designers or developers. You can view my Figma [https://www.figma.com/design/m8VZriL1zHCYerZ68cfYtH/FIGMA-FUNDAMENTALS?node-id=391-281](https://www.figma.com/design/m8VZriL1zHCYerZ68cfYtH/FIGMA-FUNDAMENTALS?node-id=391-281)