Related Videos

• Adjust alignment, rotation, and position

  Before you start

  Who can use this feature

  Supported on any team or plan

  Only people with can edit access to the file can make changes to a layer's position, dimensions, or alignment.

  Every shape, text object, or image you add to the canvas has its own layer. This allows you to adjust each layer individually as you create cohesive and complex designs.

  In this article, we'll show you how to adjust the alignment, position, dimensions, and rotation of your layers. This applies to individual layers, as well as frames, components, groups, and selections.

  You'll find most of these properties at the top of the Design panel in the right sidebar. You can also adjust a number of these properties on the canvas itself.

  

  Note: Alignment, position and dimensions related to auto layout frames are different to the options we've outlined here. Learn how to adjust these properties with auto layout →

  Alignment

  Alignment tools allow you to arrange layers on the canvas in relation to one another. Figma will determine your layer's alignment based on your specific selection.

  • Select one object or layer: Figma will align the layer to its parent. This could be a group, frame, or the containing frame of a component.
  • Select multiple layers: Figma will align layers in relation to each other, or in relation to their parent frame, or in relation to selected layers in an instance.

  Looking for text alignment? Learn more about Figma's text alignment options →

  Use the alignment controls in the right sidebar to align an object to its parent layer, or to align multiple objects to one another: 

  • Align left
  • Align horizontal centers
  • Align right
  • Align top
  • Align vertical centers

  Alternatively, use keyboard shortcuts:

  Action	Keyboard shortcut
  Align top	AltW
  Align left	AltA
  Align bottom	AltS
  Align right	AltD
  Align vertical centers	AltV
  Align horizontal centers	AltH

  Hold Shift and click the alignment controls to align multiple objects as a group to their parent frame.

  Tip! Create fixed layers and control how layers respond as you resize them with constraints. Learn how to use constraints →

  Snap to settings

  When resizing an object, moving layers, or moving vector points, use the snap to settings to help align them to other elements on the canvas. A red guide appears on the canvas as a visual indicator.

  • Snap to geometry: Used only in vector edit mode. When this setting is on, clicking and dragging a vector point will align it to other vector points.
  • Snap to objects: Align the centers and outermost points of different objects.
  • Snap to pixel grid: Align objects to an underlying grid to prevent misaligned pixel errors when exporting elements. The pixel grid does not need to be visible for this setting to work.

  To turn Snap to settings on and off, open a Figma design file and go to  > Preferences. You can also find these settings in the quick actions menu. 

  Snap to settings are applied across your Figma design files.

  If you have Snap to geometry or Snap to objects enabled, hold Control to temporarily disable them.

  To temporarily disable Snap to pixel grid with Control, make sure you’re in vector edit mode and zoomed in to the canvas. To know if you’re zoomed in enough, turn on the pixel grid ⇧ Shift ' and zoom in until the grid is visible. Note that the pixel grid does not need to be toggled on to use this shortcut.

  Tip! If you’ve toggled on Ctrl+click opens right click menus, click and hold the object before using Control to temporarily disable snapping. This prevents accidentally opening the secondary menu.

  Distribution

  Use distribution to create equal space between layers in a selection. You must have more than one layer or object selected.

  When using distribute, Figma will retain the position of the outermost objects or layers:

  • Distribute horizontal spacing: both the objects or layers on the outer left and outer right will maintain their position.
  • Distribute vertical spacing: both the top and bottom objects or layers will maintain their position.
  • Tidy up (smart selection) ↓

  Tidy up

  Use tidy up to quickly align layers on one-dimension as rows or columns, or combine rows and columns to create two dimensional layouts.

  You can then adjust the horizontal and vertical spacing between the objects in your selection with smart selections. Learn how to use smart selection →

  Depending on your selection, you'll see one of the following options:

  • Tidy up vertical selection (one dimension)
  • Tidy up horizontal selection (one dimension)
  • Tidy up (two dimensions)

  One dimensional selections

  For a selection on either the horizontal or vertical axis (one dimension), Figma will arrange objects based on the axis they overlap on.

  Objects on the x axis will have only their horizontal spacing adjusted and objects on the y axis will have only their vertical spacing adjusted.

  Figma will use the most common spacing in the selection to set the Space between value.

  

  Note: When you use tidy up on a one-dimensional selection, Figma won't automatically align the objects along both axes, but you can use the alignment tools in the right sidebar l to make any further adjustments.

  Two dimensional selections

  When using tidy up on objects in two dimensions, like a grid, the tidy up process is much stricter. Figma will adjust both the vertical and horizontal spacing between objects.

  The vertical and horizontal spacing will depend on their starting position and can be the same or unique. Once Figma tidies up the layers, you can adjust the vertical and horizontal spacing

  Unlike distribute, which repositions objects within the original selection's bounds, tidy up arranges all objects into a grid that aligns with the top-left corner of your selection.

  

  Distribute or tidy up

  If you're using tidy up on a one dimensional selection, you'll notice that this functions similarly to the distribute function. You can think of tidy up as distribute with some extra logic.

  The main purpose of the tidy up function is to arrange layers so they meet both the criteria for a smart selection. That is, be an equal distance apart and overlap on either axis.

  • Distribute will only set a uniform distance between layers, it doesn't require layers to overlap on either axis. Tidy up will perform both, if required.
  • Tidy up lets you align objects along both axis at the same time. Distribute only works along one axis at a time: distribute horizontal spacing or distribute vertical spacing.

  For both distribute and tidy up, Figma will show the space between in the or field. This is based on the most common space between value (the mode).

  Note: If you have Snap to pixel grid enabled, you may see subtle discrepancies in spacing between layers. Figma will allow up to 1px of rounding.

  For example: if you have four layers and the spacing between most of the layers is 20, but there is only 19 space between two of the layers, Figma will still show the space between as 20.

  When Snap to pixel grid is disabled, Figma may distribute layers with decimal spacing values. For example: 7.5.

  Position

  You can adjust the position of layers in the canvas along any of the two dimensions or axes: horizontal (X axis) and vertical (Y axis).

  Figma represents a layer's position on the canvas using X and Y coordinates. These refer to the top-left corner of the layer's bounds.

  1. Open the Design panel in the right sidebar.
  2. Use the X and Y fields to adjust the layer's coordinates.
  3. You can also use basic mathematical equations (- + * / ^ () ) to quickly adjust the values of the X and Y co-ordinates. You can add an equation before or after the existing value, or replace it with a new equation entirely. Learn more about equations ↓

  Note: If you rotate a layer in the canvas, Figma will base the X and Y co-ordinates of that layer on the original top-left corner of the layer's bounds.

  Nudge layers

  Use your arrow keys to nudge the position of your layers. Figma allows you to set two default nudge amounts: small nudge and big nudge.

  By default, small nudge is set to 1 and big nudge set to 10. Both of these values are in resolution-independent points. Set small and big nudge values →

  Use arrows to nudge layers

  Use the arrow keys to nudge your selection. The arrow keys will use your small nudge settings, hold down Shift to use the big nudge settings instead.

  • ← Left
  • ↓ Down
  • ↑ Up
  • → Right

  Dimensions

  Every layer in the canvas will have its own dimensions. To view a layer's dimensions:

  1. Select the layer in the canvas or layers panel.
  2. View the dimensions in the blue label under the layer's bounding box.
  3. You can also view the dimensions of any layer using the W and H fields in the right sidebar.

  Select a layer to make changes to a layer's dimensions. There are then a few methods:

  • To adjust the width of a layer: hover over the layer's left or right bounds until the appears. Click and drag to resize.
  • To adjust the height of a layer: hover over the layer's top or bottom bounds until the appears. Click and drag to resize.
  • To adjust both the width and height of a layer: hover over any corner of the layer's bounds until the appears. Click and drag to resize.
  • Adjust both the W and H fields in the right sidebar.

  Note: It's not possible to adjust the dimensions of a group itself. If you update the dimensions of a group, Figma will update the dimensions of the layers inside the group instead.

  Constrain proportions

  The button allows you to constrain the dimensions of the layer to the current proportion. You can find this setting next to the dimension settings (W and H) in the right sidebar.

  When this setting is on, Figma will retain the original width to height ratio anytime you resize the layer in the sidebar. If you update either of the W and H fields, Figma will update the other accordingly.

  Tip! Hold down the Shift key when drawing to create perfect squares, circles and polygons. Figma will toggle the constrain proportions setting on in the right sidebar.

  By default, Figma will draw a shape from the top-left. You can hold down the following modifier key to draw a shape from the center instead.

  Mac: ⌥ Option Windows: Alt

  Hold down both modifier keys to do both actions.

  Rotation

  Rotate individual layers, like objects, frames and groups, or a selection of layer. Figma will use the horizontal and vertical center of your selection as the point of rotation.

  Every layer you add to the canvas will have a default rotation of 0°. You can rotate your selection 180° in each direction:

  • A positive angle goes counterclockwise towards 180°
  • A negative angle goes clockwise towards -180°

  Once you pass 180 in either direction, Figma will count down towards 0° in that direction. For example: going 15° past 180° will give you an angle of -165°.

  

  Caution: Figma uses the rotate CSS transform property to apply rotation to a layer or selection. The CSS transform property uses the opposite directions for determining the angle of rotation, which means you'll see the opposite angle in the Inspect panel.

  For example: if you rotate a layer 90° in the Design panel, Figma will translate this to transform: rotate(-90deg) in the Inspect panel.

  Tip! You can animate layers rotating between frames in your prototypes. Learn how with smart animate →

  Right sidebar

  Find the rotation field at the top of the Design panel in the right sidebar.

  1. Select the layer(s) or object(s) you want to rotate.
  2. In the right sidebar, use the field to enter your desired rotation.

  Canvas

  1. Hover just outside one of the layer's bounds until the icon appears.
  2. Click and drag to rotate your selection:
     • Drag clockwise to create a negative angle (towards -180° ).
     • Drag counterclockwise to create a positive angle (towards 180° )
  3. Hold down Shift to snap rotation values to increments of 15.

  Note: Figma won't rotate any effects you've applied to a layer or selection.

  Flip layers

  Another way to replicate rotating layers is to use the Flip horizontal and Flip vertical transformations.

  Use the right-click menu to apply a flip transformation, or the keyboard shortcuts:

  • Flip horizontal: ⇧ Shift H
  • Flip vertical: ⇧ Shift V

  Note: Figma uses the matrix CSS transform property for flip transformations. You can view the CSS values of the transformation in the Inspect panel of the right sidebar.

  Once you have applied a flip transformation to a selection, Figma will continue to use the matrix transformation CSS property, even if you later apply rotation to your selection.

  Every shape, text object, or image you add to the canvas has its own layer in the canvas. This allows you to adjust each layer individually as you create cohesive and complex designs.

  

  You can adjust the position of layers in the canvas along any of the three dimensions or axes: horizontal (X axis), vertical (Y axis), and depth (Z axis).

  Unlike the X and Y axes, there isn't a specific field you can adjust for the Z axis. Instead, you adjust the depth (Z axis) or hierarchy of a layer by changing the order in the Layers panel.

  This allows you to move layers to the front or back of the canvas, as well as move layers in or out of groups or frames. Learn more about relationships between layers →

  The Layers panel in the left sidebar shows you every layer on the current page and reflects the order your layers are currently stacked: the top layer is at the front and the bottom layer is at the back.

  Tip! If you're familiar with CSS, the layer's depth corresponds to an object's z-index.

  Change layer order

  There are a few ways to adjust a layer's order.

  • 1

    Layers panel

    Adjust the order of the layer by changing the layer's position in the Layers panel.

    1. Open the Layers panel in the left sidebar.
    2. Click and drag the layer to change it's position in the layer hierarchy:
       • Move the layer up to bring the layer forward
       • Move the layer down to send the layer back
    3. Release to apply.

    Note: Layer order works the opposite way inside an auto layout frame. This is because auto layout wasn't designed to support layers that overlap.

    If you change the order of layers in an auto layout frame, this will change the position and order of the layer within the the frame. Outside of an auto layout frame, changing the layer order won't affect a layer's position on the X or Y axes.

    Learn more about using auto layout →

  • 2

    Keyboard shortcuts

    Bring forward:

    • Mac: ⌘Command ]
    • Windows: Ctrl ]

    Bring to front:

    • Mac: ⌘ Command ⌥ Option ]
    • Windows: Ctrl Shift ]

    Send backward:

    • Mac: ⌘ Command [
    • Windows: Ctrl [

    Send to back:

    • Mac: ⌘ Command ⌥ Option [
    • Windows: Ctrl Shift [
  • 3

    Right-click menu

    1. Select the layer(s) in the canvas.
    2. Right-click on the selection to open the context menu:
    3. Choose from:
       
       • Bring forward
       • Bring to front
       • Send backward
       • Send to back

  Tip! If you make any changes you're not happy with, you can undo the action using the keyboard shortcut:

  • Mac: ⌘ Command Z
  • Windows: Ctrl Z

  Adjust values

  Equations

  Some fields in Figma accept equations, this includes the position, dimension, and rotation fields.

  You can use equations to resize layers by adding +, subtracting -, multiplying *, or dividing / the existing value. You can also use brackets ( ) within the field for more complex equations, or ^ for creating exponents.

  We've added some examples below but you can use any numbers:

  • + 10 to add 10 to the current value
  • - 20 to remove 20 to the current value
  • *2 to multiple the current value by 2
  • /4 to divide the current value by 4
  • ^2 to create an exponent of the current value to the power of 2
  • (𝑥/2)+6 to divide the current value in two and add 6 (𝑥=current value)
  • Mixed+100 to add 100 to two or more selected objects with different values

  

  Equations can also be applied to a mixed selection of values. When an equation is entered into the position, dimension or rotation fields, the change will apply to all selected layers. 

  

  Note: You'll need to edit the field and add the equation to the existing number. If you only select the field and add the equation, Figma will replace the existing number instead.

  Scrub fields

  In addition to manually entering values, you can also "scrub" fields. Scrubbing allows you to quickly adjust a field's value by dragging your active mouse or touchpad.

  You can use this for position, dimensions, and rotation fields, as well as other layer properties and settings in the right sidebar.

  1. Select the layer or object on the canvas.

  2. Hover over the label next to the input field until the scrubbing cursor appears. You can also hover the input field itself and hold down the modifier key:

     • Mac: ⌥ Option
     • Windows: Alt

  3. Click on the icon and drag to change the input value. Drag the cursor left to decrease the value, or drag it right to increase.

  4. Change the speed that you scrub the field by moving the cursor towards the top of the screen to increase the scrubbing speed, or towards the bottom of the screen to reduce it.

     You'll see a notification at the bottom of the screen for the current speed, as well as a difference in the cursor's width. There are four scrubbing speeds: 2x, 1x, 1/2, and 1/4.

  Tip! Figma will continue scrubbing the field, even if your cursor goes off the screen. This works if you're using Figma in the browser or desktop app.

• Apply and adjust stroke properties

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access can view and update stroke properties.

  Strokes are a collection of properties you can apply to layers in design files. You can think of strokes as the visual representation of a vector path. Use stroke properties to:

  • Add outlines around shapes, vector networks, or boolean operations
  • Create lines and arrows
  • Add borders to images
  • Add strokes to individual sides of rectangular layers, like rectangles, frames, and components

  You can control the appearance of a stroke with color, weight, distribution, side, and end point properties.

  Note: When you select an object, Figma applies stroke properties to the entire layer. You can use edit object mode to adjust stroke properties for individual points.

  Stroke properties

  View and adjust stroke properties in the Stroke section of the right sidebar.

  Paints

  Paint is the main property you’ll use to define the stroke. You can apply more than one paint (color) to a stroke. This includes gradient and image paints. Paints must share the same weight, position, and style properties.

  1. Use the color picker to select a paint type, value, and opacity.
  2. Click to add another paint to the current selection.
  3. Select or to toggle the visibility of each paint.
  4. Select to open the Style picker. From there you can apply a color style or create a new one from the current selection.
  5. Select to remove the stroke from the selected layer.

  Position

  Figma lets you define where to apply the stroke on the layer’s path. Choose from Inside, Outside, or Center. The default option for most shape layers is Inside, except lines which are set to center.

  The SVG format only supports center stroke. This is something to consider if you plan on exporting the layer as an SVG.

  When you export a layer with inside or outside stroke to SVG, Figma will “simplify” the stroke. This makes an inside or outside stroke look like a center stroke. This won't affect the appearance of the exported object, but it will impact the complexity of the SVG code.

  Learn more about simplify stroke →

  Tip: Preview stroke positions and styles on the canvas by hovering over each option on the dropdown before selecting it.

  

  Weight

  Use the field to select the weight of the stroke, in pixels. Enter a value, or focus on the field and scroll through values using your mouse or trackpad.

  Note: Figma doesn’t include the stroke weight in the layer’s dimensions. This means you won’t see the stroke included in the layer’s dimensions in the Inspect panel. Strokes in the Inspect panel ↓

  Individual strokes

  By default, Figma applies the stroke properties to all sides of a layer. If your layer is a rectangle, frame, or component/instance, you’ll also have a Stroke per side property.

  Use the Stroke per side property to choose which side or sides to apply the stroke.

  • All (default)
  • Top
  • Bottom
  • Left
  • Right
  • Custom: to choose which sides to apply stroke. Custom also allows you to set a different stroke weight per side.

  Tip! Rectangles include any shapes created using the rectangle tool, frames, and components and instances that use frames.

  Custom strokes per side

  When you select custom, you’ll see four individual fields in the Stroke section. Use the fields to adjust the weight for each side independently. To remove a stroke from a side, set the weight to 0.

  You can use individual strokes to create common design elements and patterns:

  • Apply a single stroke to the top or bottom of a row in a table
  • Show a horizontal line underneath a section header or divider
  • Apply a border to only three sides of an element
  • Add a color block to the left side of a card or task element

  End points

  Add styling to the end points of any open ended paths. The end point property will show up in two different locations, depending on the vector path you have selected.

  Only two end points

  If the layer is an open vector path, you can set the endpoints at the start and end of the vector path in the main Stroke section. For example: line and arrow shapes.

  Use the two fields to set the cap or tip style ↓ for the start (left) and end (right) endpoints.

  More than two endpoints

  If you have a closed vector path or shape—or an open path with more than two end points—you’ll find the end points settings in the Advanced stroke menu instead.

  If you have the entire layer selected, you can use the End points property to set the same tip or cap style for all endpoints.

  To edit them independently, you need to select each end point in vector edit mode:

  1. With the layer selected, press Enter / Return to open vector edit mode →
  2. Select a single end point. You can identify the selected end point by the blue circle with a white stroke.
  3. Select the in the Stroke section of the right sidebar to open the Advanced stroke menu.
  4. Update the End point property.
  5. The Advanced stroke menu will stay open, allowing you to select another end point in the canvas and update the end point again.

  Cap and tip endpoints

  Choose from a selection of caps or tips to add to your end points:

  • None: No cap or tip is added to the end of the path. The end are square, without adding any length to the path.
  • Round (default): Adds a cap half the stroke weight, as well as rounding the end point of the path to 50% the width.
  • Square: Adds a cap half the stroke weight, while squaring the end point of the path.
  • Line arrow: Two 45-degree lines to either side of the end point(s). The line arrow uses the same stroke weight as the path itself. You cannot change the length of the arrow head lines.
  • Triangle arrow: Triangle arrowhead to both end points. You'll need to enter vector edit mode → to apply an arrow to only one end of the path.
  • Reverse triangle: Reversed or flipped version of the triangle arrow, with the arrow pointing inward towards the path.
  • Diamond arrow: Adds a solid diamond shaped tip to the end point.

  Stroke style

  Use the Stroke style setting to create solid, dashed, or dotted lines.

  Note: Figma starts and ends every dashed line with a half-length dash. You can use Outline stroke from the right-click menu to convert the stroke to a vector object. This will allow you to use edit object mode to remove or extend the half-dash.

  Dashed

  Create a uniform dashed line.

  1. In the Stroke panel, select to open the Advanced stroke menu.
  2. Select the Dashed stroke style
  3. Enter the length you want for the Dash, in pixels.
  4. Enter the length of the Gap between dashes, in pixels.
  5. Choose the type of cap for the dash:
     • None
     • Round
     • Square

  Dotted

  Create a dotted line.

  1. In the Stroke panel, use the dropdown to change the stroke position to Center.
  2. Select to open the Advanced stroke menu.
  3. Select the Dashed stroke style
  4. Enter a Dash length of 1 pixel.
  5. In the Dash cap setting, select Round.
  6. Adjust the Gap between dashes to suit.

  Custom

  Create a dashed or dotted line with a custom pattern.

  1. In the Stroke panel, select to open the Advanced stroke menu.
  2. Set the Stroke style setting to the Custom option.
  3. Use the following syntax in the Dashes setting to define the dash pattern dash, gap, dash, gap...
  4. Select the Dash cap you want to use.

  For example: We want to represent the letter f in morse code ..-. as a custom dash pattern. We’d enter the following in the Dashes setting 10, 20, 10, 20, 80, 20, 10, 100.

  

  Join and miter angle

  Define how lines join within a path or vector network. Adjust the joins in an entire path, or enter vector edit mode to select a single anchor point in the path. Choose from:

  • Miter: Create a sharp point, like an arrow, where the two paths meet.
  • Bevel: Cut off the sharp point to create a flat edge.
  • Rounded: Round the point where two paths meet to soften to join.

  Use the Miter angle setting to control the angle at which two joined lines bevel. For example: for a miter of 90°, any angle ≤ 90° will bevel, anything > 90° will create a sharp point.

  Some properties are only supported on specific layer types. Use the table below to see if a specific property is supported on the layer type you’re working with.

  Layer type	Paints	Position	Weight	Stroke per side	Style	Endpoint	Join
  Rectangle	✓	✓	✓	✓	✓	✕	✓
  Lines	✓	✓	✓	✕	✓	✓	✕
  Arrows	✓	✓	✓	✕	✓	✓	✓
  Ellipse	✓	✓	✓	✕	✓	✕	✓
  Polygon	✓	✓	✓	✕	✓	✕	✓
  Star	✓	✓	✓	✕	✓	✕	✓
  Booleans	✓	✓	✓	✕	✓	✕
  Vector networks	✓	✓	✓	✕	✓	Open paths only	✓
  Text	✓	✓	✓	✕	✓	✕	✓
  Frames (including components)	✓	✓	✓	✓	✓	✕	✓

  Styles and strokes

  You can only create and apply color styles to strokes. There isn't a way to save a stroke's other properties, like weight and position, as a style.

  When you apply a color style to a stroke, you can still adjust the other properties. This includes the weight and distribution, as well as any advanced stroke properties like caps, join, and dashes.

  Apply color styles to strokes

  1. Select the layer you want to update.

  2. In the Stroke section of the right-hand panel, click the Style icon.

  3. Use the style picker to select the relevant color style.

  4. Adjust any of the other properties of the stroke, as desired.

  

  Scale and resize strokes

  Strokes respond differently based on how you resize them.

  • Resize the object if you want to retain a Stroke's weight, while adjusting the object's dimensions. Hover over the stroke's bounding box until the cursor appears, then drag to resize.
  • Use the Scale tool to scale the Stroke properties along with the object's dimensions. Learn how to use the scale tool →

  Strokes in the Inspect panel

  Strokes show up in the Inspect panel as Borders. Some stroke properties are easy to identify by name alone. Paint is represented by border-color and style by border-style.

  When it comes to weight and strokes per side, there are a few different ways we might show those values in CSS.

  • When a layer has the same stroke weights on all sides, or unique values for each side, we’ll use border-width. The exact syntax will depend on the combination of values. View border-weight syntax on MDN →

    For example: a rectangle with 6px stroke on the top side, 2px on the bottom, and 4px on the left and right is represented in CSS as border-weight: 6px 4px 2px;.

    A rectangle with 6px stroke on all sides is represented as border-weight: 6px.

  • When only one side of the layer has a border, we’ll use the CSS property for that specific border. For example: border-top: 1px solid fff

  Note: Figma doesn’t include the stroke weight in a layer’s dimensions. You won’t see the stroke weight included in a layer’s dimensions in the Inspect panel.

  This is something to consider when translating designs to code, especially for layers with center and outside stroke.

  In an auto layout frame, you can choose to include stroke in the layer’s total dimensions. When included, the layer’s dimensions in the Inspect panel will include the weights of any strokes. Learn more about strokes in auto layout →

  Convert strokes to vector objects

  The Outline Stroke feature allows you to convert strokes into vector objects. This will take each path in the object and turn it into a single editable shape.

  This will allow you to:

  • Remove or extend half-dashes
  • Create custom shapes and edit them in vector edit mode
  • Combine multiple paths into a single object
  • Scale vector objects uniformly

  Note: It's not possible to convert a vector object back into a stroke, unless you undo the action. Use the keyboard shortcuts to undo:

  • macOS: Command Z
  • Windows: Ctrl Z

  Outline stroke

  1. Access the Outline Stroke feature in a few ways:
     • Right-click on the layer and select Outline Stroke
     • Go to the ☰ menu and select Vector > Outline Stroke
     • Use the keyboard shortcut:
       • Mac: Shift Command O
       • Window: Shift Ctrl O
  2. Figma will convert the path into a vector object and apply any paints you had as a stroke as a fill.
  3. You can see how that vector object looks in vector edit mode. Press Enter / Return, or click Edit object in the toolbar to edit the vector object.

  

  Tip! If you have a Style applied to the stroke, Figma will also take the color properties of the Style and apply this to the object as a fill.

• Arc tool: create arcs, semi-circles, and rings

   

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can use the Arc Tool.

  You can also use the Ellipse tool to create additional shapes, like pie charts, rings and broken rings:

  

  1. Draw a circle using the Ellipse tool.
  2. When you hover over the circle, a single handle will appear on the right-hand side.
     
     This point (0) determines where you can begin to create an Arc:
  3. Click and drag the Arc handle up or down to change the Sweep. This create a gap in the circle.
     
     

     Tip! The tooltip will indicate the Sweep percentage. Dragging the handle up will produce a positive percentage, while dragging the handle down will indicate a negative percentage.

  4. Now there will be three handles shown:
     
     1. The Sweep indicates how complete the circle is, shown by the percentage of the circle that is filled (as above).
     2. The Start handle (which has a dot inside it) indicates where the arc begins. The starting position of the handle is set to 0, but you can drag this around the circle to change the position of the ring.
        
     3. The Ratio handle at the center of the circle allows you to change the circle to a ring. By dragging the Ratio handle around, you can determine which segment is shown (either the gap or the remaining circle), as well as the size of the ring.
        

  Tip!: To make a closed ring, you will need to adjust the Ratio of the Arc:

  1. Drag the Sweep handle to make a pie.
  2. Drag the Ratio handle to the desired size for the ring.
  3. Drag the Sweep handle back to meet the Start position, to close the ring.

  
• Apply shadow or blur effects

  Before you start

  Who can use this feature

  Supported on any team or plan

  Users with can edit access to a Figma design file can create and adjust Effects.

  Effects serve a number of purposes from the aesthetic to functional. They can enable you to signify that an element is interactive, like making a button look clickable by giving the rectangle a shadow.

  Blurs can shift identify inactive or inaccessible elements, like thumbnails for unlocked game levels or provide visual hierarchy to focus a user's attention on a dialog box.

  In Figma, there are four types of effects:

  • Drop shadow
  • Inner shadow
  • Layer blur
  • Background blur

  Figma lets you add eight of each shadow effect, and one of each blur effect to a selection.

  You can also combine shadows and blurs with blend modes and paint fills to create a variety of styles and effects.

  Caution: Depending on your device and internet connection, files with a large number of blur effects can lead to reduced performance. Background blurs are typically the slowest effect to render.

  To temporarily improve performance, you can toggle the visibility of any effects. You can also permanently rasterize layers, which will reduce their rendering time.

  Rasterizing layers is an irreversible and lossy process, meaning some vector data will be lost during the conversion.

  Shadow effects

  There are two types of shadow effects in Figma: drop shadow and inner shadow.

  

  Tip! Both shadow effects translate to the box-shadow property in CSS. Shadow effects on text layers translate to text-shadow in CSS. View CSS properties for your selection by opening the Inspect panel in the right sidebar.

  Drop shadow

  Drop shadows are a great way to add depth and dimension to your designs. You can do this by creating the shadow of an object on a surface behind or below it.

  Drop shadows can vary in opacity, depending on the effect you want to create.

  Use drop shadows to:

  • Create distance between objects
  • Set the direction of a light source
  • Make your designs stand out against a background
  • Make objects looks three-dimensional
  • Stylize text and icons
  • Add borders around a layer or object

  Inner shadow

  Like drop shadows, inner shadows allow you to create depth within two-dimensional designs.

  Instead of creating a shadow behind your selection, Figma will apply a shadow within the layer or object. This contains the shadow within the layer's bounds.

  Use inner shadows to:

  • Create depth within text
  • Make an object look recessed or indented
  • Show an active or clicked state of a button

  Tip: Preview effects on the canvas by hovering over each option in the menu before selecting.

  

  Show drop shadows through transparent layers

  Figma won't display drop shadows through transparent areas of a layer by default. Figma will support knockout shadows which show behind transparent areas if a layer has:

  • Only fills with less than 100% opacity
  • A stroke, but no fill
  • A fill or stroke with a blend mode that isn't Normal
  • A center or outside stroke with less than 100% opacity

  If you want to display drop shadows through an object:

  1. Make sure the layer meets at least one of the above criteria.
  2. Click the effects icon to open the shadow's property menu.
  3. Check the Show behind transparent areas checkbox.

  

  Note: Inner shadows don't support show behind transparent areas.

  Shadow spread

  Shadow spread is only supported on rectangles, ellipses, frames, and components.

  To apply spread shadow to a frame or component you must have:

  • Clip content enabled
  • A visible fill with at least 1% opacity

  Caution: The Figma Plugin API allows you to set a spread value for any object. Figma will not apply the spread value in the canvas, if spread is not supported on that type of object.

  Add shadow effects

  Note: Figma will add new effects to the top of Effects section in the right sidebar.

  As it's not possible to re-order effects, we recommend adding effects in the order your want them to appear. See: Effect render order.

  You can apply shadow effects to frames, groups, components, or individual layers.

  1. Select the layer or object from the canvas or Layers tab of the left sidebar.
  2. Click the Effects section in the right sidebar. The Drop shadow effect is selected by default. Use the dropdown to switch to Inner shadow.
  3. Click the Effect settings icon to adjust the shadow's settings.
     • X: Offset the drop shadow along the x axis (horizontal). Use with Y offset to set the direction of the light source.
     • Y: Offset the drop shadow along the y axis (vertical). Use with X offset to set the direction of the light source.
     • Fill: Apply a paint using the color picker and set an opacity for the shadow
     • Blur: Adjust the blur or feathering of the shadow. Increase the blur to soften the shadow and blend it with the background. Decrease the blur to create a sharper contrast.
     • Spread: Adjust the size of shadow to represent the distance between the foreground and background objects. See: Shadow spread.

  Tip! You can copy a layer's effect settings to paste on another layer or object from the Effects section of the right sidebar.

  1. Click the Effect settings icon, then press Esc to clear the field selection.
  2. Use the keyboard shortcut to copy the settings:
     • Mac: ⌘ Command - C
     • Windows: Ctrl + C
  3. Select the layer or object you'd like to apply the effect to and paste using the keyboard shortcut:
     • Mac: ⌘ Command - V
     • Windows: Ctrl + V

  You can also duplicate the effect using the keyboard shortcut:

  • Mac: ⌘ Command- - D
  • Windows: Ctrl + D

  Blur effects

  Layer blur

  Blurs help to imply action or movement, or create the illusion of depth in two-dimensional designs. Use layer blur to:

  • Anonymize information
  • Soften or detract focus from the background
  • Create abstract backgrounds from photographs and images
  • Replicate camera depth and other photographic effects like bokeh

  

  Background blur

  When you apply a background blur to a layer, Figma will blur any layers behind your selection on the canvas. You can think of this like a drop shadow, but instead of the layer creating a shadow it creates a blur.

  You can use background blur to soften or detract focus. This draws attention away from the background and to the selected layer.

  Background blur is used a lot for interactive menus in iOS. But you can also use background blur to obscure text or personal information in a screenshot.

  

  To actually see a background blur, your selection will need to have an appropriate opacity. You can set opacity for layers with background blur for any value between .10 and 99.99%.

  You may have to adjust the opacity of your layers to get the desired effect.If you set a layer's opacity to 100%, you won't be able to see the background blur at all.

  Note: It's only possible to add one layer or background blur to a layer or object.

  If you have other layers with background blur applied, Figma will ignore them instead of multiplying the existing background blur.

  Apply blur effects

  You can apply blur effects to frames, groups, components, or individual layers. It's only possible to add one layer or background blur to a layer or object.

  1. Select the layer or object from the canvas or Layers tab of the left sidebar.
  2. Click the Effects section in the right sidebar. The Drop shadow effect is selected by default. Use the dropdown to switch to Layer Blur or Background Blur.
  3. Click the Effect settings icon to adjust the blur's value.
  4. Adjust the layer opacity, if needed.

  You can also create Styles for shadow and blur effects. This allows you to save those settings and use them across your design files. Learn how to create effect Styles.

  Render order

  Figma will add new effects to the top of the Effects section of the right sidebar. As it's not possible to re-order effects, we recommend adding effects in the order your want them to appear.

  The order Figma renders effects depends on whether your selection is a layer or group. Masks are also considered groups under this context.

  The differences in group and layer shadows is most obvious on layers that overlap. When shapes don’t overlap, they will appear the same.

  Layers

  1. Layer blur (top)
  2. Stroke paints
  3. Inner shadow
  4. Fill paints
  5. Drop shadow
  6. Background blur (bottom)

  Groups

  1. Layer blur (top)
  2. Inner shadow
  3. Paints, masks, and effects for individual fills or strokes
  4. Drop shadow
  5. Background blur (bottom)
• Adjust corner radius and smoothing

  Before you start

  Who can use this feature

  Anyone on any team or plan can use these features.

  Anyone with can edit access to a file can adjust corner radius and smoothing.

  Apply corner radius and smoothing to frames, rectangles, polygons, stars, closed vector networks, and some boolean operations.

  In interface design, we see rounded corners on screens, icons, buttons, and cards. Lots of buttons and icons in Figma have rounded corners.

  It's easier for eyes to follow circles and curves, while sharp edges disrupt our line of sight. This makes it easier for our eyes to process circles.

  We're also used to seeing circles and rounded corners in the physical world. We see both organic and manufactured objects with rounded corners, or as circles.

  Circles, and objects with rounded corners, feel softer, friendlier, and safer.

  Figma has two features for creating rounded corners:

  • Corner radius rounds the corner where two lines meet. Use this to create shapes with rounded corners.
  • Corner smoothing adjusts a rounded corner to create a continuous curve. Use this setting to create "squircles".

  Apply corner radius and smoothing to:

  • Frames
  • Basic shapes: rectangles, polygons, and stars.
  • Vector networks that are closed shapes.
  • Boolean operations that contain rectangles. You can't adjust corner radius for boolean operations that only contain ellipses.

  Note: It's not possible to apply corner radius to lines, arrows, or vector networks with only a single stroke.

  Corner radius

  Figma represents corner radius in (density-independent) pixels. You can adjust corner radius for an entire shape, or for each point in a vector object.

  Note: Rounded corners may not be available for rectangles you create with the pen tool or rectangles you edit in vector edit mode.

  Adjust corner radius for an entire shape

  By default, Figma applies corner radius to the entire shape. There are a few ways to adjust the corner radius for a vector object or shape.

  Tip! Your small nudge and big nudge settings apply to corner radius too. Use the ← and → keys to use your small nudge. Hold down Shift to use your big nudge settings with the arrow keys.

  Design panel

  1. Select the layer in the canvas or Layers panel.
  2. Open the Design panel in the right sidebar.
  3. Enter a pixel value in the Corner Radius field.
  4. Or, hover your cursor over the icon, then drag left to reduce and right to increase.

  

  Canvas

  You can also adjust the corner radius in the canvas. This only applies to rectangles, stars, and polygons, but not frames.

  1. Select the shape you want to update.
  2. Hover over the corner you want adjust until the radius handle appears.
  3. Drag to adjust the radius.

  

  Adjust the radius of an individual corner

  By default, Figma applies corner radius to the entire shape. The independent corner setting lets you adjust the corner radius for each corner. There are a few ways you can do this.

  Caution: It's not possible to adjust an individual corner's radius in an Instance. This is something to think about when setting corner radius for Components.

  Design panel

  1. Select the shape you want to apply corner radius to.
  2. Open the Design panel in the right sidebar.
  3. Click the icon to adjust each individual Corner
  4. Four fields will appear below the corner radius setting. These appear clockwise: Top left, Top right, Bottom right, and Bottom left.
  5. Enter a pixel value in the field. Press Tab to move between field.
  6. You can also increase and decrease the value by scrubbing the field. Place your cursor in the field and hold down the modifier key. Drag left to reduce and right to increase.
     • Mac: ⌥ Option
     • Windows: Alt

  

  Canvas

  You can also adjust the corner radius for an individual corner in the canvas. This only applies to rectangles, stars, and polygons, but not frames.

  1. Select the shape you want to update.
  2. Hold down the modifier key to adjust a single corner.
     • Mac: ⌥ Option
     • Windows: Alt
  3. Hover over the corner you want adjust until the radius handle appears.
  4. Drag to adjust the radius.

  

  Vector edit mode

  1. Select the shape you want to update.
  2. Click Edit object in the toolbar, or press the Enter or Return key to enter vector edit mode.
  3. Select the individual point in the canvas.
  4. Adjust the corner radius using the field in the right sidebar.
  5. Enter a pixel value in the field.
  6. You can also increase and decrease the value by scrubbing the field. Hover your cursor over the icon, then drag left to reduce and right to increase.

  Note: You can only adjust the corner radius in vector edit mode, not the corner smoothing.

  Corner smoothing for squircles

  Designers noticed a difference in the rounded corners of iOS7 app icons. This corner smoothing created a seamless continuous curve that regular rounded corners couldn't.

  We refer to shapes that use this particular effect squircles. A shape that's somewhere between a square and a circle. We still see squircles in Apple's later designs, including OS14.

  There's quite a bit of mathematics that goes into a squircle. Learn more about one Figma engineer's search for squircles.

  

  Adjust corner smoothing

  You can apply corner smoothing to any shape you can apply corner radius to. Unlike corner radius, you can only apply corner smoothing to the entire shape.

  1. Select the layer in the canvas or Layers panel.
  2. Open the Design panel in the right sidebar.
  3. Click the icon to adjust each individual corner.
  4. Click to open the Corner Smoothing setting.
  5. Drag the slider right to increase and left to decrease. Click iOS to set Corner Smoothing to 60%, the default for iOS.

  Images in this article feature Components from the iOS 14 UI Kit for Figma.

• Copy and paste properties between layers

  Who can use this feature

  Supported on any team or plan.

  Anyone who can edit the file can copy and paste properties.

  From existing objects

  If you want to reuse properties you've applied to a layer, you can copy and paste them between layers. You can use this process to copy fill, stroke, and text properties.

  You can do this using the Copy Properties and Paste Properties functions.

   

  Keyboard shortcuts

  Mac

  • Copy properties: ⌥Option ⌘Command C
  • Paste properties: ⌥Option ⌘Command V

  Windows

  • Ctrl Alt C to Copy properties
  • Ctrl Alt V to Paste properties

  Right-click menu

  1. Right-click on the layer in the canvas.
  2. Select Copy properties from the options.
  3. Right-click on the layer to which you want to add the properties.
  4. Select Paste properties.
  5. Figma will apply any properties that are supported by that layer

  Main menu

  Open the menu in the top-left corner:

  • Search for "Copy Properties"
  • Search for "Paste Properties"
• 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.
• Apply constraints to define how layers resize

  Who can use this feature

  Supported on any Figma plan.

  Any one with can edit access can apply and edit constraints.

  Constraints tell Figma how layers should respond when you resize their frames. This helps you to control how designs look across different screen sizes and devices.

  You can check out the video below, or continue reading to find out more.

  Horizontal and vertical constraints

  You can apply constraints along both the x (horizontal) and y (vertical) axis.

  We set a layer's constraints to Top and Left by default.

  Horizontal

  Horizontal constraints define how a layer behaves, as you resize the frame along the x axis.

  • Left maintains the layer’s position, relative to the left side of the frame.
  • Right maintains the layer’s position, relative to the right side of the frame.
  • Left and right maintains the layer’s size and position relative to both sides of the frame. This may cause layers to grow or shrink along the x axis, when resized.
  • Center maintains the layer’s position, relative to the horizontal center of the frame.
  • Scale will define the layer’s size and position as a percentage of the frame's dimensions. It will then maintain those proportions as you resize it.
    
    

    For example: The frame's width is 100px and the layer's width is 70px i.e. the layer takes up 70% of its parent frame. If we resize the frame to 200px wide, Figma will resize the layer to a width of 140px, 70% of 200px.

  

  Vertical

  Vertical constraints define how a layer behaves, as you resize the frame along the y axis.

  • Top maintains the layer’s position, relative to the top of the frame.
  • Bottom maintains the layer’s position, relative to the bottom of the frame.
  • Top and bottom maintains the layer’s size and position relative to the top and bottom of the frame. This may cause layers to grow or shrink along the y axis, when resized.
  • Center maintains the layer’s position, relative to the vertical center of the frame.
  • Scale will define the layer’s size and position as a percentage of the frame's dimensions. It will then maintain those proportions as you resize it.

  

  Note: Depending on the layer’s position, more than one constraint may achieve the same result.

  Apply constraints to a layer

  You can apply constraints to any layer within a frame. It's not possible to apply constraints to layers outside of a frame, or layers in an auto layout frame.

  • You can also apply constraints to frames you have nested within other frames.
  • You can apply both horizontal and vertical constraints to layers.
  • You can't apply constraints to groups. A group will inherit its bounds from the layers contained within it. They aren't considered a single layer with bounds.

  Note: If you apply constraints to a group, Figma applies constraints to the individual layers. 

  To set the constraints for a layer:

  1. Select the layer or parent within the frame. The blue dotted line on the canvas shows which constraints are currently applied:
  2. Adjust the vertical and horizontal constraints in the constraints settings in the Properties Panel.
     • Use the drop down menus to set the layer's constraints.
     • Or, click on the lines in the interactive diagram to select a constraint.

  Tip! Hold down Shift to select or apply more than one constraint at a time. For example: left and right constraints.

  Ignore constraints

  Sometimes you may want to resize a frame or layer, without using the constraints that are applied to it.You can temporarily ignore any constraints applied to a layer by holding down a modifier key.

  • Mac: Hold down Command when you resize
  • Windows: Hold down Ctrl when you resize

  Constraints and layout grids

  Constraints give you a basic framework for positioning layers within a frame. When it comes to more complex designs, we need more precise control and flexibility. This ensures our designs behave when resized.

  That’s where grids come into play. When you use a grid within a frame, Figma aligns any layers within the frame to that grid. Working with constraints and layout grids →

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