Apply Constraints to define how layers resize

    Before you Start

    Who can use this feature

    Users on Any Figma plan can use Constraints

    Users with Edit access to a File can apply and edit Constraints. Constraints can only be applied to objects within Frames.

    Constraints tell Figma how objects should respond as 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 an object's Constraints to Top and Left by default.

    Horizontal Constraints

    Horizontal constraints define how an object behaves, as you resize the Frame along the x axis.

    • Left maintains the object’s position, relative to the left side of the frame.
    • Right maintains the object’s position, relative to the right side of the frame.
    • Left and right maintains the object’s size and position relative to both sides of the frame. This may cause objects to grow or shrink along the x axis, when resized.
    • Center maintains the object’s position, relative to the horizontal center of the frame.
    • Scale will define the object’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 object's width is 70px i.e. the object takes up 70% of its parent Frame. If we resize the Frame to 200px wide, Figma will resize the object to a width of 140px, 70% of 200px.

    Vertical Constraints

    Vertical constraints define how an object behaves, as you resize the Frame along the y axis.

    • Top maintains the object’s position, relative to the top of the frame.
    • Bottom maintains the object’s position, relative to the bottom of the frame.
    • Top and bottom maintains the object’s size and position relative to the top and bottom of the frame. This may cause objects to grow or shrink along the y axis, when resized.
    • Center maintains the object’s position, relative to the vertical center of the frame.
    • Scale will define the object’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 object’s position, more than one Constraint may achieve the same result.

    Apply Constraints to an object

    You can apply Constraints to any object within a Frame. 

    • You can also apply Constraints to Frames you have nested within other Frames.
    • You can apply both horizontal and vertical constraints to objects.
    • You can use Constraints to define how objects respond in scrolling Prototypes. Learn more about Prototyping in Figma.
    • You can't apply constraints to Groups. A Group will inherit its bounds from the objects contained within it. They aren't considered a single object with bounds. 

    Note: If you apply Constraints to a Group, we apply these to the individual objects instead.

    To set the constraints for an item:

    1. Select the object 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 object's constraints.
      • Or, click on the lines in the interactive diagram to select a constraint.
    3. If you want the object to stay in the same position, even when scrolling, check the box next to Fix position when scrolling.

    Tip! Hold down Shift to select more than one Constraint. For example: Left and Right Constraints.

    Ignore Constraints

    Sometimes you may want to resize a Frame or object, without using the Constraints that are applied to it.

    You can temporarily ignore any Constraints applied to an object by holding down a modifier key.

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

    To resize the object with Constraints, release the modifier key.

    Constraints and Layout Grids

    Constraints give you a basic framework for positioning objects 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, by default, Figma will align any objects within the Frame to that Grid.

    Learn more about using Constraints and Layout Grids in Working with Constraints and Layout Grids.

    Related Videos

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

      Image showing where the corner radius setting is in the top section of the right sidebar

      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.

      Image showingon canvas handles which we can use to adjust the corner radius of our phone wallpaper

      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

      Image showing the independent corner setting in the right sidebar

      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.

      Hold down the modifier key as you hover over a corner to adjust only that corner

      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.

      Overlay_showing_how_corner_smoothing_affects_corner_radius__2_.png

      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.Image showing how to access the corner smoothing setting via the three dot menu in the right sidebar
      5. Drag the slider right to increase and left to decrease. Click iOS to set Corner Smoothing to 60%, the default for iOS. Click_iOS_to_set_corner_smoothing_to_60_.png

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

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

      Stroke is a collection of properties you can apply to a vector object. You can think of Stroke as a visual representation of a vector path.

      Apply stroke properties to any vector object to:

      You can then control how the stroke looks with color, weight, distribution, and end point properties.

      Note: When you select an object, we will apply these Stroke properties to the entire object. Use vector edit mode to change the stroke properties for specific vector points.

      Stroke properties

      Access these properties in the Stroke section of the properties panel.

      Annotated image showing each stroke property in the right sidebar as it corresponds to the list above

      1. Use the color picker to adjust the paint and set an opacity for the current stroke. Learn how to use the color picker →

        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

      2. Click to open the Style picker. From there you can apply a color style or create a new one from the current selection.
      3. Click to add a new stroke to the current selection. You can add multiple strokes
      4. Use the weight field to select a weight of the stroke, in pixels. Enter a value in the field provided, or scroll through values using your mouse/trackpad while the field is in focus.
      5. Click to define where on the path you want to apply the stroke. Choose from Inside, Outside, and Center.
      6. Click to toggle the visibility of each stroke.
      7. Click to remove the stroke from the selected layer.
      8. Click to open the Advanced Stroke menu to access extra settings (see below).

      Advanced Stroke menu

      The Advanced Stroke menu lets you access extra settings.

      Caps

      Add styling to the end point of any open paths. Choose from:

      • None (default): Adds no cap to the end(s) of the path. The end of the path are squared off, without adding any length to the path.
      • Round: 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: Adds two 45-degree lines to either side of the end point(s). This uses the same stroke weight as the path itself.
      • Triangle Arrow: Add a 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.

      Image showing how Figma renders each cap option

      Dashes

      Create dashed or dotted lines. Enter the dash length, a comma, then the distance between dashes. For example: 5,5

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

      Join

      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 degrees will bevel, anything > 90 above will be sharp.

      Image showing how Figma renders each join option

      Export strokes to SVG

      In Figma, you can apply Inside, Center or Outside stroke. SVG as a format only supports Center stroke.

      If you use an Inside or Outside stroke and export to SVG, Figma will simplify the stroke. This converts the Inside or Outside stroke to a Center stroke, this won't affect how the exported object looks.

      Learn more about simplify stroke in our Export settings article.

      Styles and strokes

      At the moment, there isn't a way to save a stroke's non-color properties, like weight and distribution, as a Style. However, you can apply color Styles to any stroke.

      When apply a Style to a stroke, you will still be able to adjust the other properties. This includes the weight and distribution, as well as any advanced stroke properties like caps, join, and dashes.

      Apply a color style to a stroke

      1. Select the stroke you want to apply the Style to.
      2. In the Stroke section of the right-hand panel, click the Style icon
      3. Select the Style using the style picker.
      4. Adjust any of the other properties of the stroke, as desired.

      Image showing a color style applied to a stroke with the rest of the properties as editable

      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 →

      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.

      Image showing how much more complex a shape is when you use outline stroke

      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.

    • 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

      The selection colors section of the properties panel, with other menus you can access, including the color and style pickers.

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

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

      Before you start

      Who can use this feature

      Colors are available on any team or plan

      Anyone with can edit access to the file can use the color picker and select a color model.

      There are lots of terms used to describe color. In this article, we use the term color model to describe the different ways your can represent a color.

      Figma allows you to see colors across five color models: HEX, HSB, HSL, CSS, and RGB.

      Switching between color models only affects how Figma describes colors, it doesn't affect how Figma renders them.

      Image showing five color pickers with the same color represented in each color model

      Color profiles do affect how Figma renders colors. If you are using the Figma Desktop app, you can choose to apply a different color profile to your working space. 

      Regardless of your desired color profile, Figma exports all assets using the sRGB color profile. Learn about color management in the Desktop app.

      Color models in Figma

      By default, Figma represents color values using the HEX model. You can also view color notation for other models in the color picker.

      HEX

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

      Creators in web, or digital design refer to the notation for this color model as hexcodes.

      RGB

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

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

      You may have also seen RGBa referenced in other resources. The a in RGBa stands for alpha, which represents the opacity of the color. This represents opacity as a value between 0 and 100%.

      HSB

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

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

      All color models will have an additional Alpha channel (or value), which represents the Opacity of the color.This represents opacity as a value between 0 and 100%.

      HSL

      Hue Saturation Luminance is another color model based around how the human eye perceives color.

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

      CSS

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

      Want to communicate colors to a developer or engineer? The CSS model lets you copy CSS-friendly notation for the selected color. This lets you paste this directly into a stylesheet, formatting included. Learn more about Developer Handoff.

      View Color models in the Color Picker

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

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

      1. Click on the Fill or Stroke in the right sidebar to open the Color picker.
      2. Below the Hue and Opacity sliders you can see the current color model and the corresponding values.
      3. Use the drop down to switch color models. Choose between HEX, HSB, HSL, CSS and RGB:Image showing the color models available in the color picker
      4. Figma will show the values in the notation you selected.
    • Rename Layers

      Before you Start

      Who can use this feature

      Users on Any plan

      Users with Edit access to a File to rename layers

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

      Rename layers modal

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

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

      Rename layers in bulk

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

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

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

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

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

      Example 1: Rename every layer to the exact same name

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

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

      Example 2: Rename each layer with a numerical suffix

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

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

      Example 3: Add a prefix to every layer

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

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

      Rename part of a layer's name

      While you were using the modal, you may have noticed a " Match" field. This allows you to identify which part of the layer's name you want to update.

      By leaving this blank you can update the entire name, but you can also use this field to remove or update part of the layer's name (e.g. change the " Icon/" part in the name "Icon/Home" to "Image/").

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

      Use Regular Expressions (Advanced)

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

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

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

      Some common patterns to get you started are:

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

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

    • Lock and unlock layers

      Before you start

      Who can use this feature

      Anyone on any team or plan has access to the layers Panel in the Editor.

      Only users with can edit access can lock and unlock layers.

      Lock layers to prevent them from being moved in the canvas, or protect them from accidental edits. When you lock a layer, you can't interact with or move it around in the canvas. You can still select a locked layer in the Layers Panel or adjust any properties of the layer.

      If you lock a parent frame or group, then any child layers of that frame or group will also be locked. It's not possible to unlock child layers without unlocking the parent. Learn about parent and child relationships →

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

      Keyboard shortcuts

      • Mac: ⌘ Command ⇧ Shift L
      • Windows: Ctrl Shift L

      Canvas

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

      Layers Panel

      1. Hover over the layer in the Layers Panel until the appears.
      2. Click the padlock to lock the layer. Figma will close the padlock next to the layer in the Layers Panel.
      3. If this is a frame or group, then any children of that frame/group will also be locked.
      4. You will no longer be able to edit the layer in the canvas.
      5. Click the padlock again to unlock the layer.

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

    • Toggle visibility to hide layers

      Before you Start

      Who can use this feature

      Users on Any plan can access this functionality

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

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

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

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

      Keyboard shortcuts

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

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

      Layers Panel

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

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

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

    • Paints in Figma

      Before you Start

      Who can use this feature

      Users on Any plan can use paints in their designs

      Users with Edit access can use 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

      Paints.png

      Paint types

      There are three different types of paints you can apply:

      • Solid: a solid color or paint.
      • Gradients (4)
        • 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.

      Fill_Type__4_.png

      Watch the Gradients video tutorial

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

      Fill.png

      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: Fill_section.png
      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.

      Paints.png

    • 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

      Fill section in the right sidebar with the cursor hovering over the current color swatch

      Use the color picker

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

      Annotated image showing each setting of the color picker

      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 →

    See more

    Connect, share, and learn from a global community of Figma users

    Join the Support forum