Related Videos

• Measure distances between layers

  Before you start

  Who can use this feature

  Users on any team or plan can use this feature.

  Users with can view or can edit access to a File can measure distances between objects in the canvas. You will need to have can edit access to access vector edit mode.

  Measure distances between objects in the canvas with measurement guides. This allows you to measure the distance between:

  • Vector shapes and paths
  • Text layers
  • Frames
  • Components
  • Groups
  • Guides

  

  Note: It's not currently possible to measure the distance between two guides. To calculate the distance between two guides, select the first guide and hover over the second guide. Figma will display the position of both guides on the axis so you can calculate the difference.

  Measure distances

  Measure distances between objects, even if they are nested within Frames, groups, or Components.

  1. Select the first object in the canvas.
  2. Hold down the modifier key:
     • MacOS: ⌥ Option
     • Windows: Alt
  3. Hover over the second object.
  4. Figma will display a red line between the two objects, as well as a measurement in pts (points).

  Measure distances between nested layers

  1. Select the first object in the canvas.
  2. Hold down the modifier keys:
     • MacOS: ⌘ Command ⌥ Option
     • Windows: Ctrl Alt
  3. Hover over the second object.
  4. Figma will display a red line between the two objects, as well as a measurement.

  Note: It's not currently possible to change the weight or color of the red measurement line. If you are working with similar or low-contrast colors, and want to see the measurement line, you can toggle the Fill visibility of the low contrast layer.

  Object bounds

  Figma will measure the distances between the bounds of each object - the bounding box that surrounds an object or layer.

  There are some situations of types of objects where this behavior may not be what you expect.

  • Strokes: If you have strokes applied to an object, Figma will measure to the object's bounds and not the outer limit of the stroke. You will notice this more on objects with Center or Outside stroke.
  • Text layers: Figma will measure the distance from the text layer's bounds. If you're wanting to measure to the baseline of the text, we recommend updating the bounds of the layer to match the baseline. You may also need to adjust the text resizing property.
  • Polygons and stars: If you have shapes with an odd number of sides, an object's bounding box may extend beyond the shape's dimensions.
    
    To snap the bounding box to the shape's true boundary, you can Flatten the shape. Right-click > Flatten, or use the keyboard shortcut:
    • Mac: ⌘ Command E
    • Windows: Ctrl E

  Overlapping layers

  Overlapping layers may prevent you from being able to measure the distance between nested objects. This includes masks, locked layers, and layers with low opacity fills.

  If you're having trouble measuring to a nested layer, we recommend you check the Layers Panel for any of the above layers.

  If there is a layer blocking your measurement, you can:

  • Toggle the layer's visibility to temporarily hide it. Use the keyboard shortcut:
    • MacOS: ⌘ Command Shift H
    • Windows: Ctrl Shift H
  • Toggle the Fill visibility
  • Reorder the layer so that it's below the layer you want to measure to
  • Hold down the modifier key to measure to a nested layer
    • MacOS: ⌘ Command Option
    • Windows: Ctrl Alt

  Tip! Want to add more permanent measurements to a file? Check out the Figma Measure plugin.

  Vector edit mode

  Measure between anchor points when you are in vector edit mode. Use this to measure distances between existing anchor points, or to create a new point.

  1. Select the object you want to edit.
  2. Click Edit object in the toolbar, or press the Enter / Return key.
  3. Click on an anchor point to select that point.
  4. Hold down the modifier key
     • Mac: ⌥ Option
     • Windows: Alt
  5. Hover over an existing to measure the horizontal and vertical distance between those two points.
  6. You can also use the measuring tool to see the distance between the selected point and a new anchor point. Click on the canvas to add a new point in that position.
  7. Press Enter / Return to leave vector edit mode.

  

