You can edit Graphic layers in Drawing Mode.
To enter Drawing Mode, double click on a Graphic layer. To exit Drawing Mode, click on the Exit button at the top of the left panel or press Escape.
Note: All keyboard shortcuts on this page will only work while in Drawing Mode.
When in Drawing Mode, the Toolbar will display several new tools specific to vector drawing.
The toolbar within Framer when using the Graphics tool
You can use the Graphic tool to create additional Graphic layers.
You can use the Path tool to create new paths. See the Paths section below for more about paths.
You can use other tools (Rect, Oval, Poly, and Star) to create shapes. See the Shapes section below for more about the Rect shape.
In Drawing Mode, the Layers panel will display the shapes, paths, and groups contained by the selected Graphic. You can operate the Layers panel in the same way as the regular canvas Layers panel.
When in Drawing Mode, you can click on other Graphic layers to edit them. You can also drag paths and groups from one Graphic layer to another.
A layer’s position within a Graphic is relative to either the top-left corner of the Graphic or, if the point’s path is inside of a Group, to the top-left corner of the Group.
Tip: You can position points using sub-pixels down to 1/100th of a pixel.
You can flip a selected layer horizontally or vertically by selecting Menu > Graphic > Flip Horizontal or Flip Vertical.
A shape is a path created with the Rect, Oval, Poly, or Star tool.
Various shapes to be drawn within a Graphics container
To Flatten a shape into a regular path, double click on it. You can also right click and select Flatten, or select Menu > Graphic > Flatten.
When you flatten a shape, you will no longer be able to use the shape’s unique properties listed below.
To create a Rect shape, click on the Rect tool in the Toolbar or press R, then click and drag inside of the Graphic to create the shape.
On the Properties panel, you can set a Radius to apply to each of the shape’s corners.
To create an Oval shape, click on the Oval tool in the Toolbar or press O, then click and drag inside of the Graphic to create the shape.
To create a Polygon shape, click on the Poly tool in the Toolbar, then click and drag inside of the Graphic to create the shape.
On the Properties panel, you can set the shape’s number of Sides and set a Radius to apply to each of the shape’s corners.
To create a Star shape, click on the Star tool in the Toolbar, then click and drag inside of the Graphic to create the shape.
On the Properties panel, you can set the shape’s number of Points, the depth of its points (as a percentage of the point’s distance from the shape’s center), and set a Radius to apply to each of the shape’s points.
Two or more points make up a path. A Path has a beginning and end. If the beginning and end are the same point, then the path is closed. If not, then the path is open.
Tip: To open (or break) a path, select the line between two points so that it becomes blue, and hit
backspace on your keyboard.
Changing the points on a path
To create a Path, click the Path button in the Toolbar or press P, then click on the Graphic to create the path’s starting point.
Click again to add additional points to the path.
Hold Shift to lock the point’s position to 45-degree angles.
Click and drag to create a point and adjust its Curve.
Creating curves with the pen tool
To stop adding points, either close the path by clicking on its starting point or press Escape to leave the path open.
To select a path, click on the path.
To edit a path, double click on it.
A path’s Stroke is similar to the standard Border property that it replaces.
You can set the stroke’s location to either Center or Inside.
You can use the Array property to create a broken or dashed stroke, with the Array value determining the length of each dash and gap.
The Cap property sets the shape displayed at the stroke’s beginning and end of a line or open shape path.
The Join property sets the stroke’s appearance at any corner or place where two lines are joined.
Paths are made up of points.
To select a point in a path, first begin editing the path, then click the point.
To select multiple points, hold Shift, and click on each point that you want to select. You can also click and drag to select multiple points.
To create curved lines, set a point’s Curve property to use Mirrored Handles or Disconnected Handles. You can also double click a point to toggle between its Curve properties.
Positioning a point’s handles will affect the curve of the line (if any) between the point and the next point in that direction. To position a point’s handles, select the point, then click and drag the handle to its new position. Hold Shift to lock the handle to 45-degree angles.
You can combine layers into groups that apply one of five boolean operations: unite, subtract, intersect, exclude, or join.
Boolean groups show in the top-right corner of the UI
To create a boolean group, select two or more layers, then click on one of the boolean operator icons at the top of the Properties panel.
Note: Boolean operations will treat open paths as closed paths.
In the Layers panel, the selected layers will be added to a new boolean group.
To remove a layer from the boolean group, drag it out of the group on the Layers panel.
To add an additional layer to the boolean group, drag the layer into this group on the Layers panel.
To change the type of boolean operation applied to the group’s paths, click on the boolean group in the Layers panel and click on a different boolean operator icon.
Tip: To create complex shapes, apply boolean operators to other boolean groups.
A group is a wrapper around one or more paths, boolean groups, or other groups.
You can style a group using the same properties as a path.
If you set a Stroke or Fill on a group, that style will apply to all paths inside of the group.