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 our Relationships in Figma article.

  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:
  • Click in the top-right corner of the Properties Panel
• 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.

• Using Shape Tools

  Shapes make up the majority of your layers in any given design. 

   

  You can access all of the Basic Shapes from the Shape Tools menu in the Toolbar. Click the down arrow next to the Rectangle to view your options.

  You have six Shape Tools available:

  1. Rectangle Tool
  2. Line Tool
  3. Arrow Tool
  4. Ellipse Tool
  5. Polygon Tool
  6. Star Tool
  7. Frequently Asked Questions

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

  

  Tips for Creating Shapes

  • Hold down the Shift key while dragging to create perfect squares, circles and polygons.
  • Hold down the Option key to create and resize the shape from their center.
  • Hold down Shift and Option to do both!

  Rectangle Tool

  You can use the Rectangle Tool to create both Rectangles and Squares.

  1. Select the Rectangle Tool from the Shape Tools, or use the Keyboard Shortcut R
  2. Click on a spot in the canvas and drag to create the Rectangle: 

     

  3. The Rectangles dimensions will be shown in blue underneath the bottom edge: 
  4. There will be a handle in each corner of the shape, this allows you to resize the shape as you see fit.

  Line Tool

  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 use the Keyboard Shortcut L: 

     

  2. Click on a spot in the canvas and drag to create the Line: 

     

  3. Once a Line is created, you can make changes to its appearance in the Stroke section of the Properties Panel: 

     

     1. Adjust the Stoke Color and Opacity using the Color Picker. 
     2. Update the Weight to change the thickness of the Line, as well as choose where to Align the weight of the Line. This can be applied to the Inner, Outer or Center of the Line.
     3. The  Advanced Stroke options allow you to customise the line further; including determining the Cap (how each end of the line looks) and Join (how the line behaves when connected to other lines), as well as using the Dashes setting to create a dashed line.

  Arrow Tool

  The Arrow Tool allows you to draw both one-sided and two-sided arrows.

  1. Select the Arrow Tool from the Shape Tools, or use the Keyboard Shortcut ⇧ + L: 

     

  2. Click on a spot in the canvas and drag to create the Arrow. You can move the cursor around on the canvas to change the direction.
  3. Like the Line Tool (above), you can make adjustments to the Stroke properties.

  Add or Change a Single Cap

  1. Double-click on the line to enter Vector Edit Mode
  2. Select the point you want to add the Cap to. You'll need to make sure you are using the Move tool V.
  3. You can select multiple points in a shape by clicking and dragging or by using the shortcuts below:
     • Windows: Alt
     • macOS: Shift
  4. Open the Advanced Stroke menu by clicking the three ellipses in the Stroke settings:
  5. Select the Cap you want to use from the drop down field: 

  Ellipse Tool

  You can use the Ellipse tool to draw Ovals and Circles. These can be used as they are, or manipulated to create custom shapes with curves.

  1. Select the Ellipse Tool from the Shape Tools, or use the Keyboard Shortcut O: 

     

  2. Click on a spot in the canvas and drag to create the Ellipse. The shape's dimensions will be shown in blue underneath the object: 

     

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

  Polygon Tool

  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 additional points to the object to create your own custom Polygons.

  1. Select the Polygon Tool from the Shape Tools: 

     

  2. Click on a spot in the canvas and drag to create the Polygon. The shape's dimensions will be shown in blue underneath the object. 
  3. There will be a blue bounding box around the shape, with a handle in each corner. This allows you to resize the shape as you see fit.
  4. You can enter Vector Edit Mode by double-clicking on the Polygon. This allows you to add additional points to the Polygon and manipulate each point individually:
     

     

  5. Like the Rectangle shape, you can round the corners of a Polygon too:
     1. Hover over the handle in the corner until the Radius is shown: 
     2. 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 extends well 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. You can access this by right-clicking on the shape and choosing Flatten, or by using the shortcut 

  • Mac:   Command-E
  • Windows:   Ctrl + E

  Star Tool

  The Star Tool creates Polygons that are arranged in a Star shape. When you create a Star, the default will be a 5 pointed star with 10 sides.

  1. Select the Star Tool from the Shape Tools: 

     

  2. Click and drag on a spot in the canvas and drag to create the Star: 

     

  3. There are now three handles which you can use to manipulate the Star:
     • The Count determines how many points there are to the Star (Min: 3, Max: 60): 
     • The Ratio determines the distance of the inner points of the Star, from the center. This is shown as a percentage of the Star's overall diameter.
     • The Radius allows you to round the point, similarly to how Corner Radius works on a Rectangle.

  Tip! When you enter Vector Edit Mode you can adjust the Radius of each point individually.

  Frequently Asked Questions

  We've put together some answers for our most frequently asked shape questions: 

  1. Adjusting the Corner Radius
  2. Creating Dashed Lines
  3. Creating Double-Sided Arrows
  4. Creating Semi Circles
  5. Using the Arc Tool

  Adjusting the 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 Radius to round the corners of the Rectangle.

  1. Hover over the handle in the corner, until the Radius is shown. This will be set to 0 as a default.
  2. Click and drag the handle towards the center of the object to round the corners: 

  You can also use the Corner Radius field in the Properties Panel to adjust the corners of the object

  • Hover over the Corner Radius icon until the arrow appears, then use your mouse/trackpad to increase or decrease the radius - we call this Scrubbing).
  • Click in the corner field and enter the desired amount.
  • To adjust each corner independently, click the Independent Corners icon to the right of the field.

  You will then be given a field for each corner, to adjust individually ( L-R: Top Left, Top Right, Bottom Right, Bottom Left).

  Tip! When this mode is engaged, you can also use the handles on the shape to adjust the corners individually.

  Creating Dashed Lines

  1. Draw or select the line you'd like to make dashed.
  2. In the Stroke section in the Properties Panel, click the three ellipses to open the Advanced Stroke settings:
  3. You can specify both the length the Dashes, as well as the distance between them (Gap). 
  4. Enter this in the Dashes field in the following format: Dash, Gap; e.g. to create a dash with a length of 5 px and a gap of 2px, you would enter 5,2.

  Creating Double-Sided Arrows

  To make an arrow double-sided:

  1. Select the arrow in the canvas.
  2. Double-click on the arrow to enter Vector Edit Mode.
  3. Select the point at the other end of the Arrow.
  4. In the Advanced Stroke option, select the type of Arrow you'd like to use, in the Cap field.

  Creating Semi Circles

  To turn a Circle into a Semi Circle:

  1. Use the O shortcut to select the Ellipse tool
  2. Hold down the Shift key while you click and drag, to create a perfect Circle.
  3. Double-click inside the shape to enter Vector Edit Mode.
  4. Select one of the four main points, then Delete on your keyboard.
  5. To close the semi-circle, click the P key to select the Pen Tool.
  6. Click on each open point in the Semi Circle to close the shape.

  Learn more in Editing Shapes and Objects.

  Using the Arc Tool

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

  Learn more in our Using the Arc Tool article.

