Related Videos

• Frames in Figma

  Before you start

  Who can use this feature

  Anyone on any team or plan can use frames.

  Anyone with can edit access to a file can create and edit frames.

  In Figma, you can add layers directly to the Canvas. If you're designing for a specific device or screen size, you may want to create a container for your designs. This is where frames come in.

  If you've used design tools before, you'll be familiar with artboards. Like artboards, frames allow you to choose an area of the canvas to create your designs in.

  Unlike traditional artboards, you can also nest frames within other frames. This allows to create more complex design that work together.

  Frames also give you access to extra functionality, like Layout Grids, Auto Layout, Constraints, and prototyping.

  Create frames

  Create frames in the canvas using the frame tool. There are a few ways to select the frame tool:

  • Use the keyboard shortcuts F or A
  • Select the frame tool in the toolbar:

  Then you can create a variety of frame sizes in the canvas:

  • Click in the canvas to create a default frame with 100 x 100 dimensions
  • Click and drag in the canvas to create a frame with custom dimensions
  • Use the dropdown in the right sidebar to select a frame preset.
    1. Choose presets for popular device and assets templates:
       • Phone
       • Tablet
       • Desktop
       • Watch
       • Paper
       • Social Media
       • Figma Community
    2. Click the arrow to expand the section and select a preset from the list.

  Identify frames by the in the Layers Panel.

  Tip!  You can also create a frame around existing objects, whether it's a single layer or selection of layers. Use the frame selection keyboard shortcut:

  • MacOS: ⌥ Option ⌘ Command G
  • Windows: Ctrl + Alt + G

  Frame properties

  There are a few properties associated with frames. Frames support the following properties.

  • Corner Radius: Round the corner of a frame to create softer edges.
  • Clip Content: Hide any objects within the frame that extend beyond the frame's bounds.
  • Layout Grids: Create guidelines to help with the visual structure to your designs.
  • Auto Layout: Create dynamic Frames that respond to their contents
  • Fill: Apply a Solid Fill, Gradient, Images (PNG, JPEG, GIF, TIFF and WEBP) to a Frame.
  • Stroke: Add strokes to a Frame to create a border or outline
  • Effects: Add a shadow or blurs to a Frame

  Extra functionality

  Frames allow you to access extra functionality in Figma. You will need to use Frames to use the following features or functions:

  • Layout Grids: Apply transparent grids, columns, and/or rows to Frames to provide visual structure
  • Constraints : Define how child objects respond when you resize a Frame. Apply Constraints to objects within a Frame.
  • Auto Layout: Add Auto Layout to Frames to create dynamic layouts that respond to their contents
  • Prototyping: Create interactive prototypes that move between Frames in your Canvas

  A Frame is a parent object. This means that it can control or influence any child objects you place within it.

  Learn more about parent/child relationships in Figma →

  Adjust properties of the frame

  In the past, it was possible to adjust the properties of child objects when you selected the Frame. Now, you can adjust the properties of the frame itself.

  • Select a child object by using the keyboard shortcut: Enter or Return.
  • Press the Tab key to select the next sibling.
  • Press Shift + Tab to select the previous sibling.
  • Press Shift + Enter to select the parent

  If you want to adjust the fill and stroke properties of a frame and it's children, you can use Selection colors to view or adjust colors in a mixed selection.

  Nest frames within other frames

  In Figma, you can create frames within other frames. We call this process nesting. This allows you to combine frames with different properties to build complex interfaces.

  This creates new hierarchies or relationships:

  • Top-level frames: Any frame that is directly on the canvas. For a frame to be a top-level frame, you can't nest it within another frame, group, or object.
  • Nested frame: Any frame that is placed within another frame. You can place frames within top-level frames, or within other nested frames. Nested frames are both a parent and a child.
  • Children: Any object that is within a frame. 

  Learn more about parent, child, and sibling relationships.

  Top-level frames

  Figma bolds top-level frames in the Layers Panel and shows the name of any top-level frames on the canvas:

  Nested frames

  Nested frames are frames that you place within another frame or object. This makes them both a parent and a child. You can place frames within:

  • Top-level frames
  • Other nested frames
  • In groups

  In our example below, each of our elements are in their own frame. We have a status bar at the top and a navigation menu at the bottom. We also have a card that includes the details of our Upcoming Tickets.

  Using one of our device presets, we can create a top-level frame for our elements. We can add our elements to the top-level frame to build a single screen in our mobile app.

  

  Resize frames

  You can interact with frames like any other object on the canvas, including change the size or scale of frames. There are a few ways to change the size of a Frame:

  Drag the frame

  Drag to resize a frame manually.

  1. Select the frame in the canvas, or Layers Panel in the left sidebar.
  2. Click the handle in one of the corners and drag to resize. Or, click one of the edges and drag.

  Tip! To ignore any Constraints on child objects, hold down the modifier key:

  • macOS: ⌘ Command
  • Windows: Ctrl

  Change the frame preset

  Select another frame preset to change the frame's size. 

  1. Select the frame.
  2. In the Properties Panel in the right sidebar, select the frame field.
  3. Select a preset from the list. 
  4. Choose presets for popular device and assets templates:
     • Phone
     • Tablet
     • Desktop
     • Watch
     • Paper
     • Social Media
     • Figma Community
  5. Figma will update your frame's dimensions to match the preset.

  Note: If you have applied Constraints to any child objects, Figma will resize them to match the new frame preset. Otherwise, objects inside the frame will stay at the original dimensions and position.

  Properties Panel

  Update the Frame's Width and Height using the Properties Panel in the right sidebar.

  Enter a new number in the W and H fields, or hover over the icon to scrub the field. Drag left to decrease and right to increase.

  Toggle on the link button next to the Width and Height to constraint resizing to the current proportions.

  

  Tip! You can use the dimension fields to perform calculations. This allows you to quickly scale or resize objects.

  • % Percentage e.g. 50% 
  • + Add e.g. +100 
  • -  Subtract, e.g. -20 
  • *  Multiply, e.g. *4 
  • /  Divide, e.g. /8 

  It's not possible to multiply a width or height by a percentage e.g. *50% will result in a value 50x the original, not 50%.

  Resize to Fit

  You can resize a Frame so that it shrinks or grows to fit its child objects. This will redraw the Frame around the outermost bounds of the objects within it.

  • Use the keyboard shortcut:
    • macOS: ⌥ Option Shift ⌘ Command R
    • Windows: Alt Shift Control R
  • Click in the top-right corner of the Properties Panel