• Create dynamic designs with auto layout

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access to a file can add Auto layout to frames and objects.

  About auto layout

  Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.

  There are lots of ways to use auto layout:

  • Create buttons that grow or shrink as you edit the text label.
  • Build lists that adapt as items are added, removed, or hidden.
  • Combine auto layout frames to build complete interfaces.

  Auto layout is a powerful feature with many moving parts and uses. In this article we'll show you how to add auto layout to a frame, and how each of its properties work.

  
  Explore the auto layout playground file in the Figma Community →

  Add auto layout

  You can add Auto layout to a frame or a selection of objects. This includes:

  • New or empty frames
  • Frames with existing content
  • Components and Component sets
  • Groups or other selections of layers and/or objects

  Note: Auto layout is only supported on frames. If you select objects that are not in a frame, Figma will create an auto layout frame around them.

  You can add auto layout to a selected frame, component, or component set from a few places:

  • Use the keyboard shortcut Shift A.
  • In the right sidebar, click the next to Auto layout with a frame selected.
  • Right-click on the frame or object and select Add Auto layout.

  Tip! You can add auto layout to components. You will need to add auto layout to each component individually. Learn how to use Auto layout in components ↓

  Auto layout properties

  Frames with auto layout have different properties to regular frames. When you apply auto layout, you'll see some changes in the right sidebar.

  You can't do the following to auto layout frames:

  • 🚫 Add Layout grids to that frame
  • 🚫 Apply Constraints to any objects within an auto layout frame
  • 🚫 Use Smart selection on any objects within the frame

  

  Direction

  Direction describes the way the auto layout frame will flow.

  • Choose vertical to add, remove, and reorder objects along the y axis. For example: objects within a list, or posts within a newsfeed or timeline.
  • Choose horizontal to add, remove, and reorder objects along the x axis. For example: a row of buttons, or icons in a mobile navigation menu.

  Figma currently supports only one direction at a time, horizontal or vertical. To build designs that use both directions, you will need to combine or nest auto layout frames.

  In the example below, we've nested a horizontal auto layout frame within a vertical auto layout frame to create a card with a title, description, and showtimes.

  

  Spacing between items

  You can control the spacing between items in an auto layout frame.

  Unlike smart selection, there isn't a way to adjust the spacing on the canvas. Instead, use the spacing fields in the Auto layout section of the right sidebar:

  • Horizontal space between
  • Vertical space between

  Enter a number in the field, nudge the values using your arrow keys, or scrub the field using your cursor.

  

  Padding

  Padding controls the empty or white space between the child objects and boundary of an auto layout frame. You can set padding uniformly, or have different values for top, right, bottom, and left padding.

  • Enter a single value in the field to set equal padding on all sides, or use CSS shorthand to set individual values. For example, entering 1,2,3,4 sets the values to top: 1, right: 2, bottom: 3, and left: 4 respectively. Or entering 1,2 sets the values to top/bottom: 1 and left/right: 2.
  • To manually set unique padding for each side, click to open the alignment and distribution settings and adjust each value individually.

  Note: Negative padding values are not supported.

  

  Tip! Press the tab key to navigate between the top, right, bottom, and left input fields.

  Alignment

  Choose how to align child objects within an auto layout frame. Both the direction of the auto layout frame and the distribution will determine what alignment options you have available.

  Unlike objects in a regular frame, you can't control the alignment of the objects individually. For that reason, you set the alignment of the child objects on the parent auto layout frame.

  Use the interactive grid to select from nine layout options for the children in a frame.

  

  If your distribution is set to Space between, you have three options for each direction:

  • vertical Auto layout: Left, Center, Right
  • horizontal Auto layout: Top, Center, Bottom

  If your distribution is set to Packed, you have the same nine options for each direction:

  • Top left
  • Top center
  • Top right
  • Left
  • Center
  • Right
  • Bottom left
  • Bottom center
  • Bottom right

  Note: When one or more resizing properties are set to hug contents, some selections won't result in visually different layouts on the canvas. This is because hug contents removes any extra space around the child objects.

  Distribution

  Once you've set alignment rules for child objects in a frame, choose how those objects will be distributed within that frame.

  In the alignment panel, click the arrow to select between:

  • Packed: Objects in a frame will be grouped together. Use this option to keep objects in a frame as close as possible and aligned together.
  • Space between: Objects in a frame have the space between them equally distributed along the direction and alignment set for the frame. Use this option to stretch objects across a frame.

  

  Resizing

  One of the most powerful functions of auto layout is its ability to control the dimensions of the objects in an Auto layout frame.

  Set resizing behavior for parent auto layout frames to adapt to any changes made to their children objects. Resizing settings can be applied for objects on both the X and Y axes individually using the dropdown menus and the resizing panel.

  

  Note: Text layers also have their own resizing properties. Within an auto layout frame, this may produce some useful results.

  If you want your auto layout frames to be completely fluid, we advise against using fixed size text boxes. Fixed size text layers won't resize to accommodate your text, which may cause overlap between layers in an auto layout frame.Learn more about text resizing →

  Fixed width or height

  When an auto layout frame is set to Fixed width or height, the values of the frame's dimensions remain the same regardless of the content within them. The size of the frame doesn't respond to changes in the objects within them, like a string of text that changes in length.

  Hug content

  Set an auto layout frame to Hug content to resize itself according to its child objects. The frame will keep the smallest possible dimensions to surround the objects within it, while respecting the padding value.

  Note: If any child objects within an auto layout frame are set to Fill container, the parent frame will no longer hug contents and become Fixed for the axis.

  Fill container

  Objects in an auto layout frame set to Fill container stretch to the width and/or height of their parent frame.

  Constraints and resizing

  You can't apply constraints to child objects within an auto layout frame. Instead, you can use the resizing property to define how objects respond as the frame, or the objects in the frame, are resized.

  You can still apply constraints to an auto layout frame if it's nested within a regular frame. You will see a Constraints and resizing section, which allows you to set both the constraints for the Auto layout frame and the resizing behavior for any objects within it.

  For example: if you created a navigation bar using auto layout, you may want it to adjust to different screen sizes. You can use constraints to make sure the navigation bar responds correctly when its parent frame is resized, and resizing to control how the objects within the navigation bar respond to those changes.

  

  Learn more about constraints →

  Add, edit, and remove objects

  Add objects to an auto layout frame

  You can add any layer or object to an auto layout frame.

  1. Click and drag an object over an auto layout frame.
  2. Use the blue indicator to choose where to place the object.

  

  Note: The object's size determines if it can be added to the auto layout frame. If any of the object's dimensions are larger than the parent frame, you won't see the option to add it to the auto layout.

  Use the modifier key to bypass Figma's default behavior and add larger objects to an auto layout. Or, to add objects to a nested Auto layout.

  Mac: ⌘ Command Windows: Ctrl

  Learn more about parent, child, and sibling relationships →

  Nest auto layout frames

  You can nest an auto layout frame within another auto layout frame. This allows you to combine horizontal and vertical layouts to create complex interfaces.

  When you nest an auto layout frame, the nested frame will have both parent and child properties.

  In our example below, there are four levels of auto layout:

  1. Button: Each button is a horizontal auto layout. This allows the button to grow and shrink as we change the label text.
  2. Button Row: We then add both buttons to another horizontal auto layout. This allows objects to respond when we make any changes to a sibling's contents.
  3. Post: We then add our buttons to a vertical auto layout with the other objects in the post. This includes a description, an image and the user's profile.
  4. Timeline: We've added three to a vertical auto layout to create our timeline. The auto layout frame is the top-level frame which sits on the canvas.

  

  You can nest auto layout frames in a couple of ways:

  • Drag an auto layout frame into an existing Auto layout frame
  • Create a new auto layout frame around a selection of Auto layout frames (and other objects).

  1. Select the auto layout frame, and the other layers you'd like to include.
  2. Use the keyboard shortcut Shift + A to add auto layout.
  3. Figma will create a frame around your selection, and add auto layout.

  Tip! You can bypass Figma's default parenting behavior. Hold down the modifier key to keep an object within the current frame, or prevent Figma from nesting it.

  • Mac: ⌘ Command
  • Windows: Ctrl

  Learn more about parent, child, and sibling relationships →

  Duplicate objects

  You can duplicate existing objects to add them to the Auto layout. Figma will add the duplicate to the right (horizontal) or below (vertical) the original object.

  1. Select a child object in an Auto layout frame.
  2. Duplicate it by using the keyboard shortcut:
     • Mac: ⌘ Command - D
     • Windows: Ctrl + D

  Arrange or reorder objects

  Note: You can't reorder objects in an instance. You will need to change the object's order in the main component, or detach the instance to reorder objects.

  Learn more about using auto layout with components →

  You can change the order that objects appear in an auto layout frame. This is only supported on main components, or auto layout frames outside of a component.

  1. Select the child object. If the layer is nested, you'll need to use the modifier key to deep select:
     • Mac: ⌘ Command
     • Windows: Ctrl
  2. There are a few ways to reorder objects:
     • Use the arrow keys on your keyboard the object to a new position.
     • Click-and-drag the object to a new position.

  Remove objects

  To remove an object from a main component or auto layout frame:

  • Drag the object outside of the auto layout frame.
  • Click the to toggle the layer visibility.
  • Select the object and press the Delete or Backspace key

  You can't delete a layer or object from an instance. If you try, Figma will only toggle the layer's visibility instead of removing it.

  Tip! Toggling a layer or object's visibility will hide it from an auto layout frame. If you want to create a gap in where the object should be, you can adjust the opacity of the object instead. In the right sidebar, update the Layer settings to 0%.

  Remove auto layout

  When you remove auto layout, you will have access to a frame's regular properties.

  There are a couple of ways to remove auto layout:

  • Right-click on the frame and select Remove auto layout
  • In the right sidebar, click the next to Auto layout

  Note: You can't use the Add auto layout keyboard shortcut to remove the auto layout property. Using this shortcut will create a new auto layout frame around your current selection.

  Prototypes with auto layout

  There are a few things to be mindful of when creating prototypes with auto layout.

  Smart Animate transitions do not take into account the background of a frame. If you want to use a Slide in or Move in transition with smart animate, you will need to add a background. You can create a rectangle within a regular frame and place your auto layout frame within it.

  Learn more about slide in and move in transitions →

  To apply scrolling overflow to a frame, you need to have content to extend beyond the frame's bounds.

  As an auto layout parent's dimensions are content-driven, it will resize to fit the objects. To replicate scrolling overflow you will need to put the auto layout inside a regular frame.

  Note: Presentation view supports scrolling of long frames by default. You will only need to use this workaround when you want to clip content.

  Use auto layout with components

  As components are frames, you can add auto layout to them. You will need to add auto layout to each component individually.There isn't currently a way to add auto layout in bulk.

  Main components

  ✅ Adjust vertical and horizontal Padding
  ✅ Adjust Spacing between objects
  ✅ Reorder objects within a component
  ✅ Add new objects

  Component instances

  ✅ Adjust vertical and horizontal Padding
  ✅ Adjust Spacing between objects
  🚫 Reorder objects within a component
  🚫 Add new objects

  Want to add icons to instances? We recommend adding a placeholder icon, with 0% opacity, to the main component. You can then swap out the icon for another component in your library.

  Updates to auto layout

  Note: The following updates were released November, 2020.

  Update alignment for older auto layout frames

  In previous versions of auto layout, alignment was controlled at the child object level. This meant you could have different alignments for different child objects in an auto layout frame.

  We found the behavior uncommon among users, so in November 2020 we moved alignment controls to the parent frame to simplify how auto layout works. With the latest update, all child objects have to be aligned the same way.

  If you already have auto layout frames with children of different alignments that were created before November 2020, you may see the following:

  

  In order to make adjustments to your auto layout values, you first need to update the frame in order to remove the individual child alignment. After updating your frame:

  

  • Figma will try to maintain your original design visually. In many cases, Figma will add intermediate frames to allow for differing alignments. These frames will be named Auto-added frame.
  • You can immediately undo this change, however, if you click away from the window or refresh the page, you will not be able to undo the update in the future.
  • If you’ve updated a main component, confirm its instances updated correctly.

  To create a design with child items with different alignment:

  1. Select the item you want to align differently.
  2. Add Auto layout to the item using the keyboard shortcut Shift A.
  3. Set the newly created frame to Fill container in the axis you want the alignment to be in.
  4. Set the alignment as needed.
