EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 280+ Courses All in One Bundle
  • Login
Home Design Design Tutorials Design Basic Tutorial Figma grid
Secondary Sidebar
Design Basic Tutorial
  • Figma
    • Figma Libraries
    • Figma fonts
    • Figma Plugins
    • Figma grid
    • Figma Alternatives
  • Basics and Advanced
    • Pro Tools Version
    • What is Autodesk BIM?
    • Animation Character
    • Autodesk Pixlr
    • Sketch plugins
    • Graphic designer requirements
    • Online Gaming Platforms
    • InDesign eyedropper tool
    • InDesign rounded corners
    • InDesign align
    • InDesign resize image
    • InDesign scripts
    • InDesign export to word
    • InDesign newsletter templates
    • InDesign Magazine
    • InDesign Missing Fonts
    • InDesign line spacing
    • InDesign Fonts
    • InDesign Preview Shortcut
    • InDesign Extension
    • InDesign columns
    • InDesign overset text
    • InDesign data merge
    • InDesign grid template
    • InDesign layers
    • InDesign reset preferences
    • InDesign master pages
    • InDesign layout
    • InDesign portfolio template
    • InDesign invoice template
    • InDesign word count
    • InDesign underline
    • InDesign superscript
    • InDesign presentation templates
    • InDesign drop cap
    • InDesign how to add page numbers
    • InDesign resume template
    • InDesign import pdf
    • InDesign table of contents
    • InDesign change page size
    • InDesign book templates
    • InDesign link text boxes
    • InDesign vertical text
    • InDesign Bullet Points
    • InDesign center text vertically
    • InDesign newspaper template
    • InDesign shortcuts
    • InDesign gap tool
    • InDesign paragraph styles
    • InDesign Grid
    • InDesign margins
    • InDesign highlight text
    • InDesign Wrap Text
    • ZBrush ZRemesher
    • Animation Software
    • Principles of Animation
    • 3d Animation Software
    • 3D Modeling Software
    • 3D Software Design
    • 2D Animation Software
    • 10 Quick Tips For Adobe InDesign Users
    • ADOBE FLASH CS6
    • Affinity Photo Brushes
    • Adobe Lightroom For Free
    • Lightroom Background Color
    • Lightroom?Shortcuts
    • Lightroom XMP
    • Lightroom editing
    • Masking Layers in Adobe After Effects
    • Adobe Premiere Pro Plugins
    • Adobe Speedgrade
    • Install Adobe Creative Cloud
    • Install Adobe Premiere Pro
    • What is Adobe Creative Cloud
    • What is Adobe Illustrator
    • Adobe InDesign Templates
    • What is Adobe InDesign
    • Adobe Indesign Uses
    • InDesign Background Color
    • What is Adobe Lightroom
    • What is Adobe Muse
    • What is Adobe Prelude
    • What is Adobe Premiere Pro
    • Careers in 3D
    • Careers in 3D Modeling
    • Careers in 3D Printing
    • Best Editing Software
    • Video Editing Application
    • Video Editing Tools
    • Career In Designing
    • Careers in Game Development
    • 3D Printing Models
    • Adobe Editing Softwares
    • Types of Adobe
    • Types of Illustration
    • What is Graphic Design
    • Best Graphic Design Software
    • Best Photo Editors
    • Game Testing Interview Questions
    • VFX Softwares
    • Unity Scripting
    • Unity Principle of Design
    • Unity JSON
    • Unity webGL
    • Unity 2D
    • Unity 3D Games
    • VFX Companies
    • How To Use Indesign
    • New Features InDesign CS6
    • What is Houdini?
    • Advantages of 3D Printing
    • What is Autodesk
    • Autodesk Character Generator
    • Autodesk Vault
    • Autodesk Viewer
    • Autodesk Navisworks
    • Autodesk Desktop Connector
    • Designers and Architects
    • 2D and 3D Shapes
    • Keyboard Shortcuts for Premiere Pro
    • Unreal Engine Tutorial
    • Best Audio Editors
    • Digital Image Processing
    • What is Motion Graphics
    • What is Digital Design
    • Design Pattern Interview Questions
    • Graphic Design Interview Questions
    • UX designer Interview Questions
    • Is Unreal Engine Free
    • What Is Design Pattern
    • What is VFX
    • What is Audacity
    • What is Unreal Engine
    • What is CATIA
    • What is Blueprint
    • Sony Vegas Pro for Free
    • 3D Graphics Software
    • Best Online Photo Editor
    • Photo Editing App
    • Vector Graphics Editor
    • ArchiCAD
    • ArchiCAD Shortcuts
    • Audacity Keyboard Shortcut
    • Davinci Resolve Shortcuts
    • What is pixel art?
    • Picmonkey Alternatives
    • Adobe Flash Player Alternative
    • Pro tools shortcuts
    • Pro Tools Plugins
    • Architectural Design Software
    • Architectural Design Principles
    • Architecture Design Types
    • Architectural design tools
    • Application of Digital Image Processing
    • Digital Image Processing Fundamentals
    • OpenGL Versions
    • Revit Keyboard Shortcuts
    • Revit plugins
    • Indesign version
    • What is DirectX?
    • DirectX Versions
    • Cinema 4D Plugins
    • Cinema 4d shortcuts
    • Godot Engine
    • Godot tilemap
    • Krita Animation
    • Krita Software
    • Krita Shortcuts
    • Krita eraser
    • Krita brushes
    • Krita Pixel Art
    • Krita Plugins
    • Skencil
    • Fusion 360 Keyboard Shortcuts
    • Anim8or
    • Affinity photo plugins
    • What is Affinity Photo?
    • FL Studio Plugins
    • Vectorworks
    • Architectural Design Elements
  • Inkscape
    • What is Inkscape?
    • Inkscape layers
    • Inkscape Crop
    • Inkscape text
    • Inkscape G-code
    • Inkscape mirror
    • Inkscape rounded rectangle
    • Inkscape EPS
    • Inkscape image to vector
    • Inkscape unlock
    • Inkscape Curved Text
    • Inkscape laser cutting
    • Inkscape background color
    • Inkscape arrow
    • Inkscape vector
    • Inkscape animation
    • Inkscape 3D
    • Inkscape SVG
    • Inkscape Dark Theme
    • Inkscape trace bitmap
    • Inkscape gradient
    • Inkscape Greek Letters
    • Inkscape shadow
    • Inkscape snap to grid
    • Inkscape Fonts
    • Inkscape extensions
    • Inkscape PNG to SVG
    • Inkscape Art
    • Inkscape transparent background
    • Inkscape Alternatives
    • Inkscape Remove Background
    • Inkscape text to path
    • Inkscape logo
  • SketchUp
    • SketchUp Keyboard Shortcuts
    • SketchUp geolocation
    • SketchUp animation
    • SketchUp Change Dimensions
    • SketchUp Import
    • SketchUp 2D
    • SketchUp rendering
    • Sketch software
    • Figma Shortcuts
    • SketchUp Layers
    • SketchUp landscape design
    • SketchUp group
    • SketchUp intersect faces
    • SketchUp Rotate
    • SketchUp Architecture
    • SketchUp 3D Models
    • SketchUp Vray
    • SketchUp Units
    • SketchUp garden design
    • SketchUp Layout
    • SketchUp Mirror
    • SketchUp Extensions
    • SketchUp Unhide
    • SketchUp kitchen
    • SketchUp background
    • SketchUp library
    • SketchUp dynamic components
    • SketchUp CutList
    • SketchUp Array
    • SketchUp Woodworking
    • SketchUp resize component
    • SketchUp Ungroup
    • SketchUp Deck Design
  • GIMP
    • What is GIMP
    • GIMP Versions
    • GIMP brushes
    • GIMP line tool
    • GIMP blend tool
    • GIMP clone tool
    • GIMP magic wand tool
    • GIMP 3D Text
    • GIMP healing tool
    • GIMP Layers
    • GIMP Fonts
    • GIMP Toolbox
    • Blur Effect in GIMP
    • GIMP Change Background Color
    • GIMP Floating Selection
    • GIMP?batch processing
    • GIMP Crop
    • GIMP Filters
    • GIMP GMIC
    • GIMP?opacity
    • Animation in GIMP
    • GIMP import image
    • GIMP replace color
    • GIMP text outline
    • GIMP video editing
    • GIMP Alternatives
    • GIMP vector graphics
    • GIMP text shadow
    • GIMP resize image
    • GIMP pixel art
    • GIMP invert colors
    • GIMP GIF
    • GIMP move selection
    • GIMP normal map
    • GIMP remove background
    • GIMP rotate
    • GIMP grid
    • GIMP text effects
    • GIMP erase to transparent
    • GIMP resize layer
    • GIMP Patterns
    • GIMP extensions
    • GIMP blur background