• Using the Arc Tool

   

  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.

  
• Sketch on the canvas with the pencil tool

  Use the pencil tool to sketch on the canvas or other objects. It's a great way to call attention to something on the canvas or draw something fun.

  Use the pencil

  By default, the pencil tool sketches with a round 3px stroke weight in black, unless you're sketching on a dark canvas or frame. These properties can be adjusted before or after you start sketching.

  To start drawing:

  1. Click pencil in the top toolbar or press ⇧ P.
  2. Pick a color fill, stroke weight, and end point style from the Stroke section of the right sidebar.
  3. Click and drag on the canvas to sketch.

  The pencil tool stays active until you select another tool or press Esc.

  Want to draw in a straight line? Hold Shift while drawing, or try the pen tool.

  Edit pencil sketches

  Color and stroke properties

  You can change a pencil sketch's colors, add a color style, end point style, and stroke weight at any time.

  1. Select the sketch on the canvas.
  2. Edit the color fill, stroke weight, and end point style from the Stroke section of the right sidebar. You can also click to change the line style to dashes, or created a custom style.

  Learn more about applying paints with the color picker →

  Dimension

  To change the dimension of a pencil sketch:

  1. Select the layers you want to adjust.
  2. Drag the side or corner of a sketch's bounding box to resize its dimensions.

  You can resize proportionally by pressing ⇧ Shift while dragging.

  Learn more about editing vector networks →

  Delete pencil sketches

  To delete a pencil sketch:

  1. Select any sketches you want to remove from the canvas or Layers panel.
  2. Press Delete.
