69dbc36a7e
* fix: match Figma when dragging, drawing, duplicating, and pasting Checked against Figma desktop 126 with real pointer input. A dragged layer lands in the topmost unlocked frame, section, component, or instance under the cursor, following rotation and clipping, and leaves its frame as soon as the cursor does; groups, boolean operations, component sets, and locked frames never take a drop, and a layer stays in its group unless it lands on another frame. Space keeps parents, Shift locks an axis, and Control drops into auto layout as an absolute-positioned layer. Locked layers stay put. New shapes go into the frame under the start point, frames and sections take in the unlocked siblings they fully cover, duplicates land in place (top-level frames to the right), and paste keeps the copied position, centering an axis that does not fit the selected frame. * fix: match Figma for drag edge cases with components, groups, and auto layout A second round of checks against Figma desktop 126, replaying the same pointer input in both editors. A component set takes back only its own variants, and components never go into other components. Groups and booleans refit their children after a move or nudge, and a group whose last layer leaves is removed. Pressing inside a selected frame, group, or component set drags it instead of the layer under the cursor. Auto layout children dragged out land where they are dropped, drawing inside auto layout adds to the end of the flow, and wrapped frames insert on the line under the cursor. Duplicates keep their names, and a main component duplicates as an instance with Cmd+D or Alt-drag; a multi-layer duplicate stays in place, and a lone frame in a section counts as top-level. * fix(core): refuse new shapes in the locked part of an instance createShape redirected a refused parent through acceptingParent while keeping coordinates in the original parent's space, and still inserted the layer when the slot claim failed. It now takes the given parent, claims a slot when needed, and throws when the parent refuses children; drawing skips such parents before creating anything.
4.4 KiB
| title | description |
|---|---|
| Drawing Shapes | Creating rectangles, ellipses, lines, frames, sections, polygons, and stars in OpenPencil. |
Drawing Shapes
The bottom toolbar provides tools for creating shapes, frames, and sections. Select a tool, then click and drag on the canvas to draw.
Toolbar Tools
| Tool | Shortcut | Description |
|---|---|---|
| Rectangle | R | Draws a rectangle |
| Ellipse | O | Draws an ellipse |
| Line | L | Draws a line |
| Frame | F | Draws a frame (container for other nodes) |
| Section | S | Draws a section (takes in the siblings it fully covers) |
Shapes Flyout
The shapes flyout (accessible from the toolbar) includes additional shapes:
- Polygon — creates a polygon with 3 sides by default (triangle)
- Star — creates a 5-pointed star with 0.38 inner radius
Polygon and Star have no keyboard shortcut — access them from the shapes flyout in the toolbar.
Constrained Drawing
Hold Shift while dragging to constrain the shape:
- Rectangle → square (equal width and height)
- Ellipse → circle
- Line → snaps to 0°/45°/90° angles
Shape Properties
After drawing a shape, select it to edit its properties in the Design tab of the properties panel.
Fill
Every shape can have a fill. The fill section supports:
- Solid color — pick via the HSV color picker or type a hex value
- Gradient — Linear, Radial, Angular, or Diamond with editable gradient stops
- Image — select an image file as the fill
Stroke
Add an outline to any shape. Stroke properties include:
- Width — uniform or per-side (Top/Right/Bottom/Left) via the side selector dropdown
- Color — solid color with opacity
- Alignment — Inside, Center, or Outside the shape boundary (clip-based rendering matches Figma behavior)
- Cap style — None, Round, Square, Arrow Lines, Arrow Equilateral (for open paths)
- Join style — Miter, Bevel, Round
- Dash pattern — dash-on/dash-off
Corner Radius
Available for rectangles, frames, components, and instances. Click the independent corners toggle to set each corner (top-left, top-right, bottom-left, bottom-right) separately.
Effects
Add visual effects from the Effects section:
- Drop Shadow — offset, blur radius, spread, color
- Inner Shadow — same controls, rendered inside the shape
- Layer Blur — blurs the entire node
- Background Blur — blurs content behind the node
- Foreground Blur — blurs content in front
Click + to add an effect. Each effect row is collapsible with inline controls. Toggle the eye icon to enable/disable an effect.
Frames and Sections
Frames are containers. Drag shapes into a frame to make them children, or start drawing inside one: a new shape goes into the frame under the point where you start, except locked frames, and joins the end of an auto-layout flow. Drawing a frame over existing nodes puts the unlocked ones it fully covers inside it. Frames can clip their content (off by default) and support auto layout.
Select the Frame tool to browse collapsible presets for phones, tablets, desktops, presentations, watches, paper, social media, Figma Community assets, and archived devices in the Design panel. Choosing a preset creates a named frame centered in the viewport and returns to the Select tool. With an existing frame selected, use its Frame preset dropdown to resize it without changing its name.
Sections are top-level containers that take in the sibling nodes they fully cover when drawn, moved, or resized. They're useful for organizing large canvases into logical areas. Sections display a title pill that you can drag.
Keyboard Shortcuts
| Action | Mac | Windows / Linux |
|---|---|---|
| Rectangle tool | R | R |
| Ellipse tool | O | O |
| Line tool | L | L |
| Frame tool | F | F |
| Section tool | S | S |
| Constrain to square/circle | Shift + drag | Shift + drag |
Tips
- Sections can only exist at the top level — they can't be nested inside frames.
- Use frames with auto layout to build responsive layouts.
- Export individual shapes or groups as images via the properties panel or context menu.