Related Courses

Maya Course

Photoshop course

After Effects Course

Figma grid

Figma grid

Introduction to Figma grid

In this article, we are going to learn about the grid in Figma. Using the grid improves the structure and readability. It also removes the guesswork and provides a structure to the layout. Since the content is created for one screen, it is viewed on many different screens with different size and resolution to make sure the design is responsive and adapt to the display size is crucial. To accomplish this goal, we use the grid in Figma in conjunction with constraints to achieve the desired effect. So, we will apply the grid to one or more frames in our design.

Steps of Figma grid

Here are the following steps mention below

Step 1: We can either use Figma on the web, or you can download the application. In this article, we are doing an application. First, we will start with creating a Frame or press F and then select the iPad mini layout from the design tab.

Figma grid output 1

Start Your Free Design Course

3D animation, modelling, simulation, game development & others

Step 2: A new frame will be added, and its dimensions are 768 x 1024

Figma grid output 2

Step 3: Now add a layout grid; by default, it is a Grid layout, so change it to columns layout. Set the count to 6 and margin to 30, which spaces the content from the sides and gutter to 20, which spaces the content between columns.

Figma grid output 3

Step 4: Now select the rectangle from the tools panel or press R

Figma grid output 4

Step 5: Then drag the rectangle which spans the first two columns, change the fill color and give it some corner radius like 20

Figma grid output 5

