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.

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

  Note: There isn't currently a way to align more than one object to their parent. Figma will show you guides on the canvas when moving a selection within its parent container. This helps you align your selection to the vertical and horizontal centers of the parent frame.

  Icon key

  • Align left
  • Align horizontal centers
  • Align right
  • Align top
  • Align vertical centers
  • Distribute horizontal spacing ↓
  • Distribute vertical spacing ↓
  • Tidy up (smart selection) ↓

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

  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

  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.

• Paints in Figma

  Who can use this feature

  Supported on any team or organization plan.

  Anyone with can edit access can apply or edit paints

  Paints can be colors, gradients, or images. In Figma, you can use the Color picker to apply paints to fills and strokes.

  Paints can be applied to the following objects and shapes using the fill or stroke properties:

  • Text layers
  • Basic shapes
  • Vector networks
  • Boolean operations
  • Frames

  

  Paint types

  There are three different types of paints you can apply:

  • Solid: a solid color or paint.
  • Gradients: choose from four different gradients:
    • Linear (gradient): a progressive transition between two colors on a straight line. You can choose the angle of the line.
    • Radial (gradient): a circular gradient that has a color at the center which transitions to another color on the edge. This could be another color, or a fade to transparent.
    • Diamond (gradient): a gradient with four points that starts in the center of the object or layer. You can adjust the width and height of the gradient individually.
    • Angular (gradient): creates a gradient clockwise from the starting position. You can adjust the location of both colors in the gradient to create a softer or harsher angle.
  • Image or GIF: a static image or animated GIF. Learn more about adding images to your designs.

  

  Figma Tutorial: Gradients
• Apply paints with the color picker

  Before you start

  Who can use this feature

  Supported on any team or plan

  You will need can edit access to the file to use the color picker.

  The color picker allows you to apply paints to text layers, strokes and other vector objects.

  Use the color picker to apply solid fills, gradients, or images. You can also control the hue, saturation, or opacity of a color, as well as apply blend modes.

  Open the color picker

  You'll need to apply a fill or stroke to a layer before you can access the color picker. Once applied, you can access the color picker in the right sidebar.

  If all layers in your selection have the same fill or stroke color, you can view and update the color in the Fill or Stroke section.

  If the layers in your selection have different colors applied, you can view and update colors from the Selection colors section.

  In the right sidebar, you can view a swatch of the current color, the hexcode value, and the opacity. To open the color picker, click on the color swatch.

  Tip! You can also type a CSS color directly in the field. See the list of CSS colors that are supported by all browsers on the w3 website: https://www.w3schools.com/cssref/css_colors.asp

  

  Use the color picker

  Once you've opened the color picker, you have access to any paint properties:

  

  1. Use the top-left menu to select a type of paint. Choose from a solid color, a gradient, an image or an animated GIF.
  2. Use the to preview and apply blend modes to layers →
  3. Use the color palette in the body of the modal to select a color:
     • View the current color is shown in the white circle.
     • Explore any related tints, tones, and shades.
     • Click and drag the white circle to adjust the color.
  4. Click the to select the eyedropper tool. This allows you to select any color from an image or layer in the canvas.
  5. Adjust the hue using the slider below the palette. Click and drag left or right to adjust.
  6. Adjust the opacity of the color using the second slider.
  7. View the color notation across different color models. Use the menu to choose between RGB, HEX, CSS and HSB. Learn more about color models in Figma →
  8. Use the next to the Document color to select a palette. This allows you to select colors from local colors and styles, as well as styles from enabled libraries.

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

  1. MacOS: Option
  2. Windows: Alt

  Use the eyedropper tool

  The eyedropper tool allows you to select and sample colors from any object or image in a file. Use the eyedropper to identify colors and apply them to your layers.

  1. Select the object you'd like to edit.
  2. Use the i keyboard shortcut to open the eyedropper tool.
  3. Hover over the color in the canvas you'd like to sample. The magnifier window will show you both the color and hex code of the sampled pixel.
  4. Click to apply the sampled color to the selected object:

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

• Add fills to text and shape layers

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with Can edit access to a file can add or adjust fills.

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

  Apply paints to text layers, or any vector object, this includes shapes, vector networks, and boolean groups. You can add, adjust, and remove fills in the Fill section of the right sidebar.

  

  Add fills

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

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

  1. Select the layer(s) you want to add a fill to.
  2. In the Fill section of the right sidebar, click the icon to add a fill to the layer.
  3. Figma will add a default Solid fill with a hex value of C4C4C4. Click on the fill swatch to open the color picker:
  4. From the color picker you can select a paint type, choose a color, and apply blend modes. Learn more about using the color picker →

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

  Adjust fills

  Add, remove or adjust fill properties at any time. You can adjust fill in the Design panel of the right sidebar.

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

  If selected layers share the same fill properties, you can adjust them in the Fill section of the Properties Panel.

  If selected layers have different Fill properties, you can adjust each fill individually in the Selection colors section of the Properties Panel.

  • Hover over the left edge of the fill to reveal the drag handles . Click and drag on the handles to reorder fills.
  • Click the icon to toggle visibility off and the icon to toggle visibility on. Learn more about toggling visibility →
  • Click the icon to remove a fill from your selection.

  

• Apply shadow or blur effects

  Before you start

  Who can use this feature

  Users on any team or plan

  Users with can edit access to a 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 an unlocked game levels. Or provide visual hierarchy to focus a user's attention on a dialog box.

  In Figma, you're able to apply four types of effects to a layer or object:

  • 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

  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. Click the arrow to switch to Inner shadow.
  3. Click the Effect settings icon to adjust the shadow's settings.
     1. X: offset the drop shadow along the x axis (horizontal). Use with Y offset to set the direction of the light source.
     2. Y: offset the drop shadow along the y axis (vertical). Use with X offset to set the direction of the light source.
     3. Fill: Apply a paint using the color picker and set an opacity for the shadow
     4. 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.
     5. 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. Click the arrow 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.

• Create unique effects with Blend modes

  Before you Start

  Who can use this feature

  Blend modes are available on Any plan

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

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

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

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

  Blend Modes

  There are 16 Blend modes available in Figma.

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

  Fill

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

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

     

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

  4. Click the X to return to the Canvas.

  Layer

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

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

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

     

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

• View and adjust colors in a mixed selection

  Before you Start

  Who can use this feature

  Users on Any plan can use paints in their designs

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

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

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

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

  Selection colors include:

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

  Selection colors do not include:

  🚫 Images
  🚫 Hidden fills
  🚫 Masks

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

  View Selection Colors

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

  Figma groups colors into Color Styles and Paints - any Fills or Strokes that you haven't saved as Styles.

  Paints or Styles only appear once in the Selection colors section. By default, we show the three most frequently used Paints and Styles.

  1. Click on a Paint to open the Color picker. This allows you to adjust the paint type, color, hue, opacity, and blend mode. Or, pick another color from your Document colors.
  2. Click on a style to open the Style modal. This allows you to select from your list of local styles, or styles from enabled libraries.
  3. Click the detach icon
     to detach the style
  4. Click the target icon
     to select all layers that use that color
  5. Click the Style icon
     to open the Style picker. This allows you to apply a Style to the selected color, or create a new Style.
  6. Use the percentage field to adjust the opacity of a paint
  7. Click the See all colors or See all styles link to view the rest of the colors in the selection

  

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

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