• Arrange layers with Smart selection

  Who can use this feature

  Supported any team or plan

  Anyone with can edit access can rearrange layers using smart selection

  Smart selection lets you quickly adjust the arrangement, or spacing between a selection of two or more layers. Use Smart selection to:

  • Uniformly adjust the vertical and horizontal spacing between layers
  • Create uniform or non-uniform grids from a selection of layers
  • Rearrange or reorder layers in a row, column, or grid layout
  • Duplicate or delete layers from a selection and have other layers reflow

  Smart selection reduces the need for tedious repetitious tasks, saving you time and allowing you to build and arrange layouts faster.

  

  Make a Smart selection

  To make a Smart selection, all layers must be an equal distance apart and overlap on either the x or y axis (1D), or both (2D). If layers aren't an equal distance apart, you can use the Tidy up tool to rearrange layers and create a Smart selection.

  Figma supports smart selections in both one and two dimensions. One dimensional (1D) Smart selections have layers that overlap on one axis, like layers arranged in a column or row. Two dimensional (2D) Smart selection have layers that overlap on both axes, like layers arranged in a grid or table.

  1. Select any layers you'd like to include in the Smart selection. Layers don't need to be the same size or shape. You can select individual layers, groups, frames, or components. Select layers and objects →
  2. Figma adds smart handles to your selection on the canvas. Each distinct object has a pink ring in the center of it.
     
  3. When you hover over your Smart selection, additional pink handles will appear between each layer. These handles allow you to adjust the vertical or horizontal spacing between layers.

  Adjust layers in a smart selection

  Once you've made your selection, you can make changes to individual layers within your selection. This allows you to move, add or delete layers, without leaving the selection.

  • Adjust space between
  • Move or reorder
  • Duplicate layers
  • Resize layers
  • Delete layers

  You can choose which layers in the selection you'd like to adjust by marking them. The smart handle for marked layers is a solid pink circle.

  • Select a layer within the Smart selection to mark it for resizing.
  • To mark multiple layer, hold down Shift and click another layer to mark.
  • To mark all layers in a 1D selection, double-click on any layer.
  • To mark all layers on the same axis in a 2D selection, hold Shift and double-click on any layer. Double-click again to select all layers in the selection.

  Adjust space between

  Adjust the vertical or horizontal space between layers in your selection. You can adjust spacing on the canvas using the smart handles, or use the space between field in the right sidebar.

  • A

    Canvas

    1. Hover over one of the smart handles between layers. An arrow will appear where the cursor was.
    2. Click and drag the handle to adjust the space between layers. A tooltip above your cursor shows the current space between layers, in pixels.
       
       • Up to decrease the vertical space
       • Down to increase the vertical space
       • Left to decrease the horizontal space
       • Right to increase the horizontal space
    3. Release the cursor to apply your changes.

    

    Tip! Hold down Shift while scrolling to adjust the increments by the amount specified in your Big nudge settings. Set small or big nudges values →

  • B

    Right sidebar

    You can also update the space between property in the right sidebar. Depending on your selection, you'll see two fields in the sidebar.

    Enter a number directly in the field, or hover the cursor over the icon to scrub the field.

    • horizontal space between
    • vertical space between

    

  Reorder or rearrange layers

  You can also change the order or position that layers appear in a Smart selection. You can rearrange a single layer in a 2D selection, or multiple layers in a 1D selection.

  1. Click on the pink ring on the center of the layer to mark it. The smart handle for marked layers is a solid pink circle.
  2. For 1D Selections only: Hold down the Shift key and click on another layer to also mark it.
  3. Click and drag the layers(s) to another location within the selection. A blue indicator shows you where you can move the layer to.
  4. Release to confirm the new position of the layers.

  

  Things to note:

  • Rearranging layers in the selection doesn't change the layer hierarchy in the Layers panel.
  • If you are using Smart selection with frames, you can use the Resize to fit to adjust the frame to the size of the layers within it. Resize to fit is in the positioning section of the right sidebar.
  • 2D Smart selections work more like lists within lists, versus a perfect grid layout. The default behavior when rearranging 2D selections, is to add new layers to an existing column or row.
  • If you would like to swap one layer's position for another, you can hold down the Command (Mac) or Ctrl (Windows) key.

  Duplicate layers

  You can create a duplicate of any layer within a Smart selection. You can duplicate more than one layer at a time in either a 1D or 2D selection.

  1. Make your Smart selection.
  2. Click the pink handle on the center of a layer to mark it. Hold down Shift and click to select more layers.
  3. Duplicate the layer using any of the following methods:
     • Use the Keyboard shortcut:

       Mac: ⌘ D

       Windows: Ctrl D

     • Open the main menu and search for Duplicate Selection in Place.
  4. Figma will copy the layer and paste it next to the original layer. The other layers in the smart selection will move to accommodate it.

  What to expect

  • For layers in a 1D selection (row): Figma places the duplicated layer to the right of the original.
  • For layers in a 1D selection (column), Figma places the duplicated layer below the original.
  • For Layers in a 2D selection (grid), Figma places the duplicated layer below the original.

  Resize layers

  Smart selection lets you resize layers within the selection, while maintaining an equal distance between layers. For example: you can adjust the height of the layer to indicate a longer message in the newsfeed. Figma will reposition other layers to keep the spacing consistent between layers.

  Note: You can resize one layer within a 2D selection, or multiple layers within a 1D selection.

  

  Tip! To resize a layer from the center, hold down Option (Mac) or Alt (Windows).

  Delete layers

  You can also delete individual layers within a Smart selection. You can delete more than one layer at a time within either a 1D or 2D Smart selection.

  1. Make your smart selection.
  2. Click the pink handle in the center of a layer to mark it. Hold down Shift and click on another layer to mark it.
  3. Delete marked layers by pressing the Delete or Backspace key on your keyboard.
  4. The other layers in the selection will rearrange to fill the gap created.

  What to expect

  • For layers in a horizontal 1D selection: layers move to the left to fill any space created.
  • For layers in a vertical 1D selection: layers will move up to fill any space created.
  • For layers in a 2D selection: layers will move up to fill any space created.