• Vector networks

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access to a file can create and edit vector networks.

  Vector networks are one of the most unique features in Figma. Most pen tools draw paths in a loop with a defined direction, always wanting to reconnect to their original point. Vector networks do not have a direction and can fork off in different directions without requiring a separate path object to be created. Complex objects can then be created within the same object and with the same properties much faster than they could be drawn using traditional vector path tools.

  Create vector networks

  You can use the Pen tool, or any of the Shape tools, to create a new vector layer.

  When using Shape tools, you can hold modifier keys to draw them in specific ways:

  • Hold ⇧ Shift while creating a shape to lock the shape’s aspect ratio to 1:1.
  • Hold ⌥ Option / Alt while creating a shape to make it scale relative to its center instead of its top-left corner.
  • As you click and drag to create a shape, hold Space to move the shape around the canvas before releasing your mouse click.

  Edit vector networks

  Vector edit mode lets you can select, adjust, or change properties of individual points, lines, or entire shapes. When you're editing an object, you can interact with the existing points and the lines between them. You can also use the Pen tool to plot additional points and manipulate those as well.

  To enter vector edit mode:

  • Select a path and press Return / Enter
  • Or, select a path and click  from the toolbar

  To exit vector edit mode, press Return / Enter again, or click Done in the toolbar.

  Fills

  Add fills to closed regions of a vector network.

  1. Select a vector network.
  2. Click in the toolbar or press Return / Enter to enter edit mode.
  3. Click in the toolbar or press B to select the paint bucket tool.
  4. Click the area of a closed vector network to add the fill.

  You can add different fills to separate regions of a vector network as long as they are separate closed regions.

  Bézier Curves

  To access a point’s Bézier handles:

  1. Select a vector network.
  2. Click in the toolbar or press Return / Enter to enter edit mode.
  3. If it is a curve, the handles will already be showing. If it is a corner with no handles, press in the toolbar or hold ⌘ Command / Control and click the point to show the handles and create a mirrored curve.
  4. Click and drag the handles to adjust the path's curve.

  Rounded Corners

  Any intermediate point on a path can be rounded via the corner radius property in the right sidebar. If you select the entire path, it rounds all corners to the same degree. If you go into edit mode, you can select individual points and round them separately.

  Terminal points on an open path can only be rounded via end caps.

  Caps

  Add styling to the end point of any open paths. Figma displays the cap property differently depending upon the type of vector path you have selected.

  Vector paths with two endpoints

  Figma will display cap properties in the right sidebar if a vector path with only two endpoints is selected. You are able to set each end cap independently of the other.

  Vector paths with more than two endpoints

  Figma will display cap properties in the advanced stroke menu ↓ if a vector path with more than two endpoints is selected.

  You cannot edit end caps independently when the entire vector path selected. To edit end caps independently, select a single vector point while in vector edit mode →.

  Cap types

  Choose from:

  • None: Adds no cap to the end of the path. The end of the path are squared off, without adding any length to 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. You cannot change the length of the arrow head lines.
  • 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.
  • Reverse triangle: A reversed or flipped version of the triangle arrow, with the arrow point facing inward toward the path.
  • Diamond arrow: A solid diamond cap.
  • 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.

  Check out this Vector networks video tutorial to see them in action. And be sure to read “Introducing Vector Networks” on our Medium page.

