Create a new Figma grid style
Tags: figmatutorial, figma, figmatips, uidesign
Published: 2022-01-21 00:34:42

---
title: Create a new Figma grid style
published: true
date: 2022-01-08 19:55:00 UTC
tags: figmatutorial,figma,figmatips,uidesign
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*9N0TY5RqtmJUAVuB.jpg)

In this quick post, we’ll see how to create, apply, Edit, and delete a grid style in Figma.

### Watch Video Tutorial

{% youtube ssJHPgJc4PA %}

### Create a Grid Style

To create a new **Grid style** , let’s start by creating a new frame and go to **Layout grid** section and add new Grid.

![](https://cdn-images-1.medium.com/max/978/0*M_Lpx_88EP_VOIdS.png)

![](https://cdn-images-1.medium.com/max/787/0*D_7598dfZWPIa92x.png)

- Next, select your grid element to open the Layout grid’s settings modal.

![](https://cdn-images-1.medium.com/max/986/0*nlR3MggILaPMSIQ4.png)

- Select the **Grid menu** and choose **Column** in the left corner of the grid modal.

![](https://cdn-images-1.medium.com/max/974/0*iNZNf8LvsONUTWBi.png)

Next, add the following Grid settings:

**Count** : 6

**Type** : Stretch

**Gutter:** 20

![](https://cdn-images-1.medium.com/max/1024/0*CtkBslaSKvILGLKh.png)

![](https://cdn-images-1.medium.com/max/887/0*6j4fQ9rdYwOxiKbd.png)

- After that, hit the **four dots** icons in the **Grid** section to trigger the grid styles modal.
- Click the **+** icon in the right corner of the **Grid styles**  modal.

![](https://cdn-images-1.medium.com/max/478/0*KtrYKfecVffZJfUe.png)

- Let’s give our style the name of **Grid Style 1** then hit **Create style**  button.

![](https://cdn-images-1.medium.com/max/430/0*IPPQguZZg4XN6EbM.png)

You can create as much styles as you want.

### Apply a Grid Style to a layer

To apply a Grid style to a new frame, select your frame and head to the **Grid** section in the right-hand sidebar.

- Hit the **four dots** icon in the right corner of the **Grid** section to trigger the styles modal, then select **Grid styles 1** to apply the style to your frame layer.

![](https://cdn-images-1.medium.com/max/490/0*_vXQa4edS3JgZuCx.png)

![](https://cdn-images-1.medium.com/max/791/0*6S_C3xAAeUM14Dpc.png)

### Access your File’s Grid Styles

To display and access all your file’s styles, all you have to do is to click on the file’s gray. All your style will be displayed in the right-hand sidebar.

![](https://cdn-images-1.medium.com/max/496/0*bEziGXh1lXWT1snR.png)

### Edit a Grid Style

To edit a **Grid style** , click on the file’s gray backdrop to display your styles. **Right-Click** on the Grid style you want to edit and select **Edit style** in the context menu.

![](https://cdn-images-1.medium.com/max/492/0*HRrZVqSKpS0IxSX_.png)

Once you edit a certain style, the change of the color will be applied automatically to every layer using that same style.

### Delete a Grid Style

To delete a **Grid style** from your Figma file, click on the file’s gray backdrop to display your styles. **Right-Click** on the **Grid style** you want to delete and select **Delete style** in the context menu.

![](https://cdn-images-1.medium.com/max/480/0*_zKpgIrD2f6H_KpL.png)

That’s everything about creating a Grid style in Figma. in the next posts we’ll cover more concerning Figma styles.

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/create-a-new-figma-grid-style/) _on January 8, 2022._