• Add Guides to the Canvas or a Frame

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Guides.

  Users with View access to a File can toggle Rulers on and off to show/hide Guides.

  Looking for more? Check out our blog post about Guides...

  Guides are helpful when you're trying to precisely position layers or objects in your designs. They can be added to Frames to create useful templates to align content that might be changing.

  Video Tutorial

   

   

  Adding Guides

  Toggle Rulers

  In order to use Guides, you will first need to toggle Rulers "on".

  You can do this with the   Shift + R   keyboard shortcut, or by:

  1. Clicking the menu icon in the upper left corner of the Editor
  2. Search for “Rulers”
  3. Choose the option for Rulers from the menu.

  

  Create a new guide

  Click and drag on the horizontal and vertical rulers to pull guides onto your canvas.

  

  Figma has both Canvas and Frame level Guides for positioning and aligning objects in your designs. 

  The dotted line acts as visual indicator that your guide is intersecting with a frame on the canvas.

  

  Viewing Distances (Redlines)

  With a top level frame selected, hold Option (macOS) or Control (Windows) as you click and drag out a guide. You will see the distance (in pixels) between your guide and the frame. This distance is also reflected in the ruler. When the guide intersects your frame it will begin measuring distances between the guide and objects in the frame. 

  In addition, with a frame selected the rulers highlight in blue, calling attention to the coordinates of the frame on your canvas. When you select objects in the frame, you'll see the same blue highlights for the selected object. 

  

  Guides inside frames are recognized as another object in the frame. This means you can view redline distances between the guide itself and other elements in the frame, as well as the parent frame. 

  Removing Guides

  In addition to clicking and dragging the guide back to the rulers, you can also:

  1. Hover over the guide to reveal the double-sided arrow
  2. Single click (the guide will turn blue)
  3. Use Delete  on your keyboard to remove the guide

  Note: Looking for more? Check out our blog post about Guides as well.

