Figma Grids in Under 30 Minutes

Adi PurdilaMay 20, 2019Lessons: 6Length: 28 minutes

UX/UI UI Design Figma

Next lesson playing in 5 seconds

Cancel

Overview
Transcript

2.1 The Basics of Figma Grids

Ok, let’s start with the basics. Figma works with something called “frames”. These are effectively the same thing as artboards in other design apps—collections of elements in the infinite canvas. These frames can contain layout grids which allow you to properly space and align elements. In fact, Figma grids can only be applied to frames. Let’s see an example.

1.Introduction
1 lesson, 01:01

1.1
Welcome to the Course
01:01

2.Figma Grids
5 lessons, 27:21

2.1
The Basics of Figma Grids
05:29

2.2
Grid Alignment
06:17

2.3
Creating Baseline Grids
07:11

2.4
Using Grids With Layout Constraints
04:29

2.5
Using Nested Grids
03:55

Adi Purdila

Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.

adipurdila

Next lesson playing in 5 seconds

2.1 The Basics of Figma Grids

1.Introduction1 lesson, 01:01

1.1Welcome to the Course01:01

2.Figma Grids5 lessons, 27:21

2.1The Basics of Figma Grids05:29

2.2Grid Alignment06:17

2.3Creating Baseline Grids07:11

2.4Using Grids With Layout Constraints04:29

2.5Using Nested Grids03:55