• Basic shape tools in Figma design

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access to a design file can use basic shape tools.

  Shapes make up the majority of your layers in any given design. Figma has some basic shapes you can use as your building blocks.

  • Rectangle
  • Line
  • Arrow
  • Ellipse
  • Polygon
  • Star

  You can access these basic shapes from the Shape tools menu in the toolbar. Click the arrow next to the Rectangle to open the shape tools menu

  For designs that require unique or complex shapes, you can build your own vector networks using Figma's one-of-a-kind Pen tool.

  

  Shape shortcuts

  • Hold down Shift when dragging to create perfect squares, circles and polygons.
  • Hold down Option / Alt to create and resize shapes from their center.
  • Hold down Shift and Option / Alt at the same time to do both actions.

  Rectangles

  Use the rectangle tool to create both rectangles and squares.

  1. Select the Rectangle tool from the toolbar, or press R for the keyboard shortcut.
  2. Click on a spot in the canvas and drag to create the rectangle. You’ll see the rectangle’s dimensions underneath the bottom edge:
     

     

  3. There will be a handle in each corner of the shape, this allows you to resize the shape as you see fit.

  Adjust corner radius

  In addition to the regular handles, rectangles also have four circle handles on the inside of every corner. These handles allow you to adjust the corner to round the corners of the rectangle. Learn more in our Adjust corner radius and smoothing article.

  Lines

  The Line tool allows you to create lines in any direction. Lines are an effective way of breaking up content within a design, or simulating CSS borders.

  1. Select the Line tool from the shape tools or press the L key.

     

  2. Click on a spot in the canvas and drag in any direction to create the line:
     

     

  3. You can make any changes to its appearance in the Stroke section of the right sidebar. This includes the color, position, weight, style, and end point tips or caps. Stroke properties →

  Create dashed lines

  You can specify both the length the Dash and the distance or Gap between them.

  1. Draw or select the line.
  2. In the Stroke section of the right sidebar, select to open the Advanced stroke menu.
  3. Enter the length you want for the Dash and the Gap.

  Arrows

  The Arrow tool allows you to draw one-sided and two-sided arrows. You can customize the tips or caps of the arrow’s end points.

  1. Select the Arrow tool from the shape tools menu, or use the shortcut ⇧ Shift L.
  2. Click on a spot in the canvas and drag in any direction to create the arrow.
  3. Like the line tool, you can make adjustments to the Stroke properties.
  4. Update both the start and end points independently in the Stroke section.
  5. Hover over the space between the two fields and click the two arrows to Swap start and end points. Stroke properties →

  Ellipses and circles

  Use the Ellipse tool to draw both ovals and circles. These can be used as they are, or manipulated to create custom shapes with curved lines.

  1. Select the Ellipse tool from the shape tools menu, or press the O key.

     

  2. Select a spot in the canvas and drag in any direction to create the ellips. The shape's dimensions will be shown in blue underneath the layer:
     

     

  3. There will be a blue bounding box around the ellipse, with a handle in each corner. This allows you to resize the shape.

  Tip! Use the ellipse tool to create other shapes, like semi-circles, pie charts, rings, donuts and semi-circular rings. Use the arc tool →

  

  Polygons

  The Polygon tool allows you to draw an enclosed shape that is made up of any number of straight lines.

  The default shape for the polygon tool is a triangle, but you can add extra points to the object to create your own custom polygons.

  1. Select the Polygon tool from the shape menu.
     

     

  2. Select a location in the canvas and drag to create the Polygon. The shape's dimensions will be shown in blue underneath the object.
  3. The blue bounding box around the shape has a handle in each corner. This allows you to resize the shape as you see fit.
  4. Enter >Edit object mode by double-clicking on the polygon layer. This allows you to add additional points to the polygon and manipulate each point individually:
     

     

  5. You can round the corners of a polygon too. Hover over the handle in the corner until the Radius is shown. Click and drag the handle towards the center of the object to round the corners.

  Polygons and bounding boxes

  You may have noticed that when we drew our polygon, in this case a triangle, the blue bounding box around the shape is below the bottom of the shape.

  This allows the bounding box to remain a consistent shape or size, when additional points are added to the polygon. To snap the bounding box to the shape's true boundary, you can flatten the shape.

  Right-click on the shape and choose Flatten, or use the keyboard shortcut:

  • Mac: Command</kbd E
  • Windows: Ctrl + E

  Stars

  The star tool creates polygons that are arranged in a star shape. When you create a star layer, the default will be a five pointed star with ten sides.

  1. Select the Star tool from the shape tools menu.
     

     

  2. Select a position in the canvas and drag in any direction to create the star.
     

     

  3. You’ll now have three handles you can use to manipulate the star:
     
     • Count: how many points there are to the star. The minimum is three and the maximum is 60.
     • Ratio: the distance of the inner points of the star from the center. This is represented as percentage of the star's diameter.
     • Radius: allows you to round the point, similar to how corner radius works on a rectangle.

  Tip! Select Edit object mode in to toolbar to adjust the radius of each point independently.