• Vector Networks

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Components.

  Users with View access to a File can use Components from libraries they have access to.

  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.

  Creating

  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:

  • If you hold ⇧ (Shift) while creating a shape, it locks the shape’s aspect ratio to 1:1.
  • If you hold ⌥ (Option/Alt) while creating a shape, the shape is created relative to its center instead of its top-left corner.
  • If you hold Space bar while creating the shape, it moves the entire shape instead of just a single point.

  Editing

  If you select a path and hit  ENTER , you’ll enter Vector Edit mode, in which you can select, adjust, or change properties of individual points, lines, or entire shapes. You can also use the Edit Object button from the Toolbar to enter Vector Edit. To exit, just hit ENTER again or press DONE in the toolbar.

  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.

  Bézier Curves

  To access a point’s Bézier handles, enter Edit mode. If it is a curve, the handles will already be showing. If it is a corner with no handles, hold ⌘ and click the point to show the handles and create a mirrored curve.

  Rounded Corners

  Any intermediate point on a path can be rounded via the Corner Radius property in the Inspector. 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.

  End Caps

  End Caps enable you to add styling to terminal points on an unclosed path. The first three also apply to the ends of each dash of a dash pattern. The default Cap style is None so lines and dash patterns track the dash length specified. You can also select from these other styles:

  • None (default): No cap is applied. The terminal point is the end of the path.
  • Square: A cap half the stroke width is applied and the corners are square.
  • Round: A cap half the stroke width is applied and the corners are rounded to 50%.
  • Line Arrow: Two 45-degree line segments are applied to either side of the terminal point(s) with the same stroke width as the path.
  • Triangle Arrow: An equilateral triangle is applied to the terminal point(s).

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

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

