Related Videos

• Resize layers with the scale tool

  Before you Start

  Who can use this feature

  Users on any plan

  Users with edit access to a Figma design file can resize objects with the scale tool

  Use the scale tool to proportionally resize layers and objects. This tool preserves aspect ratios and ignores constraints of any nested layers in order to scale them proportionally. Any blurs or strokes will scale as well.

  You can scale any object, with the exception of locked layers and layers nested inside a component instance. Learn more about instance overrides →

  

  Scale

  To resize an object using the scale tool:

  1. Activate the scale tool by pressing K, or by clicking in the toolbar and selecting Scale. 
  2. Select an object.
  3. Scale the object by doing one of the following:
     • Click and drag: Hover over the object’s bounding box to make the cursor appear. Then, click-and-drag to resize.
     • Scale multiplier: Use the scale multiplier, in the Scale panel of the right sidebar. Open the dropdown to select a multiplier, or type a multiplier in the text field and press Enter / Return to apply.
     • Dimensions fields: Use either the width or height fields, in the Scale panel of the right sidebar. Type a number in either field and press Enter / Return to apply. The other dimension field will automatically update.

       

  Set scale direction

  The anchor box in the scale panel allows you to set which direction an object scales when using the scale multiplier or dimension fields.

  You use the anchor box to set the object’s anchor point, which tells Figma which side of the object to stay put. Once you scale your object, it scales in the opposite direction of the anchor point.

  For example, if the anchor point is set to center, the object’s center stays put and resizes in all directions. If you set the anchor point to the top-left, an object will resize down and to the right.

  To change an object’s scale direction:

  1. Activate the scale tool K.
  2. Select the object.
  3. Click on one of the anchor points in the anchor box.
  4. Use the scale multiplier or dimension fields to scale the object.

  

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