Step 6: Hold the Alt key and drag the rectangle two more times to fix the grid as shown.

Figma grid output 6

Step 7:  Now, we will create a different layout in the middle of our frame; for that, we need to change the layout grid so that it hides the current grid and from the layout grid in the design panel. Then add a 4-column layout with a margin of 30 and a gutter of 20

Figma grid output 7

Step 8: Then add a rectangle and change the fill to some yellowish color

Figma grid output 8

Step 9: Now add another two rectangles as shown and a triangle by using a polygon tool. Make sure that the small square is 10 px inside from top, bottom, or left, right. One trick is to use align left or align right using design panel, which will put them in the corner, then press shift and arrow keys to move as shown.

Figma grid output 9

Step 10: Then, we have duplicated the rectangles and triangle on all 4 grids using the alt key and drag.

Figma grid output 10

Step 11: Now resizing the mainframe, we see that the rectangles on top follow the grid positions and shrink uniformly, but the section in the middle does not because though we have specified 4 columns, but still the 6 column grid is applied

Figma grid output 11

Step 12: To solve this, we will first select all the rectangles and triangles in the middle section. You can click and drag over the area to select all and then group the selection by right-clicking in the layers panel and Group selection or pressing Ctrl + G.

Figma grid output 12

Step 13: Then, in the design panel, instead of Group, select a frame from the dropdown, which is just a custom frame with dimensions of the group.

output 13

Step 14: So now what we do is that we remove the 4 column layout grid from the mainframe using the design panel and click – on the layout grid section, which should keep you with only 6 column layout. Then add a layout grid of 4 columns to the frame, which we have just created with the margin of 0 px and the gutter of 20 px.

output 14

Step 15: Now, we can adjust this frame independent of the mainframe and drag it to span across the entire mainframe with no margin from the sides. Then resize the triangles by clicking alt and dragging the sides to scale from the center and also holding shift to ensure that the aspect ratio is not changed or distorted. Also, remove those extra small rectangles and arrange them as shown.

output 15

Step 16: The constraints for Triangle are Center, Top

output 16

Step 17: The constraints for the first two small rectangles are left, top as no matter what is the layout, we want them to stay left.

output 17

Step 18: The constraints for the last two small rectangles are right, top as no matter what is the layout, we want them to stay right.

output 18

Step 19: Next, we create another rectangle spanning 3 grid as shown with left, top constraint.

output 19

Step 20: Then select text tool or press T to create a textbox spanning 3 columns with left and right, top constraint, and paste some dummy lorem ipsum text inside it.

output 20

Step 21: Now, when we change the layout, the text is messed up with the rectangle as they are still trying to follow the 6 layout grid structure

output 21

Step 22: So press Ctrl + Z to change to the default dimension of the mainframe, then select both rectangle and text, then right-click to Group selection or press Ctrl + G

output 22

Step 23: Now again, change the group to frame

output 23

Step 24: Now, in this frame, we do not want any layout grid but what we want is to set the constraint of the frame to left and right, top.

output 24

Step 25: Now, if we resize the mainframe, then the rectangle is in the proper place, and the text reflows as it should.

output 25

Step 26: Now, to quickly test our prototype on multiple devices, we just add create a new frame and set the layout grid the same as the first one.

output 26

Step 27: Then paste the first frame on the second and then drag to fit this layout. I might need to adjust some shapes to fit the grid.

output 27

Step 28: We can see that our design is fully responsive and have adapted this new form factor.

output 28

Conclusion

In this article, we have learned how we use the grid in Figma. First, we have started with a simple frame, and then we created a grid and added all the objects and shapes using multiple grid layout and frames to create a cohesive design which respects the different aspect size and aspect ratio of the screen.

Recommended Articles

This is a guide to the Figma grid. Here we discuss how we use the grid in Figma, and then we created a grid and added all the objects and shapes. You may also have a look at the following articles to learn more –

All in One Design Bundle(280+ Courses, 100+ projects)
AutoCADHoudiniAdobe Premiere ProPhotoshop
SolidworksVFX Visual EffectsCorelDrawUnreal Engine
Price
View Courses
280+ Online Courses | 100+ projects | 2000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (64,868 ratings)
  1. Figma Alternatives
  2. UI Design Tools
  3. Illustrator Grid Tool
  4. 3ds Max Interior Design
Popular Course in this category
Maya Training (10 Courses, 7+ Projects)
  10 Online Courses |  7 Hands-on Projects |  100+ Hours |  Verifiable Certificate of Completion
4.7
Price

View Course

Related Courses

Photoshop Training (10 Courses, 12+ Projects)4.9
After Effects Training (3 Courses, 3+ Projects)4.8
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Photoshop Tutorial
  • 3ds Max Tutorial
  • All Tutorials
Certification Courses
  • All Courses
  • Design Course - All in One Bundle
  • Photoshop Course
  • Maya Course
  • Unreal Engine Course
  • Unity Course
  • DaVinci Resolve Course
  • Pro Tools Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Design Course

Banner Creation, Object Selection, Sky Replacement, Advance Filters & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Design Course

3D animation, modelling, simulation, game development & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more