• Boolean operations

  Before you Start

  Who can use this feature

  Users on any plan

  Users with edit access to a Figma design file can use boolean operations

  Video tutorial

  Types of boolean operations

  Boolean operations combine any set of shape layers through one of four formulas: union, subtract, intersect, and exclude. 

  

  Boolean groups are treated as a single shape layer and share fill and stroke properties and can be combined with other boolean groups through subsequent boolean operations.

  • Union: Union combines the selected shapes into a boolean group. If the objects overlap, the new shape’s outer path consists of the composite of its sublayers’ paths minus any segments that overlap. The stroke would then be applied to that outer path ignoring any path segments which overlap each other.
  • Subtract: Subtract is the opposite of union. Subtract removes the area of a shape or set of shapes from a base shape. Only the bottom shape layer is solid, the rest are subtracted from it.
  • Intersect: Intersect creates a boolean group whose shape consists only of the overlapping parts of its sublayers.
  • Exclude: Exclude is the opposite of intersect. Exclude shows only the areas of its sublayers that do not overlap.
• Frames and Groups

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create, edit, and remove Groups and Frames.

  Groups and Frames allow you to combine layers together so that they can be treated like a single layer.

  Groups

  By default, groups take on the combined dimensions of their children.

  • To make a group, select some layers and choose “Group”, or use:
    • macOS: Command-G
    • Windows: Control + G
  • The first time you click on a layer in this group, the entire group will be selected.
  • To select a single layer within this group, double-click the item, or choose it from the layers panel.
  • As the layers within a group are moved around, the bounds of the group will adjust to fit the layers within.
  • You can move things into and out of this group by dragging layers within the layers panel.
  • You are allowed to nest groups inside other groups.
  • To un-group, select the group and choose “Ungroup”, or use:
    • macOS: Shift-Command-G
    • Windows: Shift + Control + G

  Frames

  Sometimes, it is useful to have a layer whose size is explicitly set by you. These are called Frames.

  • To make a frame, choose the Frame Tool F and drag out an area of the screen, or use:
    • macOS: Command-Option-G
    • Windows: Control + Alt + G
  • To add layers to this group, just drag them in.
  • To remove layers from this group, just drag them out.
  • Selecting and moving items within a Frame works exactly the same way as groups.
  • To un-group, select the group and choose “Ungroup”, or use:
    • macOS: Shift-Command-G
    • Windows: Shift + Control + G

  Frames are drawn directly on the canvas and we draw them in a special way to make them easier to see and work with.

• Edit Object

   

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can Edit Objects.

  About Edit Mode

  You can create shapes using the Pen Tool, or you can use the shape tool to drag out an image on the canvas.

  Once you've drawn a shape, use the Edit Object button in the toolbar to quickly enter vector edit mode. You can also double-click, or use  Enter .

  

   

  The Pen Tool

  When you're editing an object, you can interact with the existing points and the lines between them. You can also use the Pen Tool to plot additional points and manipulate those as well. 

  Paths between the points can be straight lines, or you can curve them using the Bend Tool to activate Beziers.

  To turn the handle controls on, while clicking, use the modifier key:

  • macOS: Command
  • Windows: Control

  

  Tip! If you haven't already, check out  The Bezier Game and read our Vector Networks article to learn how to master the Pen Tool.

