Related Videos

• View and adjust colors in a mixed selection

  Before you Start

  Who can use this feature

  Users on Any plan can use paints in their designs

  Users with Edit access can view and update paint properties in a mixed selection

  The Selection Colors feature allows you to view and adjust any colors applied to objects in a selection.

  • Select objects or layers and view or adjust individual colors in the selection.
  • Select a parent object, like a Frame, Group, or Component. View and adjust the color properties of any child objects.

  Note: You can still adjust the properties of the parent object in the Properties Panel. This allows you to update Fill and Stroke properties of the Frame, without affecting child objects.

  Selection colors include:

  ✅ Fills
  ✅ Strokes
  ✅ Solid colors
  ✅ Gradients (linear, radial, angular, diamond)
  ✅ Boolean groups*

  Selection colors do not include:

  🚫 Images
  🚫 Hidden fills
  🚫 Masks

  *Note: Only colors applied to the combined Boolean group will be included in the Selection Colors. Colors applied to any child objects won't show up in the Selection Colors section.

  View Selection Colors

  View colors in your selection in the Selection Colors of the Properties Panel.

  We group colors as Paints (Fills or Strokes that aren't Styles) and Color Styles. We represent Paints as a square swatch and an opacity field, and Styles as a circular swatch. A paint or Style will only appear once in the Selection colors section.

  By default, we show the three most frequently used Paints and Styles. Click the See all colors link to view the rest of the colors used in the selection.

  

  • Click on a color to open the Color picker. This allows you to adjust the paint type, color, hue, opacity, and blend mode. Or, pick another color from your Document colors.

  • Click on a style to open the Style modal. This allows you to select from your list of local styles, or styles from enabled libraries.

  We'll update every object that uses that fill or style. You can choose to apply a color that's already used in the selection. We won't update the Selection colors section until you close the Color Picker.

  Note: The add style button + is not available via the Selection colors section.

  To create a style, select an individual object that uses that color as a Fill or Stroke property. Then, create a style from the Fill or Stroke section of the Properties Panel.

  Want to swap two colors around? We won't update the Selection colors section until you close the Color Picker.

  1. Click on the first color you want to swap.
  2. Select the second color in the Document colors section of the Color picker.
  3. Without closing the Color picker, click on the second color in the Selection Colors section.
  4. Select the first color in the Document colors section.
  5. Close the Color picker.
• Color profiles in Figma

  Color profiles define how colors are reflected on a digital display. In Figma, color profiles affect how color values are represented in the Color picker.

  Regardless of your color profile (or color space) preferences, Figma exports all assets using the sRGB color space.

  Want to adjust your Color space in Figma ? Learn more about using Figma in a different color space in our Manage color space in the Desktop app article.

  Color profiles in Figma

  There are five color profiles available in Figma:

  • HEX
  • HSB
  • HSL
  • CSS
  • RGB

  By default, we show color values using the HEX color profile.

  

  HEX

  Is the default color profile in Figma and refers to the Hexadecimal color. This is an alphanumeric shorthand representative of the RGB values.

  “Hexcodes” are commonly used by designers and developers in web, or digital design.

  RGB

  RGB or Red Green Blue is the most commonly used color profile.

  Every color that is rendered on a monitor or screen will be made up of varying amounts of Red Green and Blue.

  Heard of RGBa? The a in RGBa stands for the alpha channel, which represents the Opacity of the color (from 100% to 0%).

  HSB

  Hue Saturation Brightness is an alternative representation of the RGB model.

  This is based around how the human eye perceives color, versus how a display would (in RGB).

  All color profiles will have an additional Alpha channel (or value), which represents the Opacity of the color. This ranges from 100% - 0%.

  HSL

  Hue Saturation Luminance is another color space that is modelled around how the human eye perceives color.

  Like HSB, it is an alternative representation of the RGB model. The main difference between HSB and HSL is how saturation and lightness are treated.

  CSS

  The CSS color profile allows you to view or enter RGBa values using CSS syntax. This includes the format, followed by the values for each color: rgba(47, 128, 237, 1)

  Want to handoff colors to a web developer? The CSS color profile will give you a CSS friendly format of the currently selected color. Copy and paste this directly into a stylesheet, formatting included. Learn more about Developer Handoff.

  View Color profiles in the Color Picker

  While Figma exports everything in the sRGB color pofile, you may want to view colors in another color profile.

  View and update colors across different color profiles in the Color picker.

  1. Click on the Fill or Stroke in the Properties Panel to open the Color picker.

  2. Below the Hue and Opacity sliders you can see the current color profile and the corresponding values.

  3. Use the drop down to switch color profiles. Choose between HEX, HSB, HSL, CSS and RGB:

  4. Figma will update the values so they match the color profile you selected.

• Rename Layers

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with Edit access to a File to rename layers

  Establishing a clear naming structure or hierarchy makes managing layers in your files much easier. The Rename Layers function will allow you to quickly rename multiple layers at once.

  

  Rename layers modal

  You can access the Rename Layers Modal a number of different ways.

  1. Select the layers you want to rename from the canvas, or in the layers panel:
  2. To toggle the Rename Layers Modal you can then do one of the following:
     1. Right-click on the layers in the canvas and choose Rename Layers:
     2. Right-click on the layers in the panel and choose Rename Layers:
     3. Use the Keyboard Shortcuts:
        • Mac: Command ⌘ R
        • Windows: Ctrl R
  3. The Rename Layers Modal will open above the canvas:

  Rename layers in bulk

  If you're wanting to simply update the selected layers to the same name, you can add the desired name to the Rename to field and click Rename.

  However, it's more likely that you will want to update each layer to have a slightly different name, allowing you to better distinguish objects in the layers panel.

  Below the Rename to field you will see some buttons. When clicked, these buttons will add a special code to the Rename to field that allows you to generate slightly different names for each layer.

  • The Current name button represents the layer's current name. 
  • The Number ↑ button inserts a number into each layer's name, in an ascending order.
  • The Number ↓ button inserts a number into each layer's name, in an descending order.

  To better explain how this works, we'll show you some examples.

  Example 1: Rename every layer to the exact same name

  If you want to update all of your selected layers to have the same name (e.g. Icon):

  1. Select the layers you want to update.
  2. Use the Keyboard Shortcuts to open the Rename Layer Modal
     • Mac: Command ⌘ R
     • Windows: Ctrl R
  3. Enter the new name into the Rename to field.
  4. Click the Rename button to apply.
  5. The selected layers will be updated to that name.

  Example 2: Rename each layer with a numerical suffix

  If you have a bunch of similar layers that you want to have the same name, but still be distinguishable, you can add a number to the end (or beginning) of the layer's name (e.g. Icon_1).

  1. Select the layers you want to rename.
  2. Right-click on the layers and select Rename layers.
  3. Enter the name you want to call the layers in the Rename to field.
  4. Click the Number ↑ or Number ↓ button. This adds a code to the name, that tells Figma to add a different number to the end of each layer's name.
  5. If you like, you can set the Start ascending from / Stop descending at field.
  6. You will see a Preview of the updated names on the left. Click the Rename button to apply. 
  7. The selected layers will be updated to the new name, with a unique number at the end.

  Example 3: Add a prefix to every layer

  If you already have a unique name for each layer, but would like to group them for faster editing, you can add a prefix to the existing name (e.g. Icon_Home).

  1. Select the layers you want to rename.
  2. Right-click on the layers in the layers panel and select Rename layers.
  3. Enter the prefix you'd like to add to the layer name.
  4. Click the Current Name button to add the current layer name after the prefix.
  5. You will see a Preview of the updated names on the left. Click the Rename button to apply.
  6. The selected layers will be updated to start with the prefix, followed by the original name:

  Rename part of a layer's name

  While you were using the modal, you may have noticed a " Match" field. This allows you to identify which part of the layer's name you want to update.
  
  By leaving this blank you can update the entire name, but you can also use this field to remove or update part of the layer's name (e.g. change the " Icon/" part in the name "Icon/Home" to "Image/").

  1. Select the layers you want to rename.
  2. In the Match field, enter the part of the name you'd like to update.
  3. Enter what you'd like to replace that part of the name with. This will only replace the part of the layer's name identified in the Match field.
  4. You will see a Preview of the updated names on the left. Click the Rename button to apply.

  Use Regular Expressions (Advanced)

  If you're familiar with, or confident using regular expressions, then you can also use these in the Rename Layers Modal. This is particularly handy if you want to change the syntax of the name (e.g. change "Icon_003" to  "003_Icon").

  1. Select the layers you want to rename.
  2. Use the Keyboard Shortcuts to open the Rename Layer Modal:
     • Mac: [ Command ⌘] + [R]       
     • Windows: [ Ctrl] + [R] 
  3. Type ([a-zA-Z]+)_(\d+) in the Match field.
  4. Type $2_$1 in the Replace field.
  5. You will see a Preview of the updated names on the left. 
  6. Click the Rename button to apply.

  New to Regular Expressions or need a refresh? Mozilla have a handy reference guide on their website.

  Some common patterns to get you started are:

  • $1, $2, etc – the first, second, etc., match marked by parentheses.
  • $& – the entire thing that was matched.
  • $` – everything before the thing that was matched.
  • $’ – everything after the thing that was matched.
  • $n – an increasing counter. (nonstandard).
  • $nnn – an increasing counter with three digits. (nonstandard)
  • $NNN –  a decreasing counter with three digits. (nonstandard)

  If you want to test your regular expressions before entering them you can try them out here https://regexr.com/

• Lock and unlock layers

  Before you Start

  Who can use this feature

  Users on Any plan have access to the Layers Panel in the Editor

  Only users with Edit access can lock and unlock layers

  You can lock Layers to protect them from accidental edits.

  When you lock a Layer:

  • You will not be able to interact with it, or move it around in the canvas.
  • You can still select the layer in the Layers Panel
  • It's still possible to adjust the properties of a locked layer

  If you lock a parent Frame or Group, then any child layers of that Frame or Group will also be locked. You will have the option to unlock any child layers individually.

  Note: It's possible to select locked layers via the right-click menu. Right-click on the layer, choose Select layer and then select the layer from the options. Locked layers have a padlock next to them.

  You can lock or unlock a Layer in a few places.

  Keyboard shortcuts

  • macOS: Command   Shift L
  • Windows: Ctrl Shift L

  Canvas

  1. Right-click on the layer in the canvas.
  2. Select Lock or Unlock from the options.

  Layers Panel

  1. Hover over the Layer in the Layers Panel until the padlock icon appears:
  2. Click the padlock to lock the Layer:
  3. If this is a Frame or Group, then any children of that Frame/Group will also be locked.  You can click the dot next to the child Layer to unlock them individually: 
  4. You will no longer be able to edit the Layer in the canvas.
  5. To unlock the Layer, click on the padlock again: 

  Tip! You can lock multiple layers at once. Click on the eye/padlock icon and drag across the layers you want to update.

• Toggle visibility to hide layers

  Before you Start

  Who can use this feature

  Users on Any plan can access this functionality

  Only users with Edit access can toggle layer visibility off and on

  You can toggle a layer's visibility in the Layers Panel. You can still change the position, or adjust the properties of a hidden layer.

  Visibility for layers (and properties) is shown with an eye icon.

  There are a few ways to toggle a layer's visibility.

  Keyboard shortcuts

  Toggle a layer's visibility off and on using the keyboard shortcut:

  • Mac:   Command Shift H
  • Windows:   Control Shift H

  Layers Panel

  You can also toggle a layer's visibility in the Layers Panel. You can toggle layers individually, or hide all child objects in a group or Frame.

  1. Hover over the layer, group or Frame in the Layers Panel.
  2. Click on the visibility icon (the eye) to toggle the layer's visibility off.
  3. The eye will close and the layer will be hidden in the canvas. It will also appear as inactive (greyed out) in the Layers Panel.
  4. Click the closed eye icon to toggle the layer's visibility on again. 

  Note: When you hide a layer, you won't be able to select it in the canvas. This includes using the Select Layer option in the right-click menu. You can still select the layer in the Layers Panel.

• Add fills to text and objects

  Before you Start

  Who can use this feature

  Users on Any plan can use Fills in their designs

  Users with Edit access to add or adjust Fills

  Paints are colors, gradients, or images. Fills are just one of the ways you can use paints in Figma.

  Apply paints to text layers, or any vector object, this includes shapes, vector networks, and boolean groups.

  Add, adjust and remove fills in the Fill section of the Properties Panel.

  

  Add fills

  Add fills to Text layers, Frames, and any vector objects. You can even add more than one fill to a single layer. This allows you to layer gradients over images, or apply blend modes to create unique effects.

  We treat each fill as a unique layer, so you can adjust the properties individually. You can even toggle the visibility of each fill independently.

  1. Select the layer(s) you want to add a fill to.
  2. In the Fill section of the Properties Panel, click the plus + button to add a fill to the layer.
  3. Figma will add a default Solid fill with a hex value of C4C4C4. Click on the fill swatch to open the color picker: 
  4. From the color picker you can:
     1. Select a Paint type: a Solid color, a Gradient, or an Image/GIF.
     2. Apply a Blend mode.
     3. Use the Color palette in the body of the modal to select a color.
     4. Use the Eyedropper tool to select any color from an image or object in the canvas.
     5. Adjust the Hue using the slider.
     6. Adjust the Opacity using the bottom slider, or the field.
     7. View the color value across each color profile.
     8. Use the Document colors field to select a palette from local colors, styles, and styles from enabled libraries.

     Learn more about using the Color picker.

     

  Want to reuse fills across your designs? Create Color Styles from fills or strokes and apply them to objects in the canvas.

  Adjust fills

  Add, remove or adjust fill properties at any time.

  1. Make a selection in the canvas.
  2. If the layers share the same Fill properties, you can adjust them in the Fill section of the Properties Panel.
  3. If the layers have different Fill properties, you can adjust each Fill individually in the Selection colors section of the Properties Panel.

  

  Selection colors allows you to view and adjust the paints applied to a selection, individually. This also allows you to change the Fills of child objects, when you have the parent selected.

  Reorder fills

  Want to change the order that fills appear? Click on the left edge of the fill, closest to the swatch, and drag it to the new position.

  Toggle visibility

  Want to temporarily hide a fill? Click the eye icon to toggle the visibility of the fill off and on.

  

  Remove fills

  If you don't need a fill anymore, you can remove it. Click the minus icon - to remove the fill.

• Apply paints with the color picker

  Before you Start

  Who can use this feature

  Paints are available on Any plan

  Users will need Edit access to the File to use the color picker

  Paints can be colors, gradients, or images. The Color picker allows you to apply paints to text layers, strokes and other vector objects.

  When you select a layer or object, you can access the Color picker from the Fill or Stroke section of the Properties Panel.

  When you select more than one layer or object, you can access the Color picker from the Selection colors section instead.

  Note: If there isn't a Fill or Stroke applied to the object, you'll need to add one before you can access the Color picker.

  Use the Color Picker

  Once you've opened the Color picker, you have access to any paint properties.

  

  1. In the top-left corner, select a Paint type. Choose from a Solid color, a Gradient (Linear, Radial, Angular or Diamond), or an Image/GIF.
  2. In the top-right corner, use the droplet icon to select the Blend mode. This allows you to create unique effects when combining fills.
  3. Use the Color palette in the body of the modal to select a color. The current color is shown in the white circle, surrounded by any related tints, tones and shades. Click and drag the white circle to adjust the color.
  4. Use the Eyedropper tool to select any color from an image or object in the canvas.
  5. Adjust the Hue using the slider below the palette. Click and drag (left or right) to adjust.
  6. Adjust the Opacity using the bottom slider.
  7. View the color values in each color profile. Choose between RGB, HEX, CSS and HSB.
  8. Use the Document colors field to select a palette from local colors, styles, and styles from enabled libraries.

  Access sliders when you select colors in the Color palette. Use your mouse-wheel or trackpad to scroll along the Hue slider. Hold down the modifier key while scrolling to set the Opacity:

  MacOS: Option Windows: Alt

  Want to reuse colors across your designs? Save your colors, gradients, and images as Styles. Learn more about creating color styles.

  Use the Eyedropper tool

  The eyedropper tool allows you to select and sample colors from any object or image in a file. Use the eyedropper to:

  • Identify colors
  • Apply sampled colors to objects
  • Save sampled colors to your color styles

  1. Select the object you'd like to edit.
  2. In the Properties Panel, find the property you'd like to update (Fill or Stroke)
  3. Click the color swatch to open the Color Picker.
  4. Click the eyedropper tool icon or use the keyboard shortcut: i
  5. Hover over the color in the canvas you'd like to sample. The magnifier window will show you both the color and hex code of the sampled pixel:
  6. Click to apply the sampled color to the selected object:

  Tip! If you want to change the Fill of a selected object, use the keyboard shortcuts to enable the eyedropper from the canvas:  Ctrl C or i.

  

• Apply shadow or blur effects

  Before you Start

  Who can use this feature

  Users on Any Plan

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

  Types of Effects

  You can add/remove effects to an effect list. Figma renders up to 8 of each shadow type, and 1 of each blur type. Keep in mind that the blurs used by these effects can lead to poor performance, with background blurs typically being the most expensive effect.

  Shadows and blurs can be combined with blend modes and different colors to emulate a variety of looks, such as an "outer glow".

  Drop Shadow

   A versatile effect that can be used to make a shape pop off the background by casting a shadow below. Use Drop Shadows to illustrate elevation in your interface. The shadow can be offset, the blur size controls the softness, and the color and blend tint and combine the shadow.

  • Drop shadows can also be efficiently applied to a group and layer under the group as a whole instead of each individual shape.
  • Set a blur size of 0 to create a hard shadow of the shape. This is useful for things like borders on a single edge of a shape.
  • Create an outer glow with an offset of 0 and set blend to Screen while using a light-colored fill within your effect settings.

  Inner Shadow

  A versatile effect that can be used to add inner depth to a shape. These have similar controls to the drop shadow but appear atop the fill but below the stroke on a shape.

  • Like drop shadows, inner shadows can be applied to groups.
  • Create an inner glow with an offset of 0 and set blend to Screen.

  Layer Blur

   This blurs any given layer's geometry. If you blend something like an image fill, it will appear blurry and out of focus.

  • Blurs of large numbers of pixels can contribute to performance issues. You can permanently rasterize the layer to improve performance if you're using Layer blur frequently (this action cannot be reversed and is lossy).

  Background Blur

  This blurs all the layers behind the layer you have applied the background blur to.

  If you have layers behind that layer that also have background blur applied, we will not blur that background blur.

  To see a background blur, the layer will need to have a fill opacity of less than 100%. You can set the opacity of a layer to as low as 1% to see the background blur.

  • Blurs of large numbers of pixels can contribute to performance issues. If you are experiencing issues within a File, we recommend toggling off blurs and effects.

  Effects Render Order

  In Figma, effects apply to both layers and groups. Using group blurs and shadows can improve performance, but keep in mind the stacking order differences from the tables below. 

  The differences in group and layer shadows are most evident on overlapping layers. When shapes don’t overlap, then the appearance should typically be the same.

  Layers

  • Layer Blur (top)
  • Stroke Paints
  • Inner Shadow
  • Fill Paints
  • Drop Shadow
  • Background Blur (bottom)

  Groups

  1. Layer Blur (top)
  2. Inner Shadow (of Group children):
  3. For all Group Children

  • Fill and Stroke Paints, Masks, and Effects
  • Render Background Fill (if enabled and/or exported)
  • Drop Shadow (of Group children and Background Fill

     4. Background Blur (bottom)

• Create unique effects with Blend modes

  Before you Start

  Who can use this feature

  Blend modes are available on Any plan

  Users with Edit access to a File can add or adjust Blend modes

  Blend Modes allow you to define how you want two layers to blend together. This involves taking the pixels from each layer and applying calculations to them.

  This allows you to adjust aspects of an image, like the background color. Or, create interesting overlays and textures.

  You can adjust the Blend mode of an entire layer, or an individual fill. You can only apply one blend mode to each layer or Fill.

  Blend Modes

  There are 16 Blend modes available in Figma.

  • Normal
  • Darken
  • Multiply
  • Color Burn
  • Light
  • Screen
  • Color Dodge
  • Overlay
  • Soft Light
  • Hard Light
  • Difference
  • Exclusion
  • Hue
  • Saturation
  • Color
  • Luminosity

  Fill

  1. Click on the Fill thumbnail in the Properties Panel to open the Color picker.

  2. Click the droplet icon in the top-right corner of the Color picker to select a Blend mode:

     

  3. Select the desired Blend mode to apply. You can only apply one blend mode to each fill.

  4. Click the X to return to the Canvas.

  Layer

  Apply a blend mode to an entire layer in the Layer section of the Properties Panel.

  1. Select the layer you want to apply the blend mode to.

  2. In the Layer section of the Properties Panel, click on the blend mode field. This will be set to Pass through by default.

     

  3. Select the desired Blend mode to apply. You can apply one blend mode to each layer.

• 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.

  In this article we'll cover:

  1. What are Layout Grids
  2. Apply Layout Grids
  3. Layout Grid Properties
  4. Toggle Layout Grids
  5. Create a Layout Grid Style
  6. Work with Layout Grids and Constraints

  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 allow you to:

  • 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 e.g. 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 Properties Panel:

  To apply a Layout Grid:

  1. Select the Frame in the Layers Panel, or in the canvas: 
  2. Click the + icon next to Layout Grids in the Properties Panel: 
  3. A Uniform Grid will be applied to the Frame by default:
  4. You can then click on the Grid icon 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 allow you to 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 below.

  Changing the Layout Grid

  To select the Grid type:

  1. In the Properties Panel, click on the Grid icon: 
  2. Click on the Grid drop down in the Layout Grid Properties window:
  3. You can choose from a:
     1. Uniform Grid
     2. Grid with Columns
     3. Grid with Rows
  4. You can then choose to customize the Layout Grid further:
     • Uniform Grid Properties
     • Column and Row Properties

  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 on the Grid icon to open the Layout Grid settings.
  2. Update the Size field to the desired dimensions: 
  3. Click the X 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 grid 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 that the Column or Row starts. 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 number of Columns or Rows (Count).

  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 on the Grid icon in the Properties Panel.
  2. Click on the Color swatch: 
  3. Use the Color Picker to select a new color: 
  4. Adjust the Opacity if required.

  Combining 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 the + icon next to Layout Grids in the Properties Panel.
  3. Select the Layout Grid in the dropdown provided.
  4. Define any other relevant properties i.e. Count, Height or Width, Gutter, Margin, Type and/or Color.
  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:
     • MacOS: 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 Properties Panel.
  3. Click the "open eye" icon next to the Layout Grid to toggle it OFF:
  4. Click "closed eye" icon 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 Styles in our Creating Styles article.

  Creating a Layout Style

  1. Select a Frame in the canvas with the Layout Grid(s) applied.
  2. In the Properties Panel, click the Style icon (four dots) next to the Layout Grid label: 
  3. In the Grid Styles window, click the "+" icon: 
  4. Give the Layout Grid Style a memorable name: 
  5. Click Create Style to complete the process.

  Applying a Layout Style

  1. Create or select a Frame in the canvas.
  2. In the Properties Panel, click the Layout Grid Style icon: 
  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 wish to copy.
  2. Click on the Layout Grid in the Properties Panel.
  3. When it is highlighted, use the Keyboard Shortcuts to copy the Layout Grid:
     1. MacOS: ⌘ + C
     2. 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:
     1. MacOS: ⌘ + V
     2. Windows: Ctrl + V

  Working 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 object are positioned within a frame. When combined with Layout Grids, they provide the framework for a powerful layout system.

  Learn more about making the most of Grids and Constraints in our Combining Grids and Constraints article.

  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 and/or Column Layout Grid with properties divisible by 8.

  Learn more about the 8-point grid in this Spec.fm post: https://spec.fm/specifics/8-pt-grid

  Frequently Asked Questions

  Can I toggle all Layout Grids at once?

  You can indeed! This can be done from the View Settings menu in the top-right corner of Figma. Learn more in our 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 be toggled OFF in the Properties Panel.
  • 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 above.