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 |
|---|---|
| Auto Layout | Flex and grid layout in OpenPencil — direction, gap, padding, alignment, child sizing, and CSS Grid tracks. |
Auto Layout
Auto layout positions children automatically within a frame. It supports two modes: flex (horizontal/vertical flow) and grid (rows and columns with track sizing).
Enabling Auto Layout
- Select a frame and press ⇧A (Shift + A) to toggle auto layout on or off
- Select loose nodes (without a parent frame) and press ⇧A to wrap them in a new auto-layout frame
When wrapping a selection, nodes are sorted by visual position: left-to-right for horizontal layout, top-to-bottom for vertical.
Layout Direction
Choose how children are arranged:
- Horizontal — children flow left to right
- Vertical — children flow top to bottom
- Wrap — children wrap to the next row/column when they run out of space
Spacing
Gap
The space between adjacent children. Set a single value that applies between all children.
Padding
The space between the frame edge and its children. Set a uniform value for all sides, or expand to set each side independently (top, right, bottom, left).
Alignment
Justify (main axis)
Controls how children are distributed along the layout direction:
- Start — children pack to the beginning
- Center — children are centered
- End — children pack to the end
- Space between — children spread with equal space between them
Align (cross axis)
Controls how children are positioned perpendicular to the layout direction:
- Start — children align to the start
- Center — children are centered
- End — children align to the end
- Stretch — children stretch to fill the cross axis
Child Sizing
Each child in an auto-layout frame can have its own sizing mode:
- Fixed — uses the child's explicit width/height
- Fill — stretches to fill available space in the parent
- Hug — shrinks to fit the child's content
Drag Reordering
Within an auto-layout frame, drag a child to reorder it among its siblings. A visual insertion indicator shows where the child will be dropped. Dragging a node from elsewhere into an auto-layout frame inserts it the same way; in a wrapping frame, it goes into the line under the cursor. Drawing inside an auto-layout frame adds the new node to the end of its flow.
Hold ⌃ (Ctrl on Windows and Linux) while dragging to ignore auto layout: the node is dropped where you release it as an absolute-positioned child.
Properties Panel
When an auto-layout frame is selected, the Layout section in the properties panel shows all auto-layout controls: direction, gap, padding, justify, and align.
Keyboard Shortcuts
| Action | Mac | Windows / Linux |
|---|---|---|
| Toggle auto layout | ⇧A | Shift + A |
CSS Grid
Grid layout arranges children in rows and columns with explicit track sizing.
Enabling Grid
Select a frame with auto layout enabled and click the grid icon in the layout toolbar to switch from flex to grid.
Track Sizing
Define column and row tracks with three sizing modes:
- fr — fractional unit, divides available space proportionally
- px — fixed pixel size
- auto — sizes to fit content
Example: three columns of 1fr 200px 1fr creates a layout with a fixed center column and flexible sides.
Grid Gaps
Set separate horizontal (column) and vertical (row) gaps between cells.
Child Positioning
Children are placed into grid cells automatically in row order. You can override placement with column/row start and span values in the child's layout properties.
JSX and Tailwind Export
Grid layouts export to JSX with Tailwind classes: grid grid-cols-3, gap-x-4 gap-y-2, col-start-2 row-span-2.
Tips
- Auto layout recomputes immediately after creation, so the selection bounds update right away.
- Nest auto-layout frames for complex responsive layouts (e.g., a vertical frame containing horizontal rows).
- Use "Fill" sizing to make a child take up remaining space, like a flex-grow: 1 in CSS.
- Use grid for dashboard layouts, galleries, and forms — anything with a two-dimensional structure.
- See Drawing Shapes for creating the frames that auto layout applies to.
- See Components for using auto layout within reusable components.