• Masks

  Before you start

  Who can use this feature

  Anyone on any team or plan

  Anyone with edit access to a file can use masks.

  Use masks to show specific areas of objects while concealing the rest.

  It's like placing a photograph inside a picture frame with a small opening. You'll see a portion of the photograph peeking through the opening, while the rest is concealed without the need to trim it down to size.

  Since no portion of masked layers are modified or deleted in this process, masks are a non-destructive action. This allows you to preserve the concealed areas without the need to trim them down to fit.

  How masks work

  Any layer can be used as a mask, including vector shapes, text layers, images with transparency channels, groups, and more.

  

  When you use a layer as a mask, a mask object is created, which includes the mask and any layers it is masking. A mask object can be identified in the Layers panel by a at the base denoting the mask, and an upward-facing arrow along the layers being masked.

  

  Masks are positioned below masked layers on the z-axis. The mask applies to all siblings above it until it reaches:

  • Another mask or mask object
  • The mask's parent frame or group
  • A frame or component with clip content on

  Learn more about parent, sibling, and child relationships →

  In the example below, the purple ellipse is acting as the mask. If the mask sits below the image of the person on the z-axis, it'll successfully mask that image. If the mask sits above the image, it won't be masked.

  

  Mask types

  Alpha channels and transparency

  All masks in Figma support alpha channels. Alpha channels represent the degree of transparency, or opacity, in a color, image, or object.

  When working with alpha masks, masks are applied based on the opacity of the mask. The higher the opacity, the more that is revealed. Zero percent (0%) opacity reveals nothing.

  This means we can utilize blurs and opacity in our masks:

  • Import existing PNGs, GIFs, and WebP files with transparency (alpha channels)
  • Use layer blur effects to replicate feathering
  • Apply drop and inner shadows to create depth
  • Add fills, strokes, and gradients with varying opacity

  In the example below, we've used an ellipse with an outside stroke as our mask. The opacity of the ellipse's fill is 100% and the opacity of the stroke is 30%. More is revealed in the center of the image, where the mask's opacity is higher (100%).

  

  Vector

  Vector masks, or using shape outlines as masks, ignore the translucency—or any opacity value of more than zero percent (0%)—of a mask's fill or stroke. If a mask contains any area with an opacity of more than 0%, then its outlines are used as the mask and the entire mask assumes 100% opacity.

  In the example below, a heart png image with a completely transparent background is being used as a mask. The bottom left is using an alpha mask, so we see the outline of the heart. The bottom right is using a vector mask, and uses the outline of the entire image as the mask.

  [IMAGE]

  Using masks

  Masks must contain a fill with an opacity of more than 0% for effects and masked objects to show.

  In this section, we'll go over how to create mask objects and how to reposition, resize, change properties of, and remove masks. 

  Create a mask

  1. Choose an object you want to use as your mask, and place it behind all objects that'll be masked on the z-axis.
  2. Select all layers that will be a part of the mask object.
  3. Choose any of the following methods:
     • Click in the top toolbar
     • Right-click the object and select Use as mask
     • Use the keyboard shortcut:
       • Mac: ⌃ Control ⌘ Command M
       • Windows: Ctrl Alt M

  Doing this will use the bottom-most object as a mask and place the mask object into a group.

  If you want to add additional layers to an existing mask group, you can do this by clicking and dragging them into the mask group from the Layers panel of the left sidebar. 

  You can also drag the mask up or down in the Layers panel to include or exclude layers to be masked. 

  

  Learn more about reordering layers →

  Note: If you use an object on the canvas as a mask, Figma will place the newly created mask object in a group.

  Resize and reposition

  Resizing a mask won't resize any layers it is masking, and vice versa. The same is true for repositioning masks and layers it is masking.

  

   

  Because they are siblings of one another, masks won't have any parenting behavior that a frame, group, or component might have. Thus, the contents of a mask object move and resize independently from one another.

  Learn more about parent, sibling, and child relationships →

  Apply properties to a mask

  Masks are "invisible" on the canvas. Any properties — like stroke, fills, or effects — added to a mask layer are treated as masks as well.

  Figma recognizes transparency levels for masks, so you can adjust the opacity according to how much you want the masked objects to show through.

  Remove a mask

  To stop using an object as a mask, use any of the following methods to toggle it off:

  • Select the mask and click in the top toolbar
  • Right-click the mask and select Use as mask.
  • Select the mask and use the keyboard shortcut:
    • Mac: ⌃ Control ⌘ Command M
    • Windows: Ctrl Alt M

  Any portions hidden by the mask will reappear.

  Reveal mask outlines

  By default, Figma does not show the boundaries of a mask. Use mask outlines when working with complex masks or to check for unintended empty spaces.

  To see them, toggle on/off mask outlines:

  1. Open the Figma menu
  2. Go to View
  3. Click Mask outlines

  If you toggle on this setting on, the masks in your file will be outlined in green.

  

  You can also search "show mask outlines" using quick actions.

  Note: If all layers being masked are hidden or have 0% opacity, then the object's mask outlines won't appear.

  Use shape outlines to ignore transparency

  Use shape outlines allows you to ignore the transparency of a mask's fill or stroke and the alpha transparency of an image. Instead, it uses the outline of its shape as the mask, and assumes 100% opacity.

  1. Select a mask with transparency, or an alpha channel.
  2. Check or uncheck Use shape outlines in the Mask section of the right sidebar.

  Note: Using shape outlines doesn't work on layer opacity or opacity from effects.