• Resize layers with the Scale tool

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with Edit access to a File can resize objects with the Scale tool

  By default, files open with the Move Tool enabled. Click the drop down icon (or use the "K" shortcut) and you'll find the Scale tool. 

  

  While you can't scale numerically, you can drag out the handles of the bounding box and the content inside will scale. 

  Scaling works for:

  • Frames
  • Groups
  • Components
  • Component Instances
  • Text objects

  Any blurs and strokes will scale as well. 

• Add Guides to the Canvas or a Frame

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Guides.

  Users with View access to a File can toggle Rulers on and off to show/hide Guides.

  Looking for more? Check out our blog post about Guides...

  Guides are helpful when you're trying to precisely position layers or objects in your designs. They can be added to Frames to create useful templates to align content that might be changing.

  Video Tutorial

   

   

  Adding Guides

  Toggle Rulers

  In order to use Guides, you will first need to toggle Rulers "on".

  You can do this with the   Shift + R   keyboard shortcut, or by:

  1. Clicking the menu icon in the upper left corner of the Editor
  2. Search for “Rulers”
  3. Choose the option for Rulers from the menu.

  

  Create a new guide

  Click and drag on the horizontal and vertical rulers to pull guides onto your canvas.

  

  Figma has both Canvas and Frame level Guides for positioning and aligning objects in your designs. 

  The dotted line acts as visual indicator that your guide is intersecting with a frame on the canvas.

  

  Viewing Distances (Redlines)

  With a top level frame selected, hold Option (macOS) or Control (Windows) as you click and drag out a guide. You will see the distance (in pixels) between your guide and the frame. This distance is also reflected in the ruler. When the guide intersects your frame it will begin measuring distances between the guide and objects in the frame. 

  In addition, with a frame selected the rulers highlight in blue, calling attention to the coordinates of the frame on your canvas. When you select objects in the frame, you'll see the same blue highlights for the selected object. 

  

  Guides inside frames are recognized as another object in the frame. This means you can view redline distances between the guide itself and other elements in the frame, as well as the parent frame. 

  Removing Guides

  In addition to clicking and dragging the guide back to the rulers, you can also:

  1. Hover over the guide to reveal the double-sided arrow
  2. Single click (the guide will turn blue)
  3. Use Delete  on your keyboard to remove the guide

  Note: Looking for more? Check out our blog post about Guides as well.

• Boolean Operations

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a 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.
• Masks

  Masks allow you to show specific portions of other layers. It's like laying a stencil down on the sidewalk, painting over the stencil, and then lifting away the stencil. In this example the stencil is the mask.

  Masks use the alpha channel of the paints and/or the outline of the shape to mask the layers above. Since only PNG files store an alpha channel, a JPG doesn't really work as a mask.

  You can convert any boolean group, group, or shape to a mask by selecting the layer and clicking the Mask button in the toolbar or by right-clicking on the layer and selecting Use as Mask.

  Masks naturally limit, the visibility of their siblings, and they intersect with any parent masks that are applied. Top-level masks are inserted into a group to prevent the entire canvas from disappearing into the mask. Clipped groups also stop mask propagation.

  Figma supports both outline and alpha masks. Both share the geometry outline, but alpha masks use the per-pixel opacity of the paints. 

  Outline Masks

  Watch this short video demonstrating how to make a simple outline mask.

  Outline masks use the outline of the shape being used as the Mask. The mask will apply to all layers  above them in the layers panel until they hit a component. When you select something to be used as the Mask, it will be invisible on the screen, so typically you'll need to duplicate them.

  Currently, masks do not support effects (i.e. gradients, shadows, blurs, etc).