• Create layout grids with grids, columns, and rows

  When designing for the screen, there are any number of layouts to contend with. To allow our designs to adapt, we need both precision and flexibility.

  The pixel grid gives us precision and control over placement. A layout grid gives us greater flexibility in implementing our designs.

  Learn more about layout grids

  • Check out our answers to Frequently asked questions at the bottom of this page.
  • Learn more about how you can use layout grids in our blog post: Grid Pro Quo.

  What are layout grids

  Layout grids help us to align objects within a frame.  They provide visual structure to our designs. They help our designs remain logical and consistent across different platforms and devices.

  Layout grids aren't reliant on the pixel grid. This means they aren't dependent on a specific resolution or dimensions.

  You can only apply layout grids to frames. This could be a top-level frame, or a frame nested within another frame.

  

  Layout grids let you:

  • Establish consistency across multiple platforms.
  • Make fewer decisions when defining layouts.
  • Reduce the time taken to define layouts for mock-ups or wireframes.
  • Support diverse layout techniques like galleries, icons, or entire page layouts.

  Note: Learn more about using grid systems with Figma, in the blog post: Grid Systems for Screen Design

  Applying layout grids

  You can apply a layout grid to any frame. Remember that components are also frames, so you can apply them to components too.

  You can find the layout grid settings in the right sidebar:

  To apply a layout grid:

  1. Select the frame in the canvas or the Layers panel of the left sidebar:
  2. Click next to Layout grids in the right sidebar:
  3. A uniform grid will be applied to the frame by default:
  4. You can then click to open the layout grid settings and update any properties:

  Layout grid properties

  There are three types of layout grids available; a uniform square Grid, Columns, and Rows.

  Uniform grids let you define both the size and color of the grid. Square grids are great for situations requiring precision, like designing symbols or icons.

  With column and row grids, you can define the width or height of the grid, as well as your gutter and margins. They are ideal for designing responsive interfaces for web and mobile.

  You can use grids on their own or combine them to support more complex layouts.

  Learn more about Combining layout grids ↓

  Changing the layout grid

  To select the grid type:

  1. Click in the right sidebar:
  2. Click in the layout grid properties window:
  3. You can choose a:
     • Uniform Grid
     • Grid with Columns
     • Grid with Rows

  Uniform grid properties

  If you select a uniform grid, you can choose the size of the grid. This determines how many pixels each square will contain.

  For example: In a default 10pt grid, each square of the grid will contain 100 pixels (10px by 10px).

  1. Click to open the layout grid settings.
  2. Update the Size field to the desired dimensions: 
  3. Click to close the window and return to the canvas: 

  Column and row properties

  You can apply layout grids as columns, rows, or have both. Column and row grids give you greater control and flexibility over your layout.

  You can define the following properties of your grid:

  Grid properties

  

  • The Count determines how many columns or rows there are in the grid.
  • The Gutter defines the distance between each column or row.
  • The Margin is the distance from the edge that the column or row starts. This applies to Stretch grids only.
  • The Offset is the distance from the top or left the column or row starts from. This applies to rows set to top and columns set to left.

  Grid type

  There are two different types of layout grids: Fixed and Stretchy.

  For Fixed layout grids, you can determine both the Width (of the columns) or Height (of the rows), as well as the Count (number) of columns or rows.

  The layout grid can be fixed to:

  • The Top or the Center of the frame for Rows
  • The Left or the Center of the frame for Columns

  

  Stretchy grids will adapt to the size of the frame. This allows your designs to respond accordingly when the frame is resized.

  The Width or Height of the grid will be automatically determined, based on the frame size.

  

  Color

  The default color of a layout grid is red (#FF0000), with an opacity of 10%.

  You are able to change the Color and Opacity of any layout grid:

  1. Click in the right sidebar.
  2. Click on the Color swatch: 
  3. Use the color picker to select a new color:
  4. Adjust the opacity if needed.

  Combine layout grids

  As we mentioned above, you can apply many layout grids to a single frame. This is handy when developing more complex Layouts.

  For example: You can apply both Column and Row layout grids for more control over vertical and horizontal alignment.

  1. Select the frame you would like to add another layout grid to.
  2. Click next to Layout grids in the right sidebar.
  3. Select the layout grid in the dropdown provided.
  4. Define any other relevant properties.
  5. Repeat to add more layout grids to the frame.

  Toggle layout grids

  You can toggle the visibility of your layout grids. This is great for situations when you need to hide your layout grids, without removing them entirely.

  Layout grids will still work, even when they aren't visible.

  Toggle all layout grids

  You can toggle the visibility on all layout grids in your file, at once.

  1. Click on the Zoom percentage in the top-right corner of your screen. This will open the View Settings menu.
  2. If there is no check next to the Layout grids option, clicking this will display them.
  3. If there is a check already showing, clicking Layout grids will hide them:
  4. Or, you can use the Keyboard Shortcuts to toggle layout grids off and on:
     • Mac: ⌃ Control – G
     • Windows: Control + Shift + 4

  

  Toggle individual layout grids

  If you would like to enable or disable a single layout grid, you can do this in the Properties Panel.

  1. Select the relevant frame.
  2. Find the Layout grids section in the right sidebar.
  3. Click next to the layout grid to toggle it off:
  4. Click next to the layout grid to toggle it on: 

  Layout grid styles

  Once you have perfected the ideal layout grid, you can create a Style to reuse it across your designs.

  Learn more about creating styles →

  Create a layout style

  1. Select a frame in the canvas with the layout grid(s) applied.
  2. Click in the Layout grid section of the right sidebar.
  3. Click in the Grid styles window:
  4. Give the layout grid style a memorable name: 
  5. Click Create style to complete the process.

  Apply a layout style

  1. Create or select a frame in the canvas.
  2. In the right sidebar, click .
  3. Select a layout grid style from the window:
  4. The layout grid will be applied to the selected frame: 

  Note: Related Components will be determined by:

  1. Select the frame you want to copy.
  2. Click on the layout grid in the right sidebar.
  3. When it is highlighted, use the keyboard shortcuts to copy the layout grid:
     • Mac: ⌘ Command + C
     • Windows: Ctrl + C
  4. Select the frame you want to apply the layout grid to.
  5. Use the keyboard shortcut to paste the layout grid:
     • Mac: ⌘ Command + V
     • Windows: Ctrl + V

  Work with grids and constraints

  For more complex designs, we need precision and flexibility to ensure our designs behave when resized.

  Constraints are great at giving you a basic framework for where objects are positioned within a frame. When combined with layout grids, they provide the framework for a powerful layout system.

  Learn more about combining grids and constraints →

  8-point grid

  The 8-point grid system is a popular tool for designing UI layouts. It involves using multiples of 8 to define the placement of objects within your design.

  You can use this system when designing for fixed constraints, like a mobile app. But it can also be a useful tool when designing responsive layouts.

  There are two common methods for implementing the 8-point system:

  • Hard grid: This involves placing objects on a fixed grid with 8-point increments. In Figma, this would involve applying a uniform grid to the frame with a size of 8.
  • Soft grid: This involves placing objects at distances from each other that are divisible by 8. This would involve applying a row or column layout grid with properties divisible by 8.

  Learn more about the 8-point grid in this Spec.fm post →

  Frequently asked questions

  Can I toggle all layout grids at once?

  Yes. This can be done from the View Settings menu in the top-right corner of Figma.

  Learn more in the Toggling layout grids section ↑

  Why aren't my layout grids showing?

  There are a couple of reasons why a layout grid may not be showing:

  • The layout grid has been toggled off in the right sidebar.
  • Layout grids have been toggled off globally.
  • The selected layer isn't a frame. Layout grids can only be applied to frames.
  • The frame has been rotated. Make sure your objects have their rotation set to 0º before applying a layout grid.

  How do I copy layout grids?

  You can copy a single layout grid and apply this to another Frame. Or, you can create a layout grid style that can be reused across your designs.

  Learn more in our Layout grid styles section ↑

• Combine Layout Grids and Constraints

  Before you start

  Who can use this feature

  Users on any team or plan

  Users with Edit access to a File can use Layout Grids and Constraints

  Constraints allow you to define how objects react when you resize their parent frame. Constraints can control both an object's relative position and size.

  Layout Grids are visual aids that help you align objects within frames. When you use a Layout Grid within a frame, Figma aligns objects in that frame to the grid.

  You can combine Layout Grids with Constraints to create powerful and flexible layouts. This gives you more granular control over how objects respond as you resize them.

  Layout Grids can have Fixed dimensions or Stretch as you resize the frame. The type of Layout Grid will determine whether Figma prioritizes the grid or any Constraints.

  In our example below, we have applied center Constraints to the plus icon in our cards. We can see how Figma determines that object's position, depending on the type of Layout Grid we use.

  

  Stretch Layout Grids

  If your Grids are set to Stretch, Figma will base an object’s Constraints on the grid's nearest Column or Row.

  Stretch Layout Grids adapt to the size of the frame. This allows your designs to respond when you resize the frame. Figma will set the width and height of the grid so that it corresponds to the frame size.

  When you use Stretch Layout Grids, Figma into account the object's Constraints, relative to the Layout Grid.

  In our example below, the cards in our design have Stretch Layout Grids. Our left screen uses the frame preset for the iPhone 11 Pro, and the right uses the iPad Pro 11".

  We can see that Figma has stretched the Layout Grid to match the card's new dimensions. We can also see that the plus icon is still in the center of the right grid column.

  

  Fixed Layout Grids

  Fixed Layout Grids let you choose how many columns and rows are in your grid. You can then define both the width of the columns and the height of the rows.

  You can then fix the position of a fixed Layout Grid in the parent frame:

  • Row: Fix the grid to the top or center of the frame.
  • Column: Fix the grid to the left or the center of the frame.

  When you use Fixed Layout Grids, Figma will honor Constraints in relation to the frame and not the grid.

  In our example below, the cards in our design use a Fixed Layout Grid. Our left screen uses the frame preset for the iPhone 11 Pro, and the right uses the iPad Pro 11".

  Our plus icon uses center Constraints. We can see that Figma has set the object's position in relation to the frame and not the Layout Grid. 

  Tip! You can nest frames within other frames for even greater control. This allows you to define different behavior between Frames or objects.
  
  If you’re familiar with HTML, this works like a <div> element works in a webpage. Learn more about Grid Systems for screen design.