Related Videos

• 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

  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.

  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.

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

  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.

  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 Using the Arc Tool article.

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

  

  Anatomy of mask objects

  When you use a layer as a mask, a mask object is created, which includes the mask and any layers it is masking. The mask is then applied to all the siblings above it in on the z-index until it reaches:

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

  

  In the Layers panel, a mask object can be identified by a at the base and an upward-facing arrow. Layers being masked will appear above the mask. The arrow that extends from the mask shows which layers are included in that mask object.

  Learn more about parent, sibling, and child relationships →

  Layer order

  In Figma, masks are positioned below any layers you want to mask on the z-axis. You can re-order layers on the z-axis by using actions like send to back or bring forward, or by dragging layers up and down in the Layers panel.

  Learn more about reordering layers →

  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.

  

  Opacity and alpha channels

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

  Instead of using the outline of a layer or image to determine what's visible, alpha masks take into account the opacity of the mask.

  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

  When working with alpha masks, masks are applied based on the opacity of the mask. Portions of the mask with an opacity greater than 0% will reveal the layers it is masking. Parts of the mask with an opacity of 0%, or no fill at all, will hide the layers it is masking.

  

  In the example above, 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 of the content is revealed in the center of the image, where the mask's opacity is higher (100%).

  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.

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

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