Folders and filters

Give a group its own identity#

Folders are more than tidy storage. They let you treat several layers as one piece: move a whole motif, soften a glow, or recolor a group without adjusting every child.

Click Add folder in Layers, give it a useful name, and move related layers inside. The chevron collapses the list; the visibility control hides the entire group. For the basics of selecting and naming items, see Working with layers.

Nest and move layers#

Drag a layer's handle over the middle of a folder row to nest it. Drop between rows to reorder it. While dragging, Drop here to move to the root appears at the bottom of the tree.

The Layer options menu also provides Nest in previous folder and Move out of folder. The first action requires a folder immediately above the item; the second moves it up one level. With the row itself focused, Alt+Right and Alt+Left perform those actions, while Alt+Up and Alt+Down reorder it.

A child inherits its ancestors' transforms and filters. Moving it out of a folder therefore changes more than its indentation. Clipping also stays within a group: keep a clipped layer and its base together.

Blend a folder#

Choose Blend in the General tab of a folder's Properties to combine the finished group with visible layers beneath it. Normal preserves existing rendering; Multiply can shade the backdrop, while Screen can add a glow.

Every folder is an isolated group, including nested folders. Children blend with their siblings, not with artwork outside their folder. The folder's own blend mode applies once to the complete result, including its effects. There is no pass-through mode. To blend a child directly with outside artwork, move it out of the folder.

Internal CSS background runs do not create extra blend boundaries: inserting a shape or text layer between gradients does not prevent the gradients from blending with visible artwork below them. Clipping and rounded corners apply before the group blends. Blend modes are linked across folder clones, like filters and other shared effects.

Transform the whole folder#

Select the folder and open the Transforms tab in Properties:

• Translate X / Y, in pixels, moves the group horizontally or vertically. Both start at 0.
• Rotate, in degrees, turns the group. 0 is unchanged.
• Scale X / Y stretches the group along each axis. 1 is original size, 0.5 halves it, and a negative value flips that axis.
• Skew X / Y, in degrees, slants the group. 0 is unchanged; values must stay between -89 and 89.

These controls act on the group, not on the stored size and position of each child. Use them to place a finished motif while keeping its internal layout easy to edit. Translate, Scale, and Skew each keep their X and Y inputs together on one row, with a separate variable binding for each axis.

Set dimensions without scaling#

Select a folder and use Dimensions in the General tab of Properties. Fit contents keeps the frame following the folder's visible contents. Fixed freezes that frame so you can edit its Bounds X / Y and W / H independently of the artwork. These values use the folder's local coordinates, before its transforms.

The Transform tool starts in Scale mode. Choose Bounds in the tool-options bar to resize the frame with its handles or move only the frame by dragging its interior. Children keep their size and position, and the folder's translate, rotate, scale, and skew stay unchanged. Shift locks the aspect ratio or movement axis; arrow keys nudge the bounds. Choose Scale again to move or scale the whole motif.

Reset scale and Reset skew are available in Scale, Skew, and Bounds modes. Reset scale restores Scale X / Y to 1 and Translate X / Y to 0 in one undoable step. It removes bindings on those four inputs but preserves rotation, skew, dimensions, and the children. For a folder clone, only that reference is reset.

Choose Skew to shear a folder using its corner handles. Dragging a corner moves its whole edge along that edge's direction while holding both endpoints of the opposite parallel edge fixed. Translation compensates for that anchor. For an already-skewed folder, a scale value may also adjust to preserve the fixed edge and area; rotation, bounds, and child geometry stay unchanged. The initial drag movement locks to the closest of the folder's two edge directions, including rotated or skewed diagonal edges. This direction stays locked until you release the corner, even if the pointer changes direction; no modifier key is needed. Dragging an edge still scales the folder, and dragging the interior moves it. Skew uses the same -89 to 89 degree limits as Properties and supports one-step Undo/Redo. Reset skew restores Skew X / Y to 0 and removes their bindings in one undoable step. Translation, scale, rotation, bounds, and children stay unchanged. For a folder clone, only that reference is reset. A folder collapsed to a line cannot be sheared this way; reset its skew or restore nonzero dimensions and scales first.

Selecting Bounds alone changes no artwork. The first boundary edit, numeric dimension edit, or dimension binding switches automatic sizing to Fixed. Switch back to Fit contents to follow child edits again; this clears fixed dimension bindings. An empty automatic folder uses the canvas size as its frame. A fixed empty folder retains its dimensions, including for shadows and backdrop effects. Zero dimensions are allowed; restore them through Properties.

Show or hide overflow#

Visible lets children extend past the frame. Hidden cuts them off at the frame, including its rounded corners, without deleting or resizing them. Outer shadows remain outside the clip. Changing sizing modes does not change overflow. The global canvas boundary still clips the finished artwork.

Existing folders keep their appearance: rounded corners imply clipping unless you explicitly choose Visible. Explicit Visible also disables rounded-corner clipping; the radius still shapes shadows and backdrop effects.

Work with transformed bounds#

The canvas frame follows automatic content bounds or the fixed rectangle. Nested transforms build on their parents, so a child's local position is not necessarily its final position on the canvas.

A scale of 0 flattens an axis. If a tool asks you to restore the folder or parent scale, set that axis back to a nonzero value in Properties. This is a geometry limitation, not a lost layer.

Reuse a cloned folder#

Build a motif once, then select its folder and choose Clone selection. Each folder reference has its own translate, rotate, scale, skew, dimensions, sizing mode, and overflow, so you can place or crop the motif several times without rebuilding it. Folder filters, corner radii, name, and visibility remain linked.

The whole child tree is shared. Change a child's color, size, or position, or a nested folder's transforms, and that change appears in every occurrence of the containing folder. To resize just one complete motif, select its outer folder reference and change Scale X / Y instead of resizing a child.

For example, put a shape and a highlight in a folder called Flower. Clone Flower and translate and scale the new reference. Editing the highlight's position changes both flowers, but moving the outer Flower reference changes only that instance.

Adding, deleting, reordering, moving, or breaking a child reference also edits the shared child tree everywhere. If that child is itself an explicit clone, its placement can differ from its sibling references, but the same child placement repeats across the containing folder's occurrences.

To change the contents of only one motif, use Break clone on its outer folder first. Breaking an explicit child clone inside a still-linked folder changes that child in every occurrence; it doesn't detach one displayed motif. See Clone linked artwork for the indicators, detachment behavior, and the difference from Duplicate.

Round folder corners#

Select a folder and open the Border radius tab in Properties. Corners mode has four inputs with fixed corner illustrations. Drag the preview handles or type a radius. The lock keeps every corner at the same value; unlocking lets you edit them independently. Locking again uses the top-left horizontal radius.

Choose Elliptical for separate Horizontal and Vertical radii at each corner. Unlock the corners to shape them independently with the eight handles. Exported CSS uses horizontal / vertical slash syntax, in clockwise order from the top-left corner. For example, 30% 70% 70% 30% / 30% 30% 70% 70% creates an asymmetric shape.

Use px for pixel radii or % for proportions of the folder's content width and height. Switching units keeps the numbers, not the physical size. Handles support arrow keys, Shift for steps of ten, and Home to reset to zero. Numeric inputs can exceed the preview's range; CSS proportionally reduces overlapping radii. The preview shows that reduction.

Rounding normally clips the folder's children to its automatic or fixed bounds, without moving or resizing them. Explicit Overflow: Visible disables that clip. Shadows and backdrop effects follow the same rounded outline, and outer shadows remain outside the clip. Radius settings support Undo/Redo, saved projects, clones, and HTML/CSS export.

Filters#

Select a folder and open the Filters tab in Properties. New folders start with an empty section. Click Add filter and choose an effect from the dropdown, then adjust its value. You can add the same type more than once. The copy button duplicates a filter immediately below it, including its value, Backdrop setting, and variable or formula binding. Each copy is independently editable.

Each filter has a split preview icon: the left half is unfiltered, and the right half illustrates the effect. These examples stay fixed as you change values or switch between content and backdrop filtering.

An added control stays visible even at its neutral value. Use its trash button to remove the filter and its variable or formula binding. Add, remove, and backdrop changes support Undo/Redo and are saved with the project. Older projects automatically show their non-neutral or variable-bound filters in their original order.

Reorder filters#

Drag the six-dot handle to the left of a filter up or down. With the handle focused, press Space to pick it up, use Up / Down to move it, then press Space again to drop it. Escape cancels without changing the order.

Filters apply top to bottom, matching left-to-right CSS order. For example, Brightness 0% followed by Invert 100% produces white; reversing them produces black. You can also build a chain such as Blur 2px, Contrast 150%, then another Blur 4px. One drag is one undoable edit.

Content filters and backdrop filters form separate chains, each preserving the relative order of its rows. Moving a content filter past only backdrop filters does not change either chain's result.

Filter the backdrop#

By default, a filter affects the rendered folder and its children (filter in CSS). Turn on Backdrop in that filter's row to affect the artwork behind the folder instead (backdrop-filter). You can mix both targets in one folder. Switching targets keeps the value and any variable or formula binding.

Backdrop effects are visible through transparent areas of the folder; opaque children cover them. For example, add Blur, set it to 6px, and enable Backdrop to soften artwork behind a translucent group while keeping its own contents sharp. The backdrop area follows the folder's automatic or fixed bounds (including its border radius), not individual opaque pixels. With Fit contents, a single non-repeating 50-by-50 layer gives the folder a 50-by-50 backdrop area. Empty automatic folders have no backdrop area; fixed folders use their explicit dimensions even when empty. Ancestor filters and clipping can limit which backdrop is available.

The controls below describe the default content target. With Backdrop enabled, they adjust the sampled backdrop instead; backdrop Opacity does not fade the folder's children.

Blur#

Blur uses pixels. 0px is sharp; a larger value softens edges and detail. Try 6px on a group of colored shapes for a soft glow. Blur spreads beyond the original edges, so leave space around the effect; the canvas boundary still crops the final artwork.

Brightness#

Brightness starts at 100%. Lower values darken the group; higher values brighten it. 0% makes its visible color black without removing its alpha. Try 115% for a gentle lift rather than recoloring each layer.

Contrast#

Contrast starts at 100%. Increase it for stronger separation between light and dark, or reduce it for a flatter look. 0% removes tonal contrast. Try 125% on a textured group to bring out detail.

Grayscale#

Grayscale runs from 0% (original color) to 100% (fully grayscale). Try 40% when a colorful group competes with the focal point.

Hue rotate#

Hue rotate shifts colors around the hue wheel. 0deg is unchanged; 360deg returns to the same hues. Try 90deg for a color variation without moving the artwork. This has nothing to do with the folder's Rotate transform.

Invert#

Invert runs from 0% (unchanged) to 100% (fully inverted). Intermediate values mix the original and inverted colors. At 50%, color channels converge toward gray, so use it deliberately rather than as a general contrast adjustment.

Opacity#

Opacity runs from 100% (normal) to 0% (transparent). The children are composited together before the group fades, which differs from lowering every child's alpha independently. Use 50% for a translucent group; use the visibility control for a quick on/off comparison.

Saturate#

Saturate starts at 100%. 0% removes color, and values above 100% intensify it. A small increase, such as 120%, is often enough.

Sepia#

Sepia runs from 0% (unchanged) to 100% (full sepia). A partial value adds a warm, aged treatment without completely replacing the palette.

Borders#

Select a folder and open the Borders tab in Properties. Use the separate All button or select Top, Right, Bottom, and Left in the multi-select segmented control, then Add border. Clicking a side while All is selected starts an individual selection; additional sides toggle into the selection. Changes affect only the selected sides. Mixed values stay mixed until you replace that field.

Choose Inside, Center, or Outside to position the border relative to the folder frame. Center places half of each side's width on either side of the frame. Placement applies to the whole border; widths, styles, and colors can differ per side. Borders never move or resize the children.

Width accepts nonnegative pixel numbers, CSS lengths such as 2em or 1pt, thin (1px), medium (3px), thick (5px), and CSS math such as calc(2px + 0.1em). CSS border widths do not accept percentages. Drag the PX label to adjust numeric widths and pattern settings live, just like other number inputs. Variable-bound fields remain read-only. Style includes illustrated previews for None, Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset, Waves, Squiggle, and Sketch. None does not paint or take up border width. The menu omits Hidden and CSS-wide keywords; imported projects using those values still render as saved.

Use the standard Color picker for color and opacity, or enter a hex color directly in its input. Imported CSS colors remain unchanged until edited. Use the width or color variable binding button to link all selected sides at once. Different bindings show Mixed; choose a variable or Static value to replace those bindings together. Each selected side must already have a border. Select one side to edit an inline width formula. Numeric width variables and formulas use pixels and remain live in exported CSS.

Customize the pattern#

Dashed and Dotted borders use SVG, so spacing is independent of thickness. Dash pattern accepts alternating dash and gap lengths in pixels, separated by spaces or commas. For example, 12 8 2 8 repeats a long dash, gap, short dash, and gap. Odd-length lists repeat twice, following SVG rules. 0 8 with Dotted produces round dots; round caps extend beyond the specified dash length. An all-zero pattern produces a solid stroke. Dash offset shifts where the pattern begins and accepts negative values.

Waves creates a smooth repeating wave; Squiggle adds tighter bends. Adjust Amplitude and Wavelength separately from Width. Sketch draws two deterministic, uneven strokes; adjust Roughness and Wavelength. Sketch does not randomly change when the canvas rerenders or the project reloads. Pattern controls affect the selected sides and preserve their settings when you switch styles. Choose one common style to edit mixed-side pattern settings.

Solid, Double, Groove, Ridge, Inset, and Outset retain native CSS rendering. SVG patterns are embedded in artwork exports, without external assets or scripts. In responsive exports their curves scale with the folder frame; stroke width and dash lengths stay in CSS pixels. Width and color variable bindings remain live.

Borders follow Border radius, transforms, and automatic or fixed dimensions. They paint above content and inner shadows, outside the content-only overflow clip; the canvas and any clipped ancestor still clip the final artwork. Shadows retain their own frame and are not enlarged by an outside border. Empty automatic folders use the canvas frame; use Fixed dimensions for a smaller empty bordered shape.

Remove selected borders affects only the selected sides. Remove all borders clears all four. Borders are shared by folder clones and preserved in Undo/Redo, drafts, saved projects, project files, and artwork exports. border-image is a separate CSS property, not part of the border shorthand.

Box shadows#

Select a folder and open the Shadows tab in Properties. Choose Outer to cast shadows behind the folder's visible content bounds, or Inner to shade the inside of those bounds. Each tab has its own list, and Add shadow adds to the selected tab.

Box shadows use the group's content bounds and border radius, not the alpha silhouette of each child. Empty automatic folders have no visible shadow; fixed folders use their explicit dimensions. Leave room around the group for outer shadows: the canvas edge still clips the exported artwork.

Position, spread, blur, and color#

Each numbered row represents one editable shadow:

• Position opens a two-dimensional coordinate control. Drag the point to adjust X and Y together, or enter them separately. Positive X moves right; positive Y moves down. The point also supports arrow keys, with Shift for ten-pixel steps.
• Spread / Blur opens the two numeric fields and a square preview. Spread grows or shrinks the shadow; blur softens its edge. Offsets and spread may be negative, but blur cannot. The preview always uses a 10px right/down offset so you can judge spread and blur independently of position.
• Color includes alpha, so a shadow can be subtle, translucent, or colorful.

The first row is painted on top within its list. Use the copy button to duplicate a shadow immediately below it, and the trash button to remove it. Inner and outer lists share a limit of 32 editable shadows. Edits support Undo/Redo.

Ease between shadow layers#

Add at least two shadows in the same tab, then choose Add easing between their rows. Click the easing row to choose a preset or drag the control points of a custom curve. Easing blends X, Y, blur, spread, and color together; alpha is included in the color transition.

Steps controls the number of intervals between the two editable shadows. For example, 8 steps adds seven intermediate shadows, so two endpoints produce nine rendered layers. More steps make a denser stack and longer CSS. The Steps easing preset makes discrete jumps instead of a smooth curve.

Try these two outer shadows with a dark color, then add Ease out with 8 steps between them:

Easing only connects neighbors in the same tab. If its following shadow is removed, the easing setting stays on the last row but is inactive until another shadow is added. The preview and HTML/CSS export use the same expanded stack; saved projects retain the editable layers, not just the generated samples.

Combine effects and nested folders#

A child folder's effects happen before the parent treats the result as part of its group. This is useful for a sharp foreground inside a softly blurred background composition: keep the foreground outside the blurred folder.

Each target uses the order shown in the filter list. Use nested folders when an effect needs a separate scope. For example, soften a colored shape inside an inner folder, then add a shadow to the outer group.

Noise Opacity and Texture Contrast belong to their individual layers. Folder Opacity and Contrast affect all children together. Pick the scope that matches what you want to change.

Connect effects to variables#

The link button next to numeric transforms and filters can bind a Number or Function variable. For box shadows, use the link beside Color directly in the list to choose a Color variable. Open Position to bind X and Y separately, or Spread / Blur to bind either value. Numeric shadow inputs also support formulas.

Bound axes stay fixed while dragging the coordinate point; an unbound axis can still move. Choose Static value in a binding menu to restore the original value and edit it directly. Blur bindings must remain nonnegative. Both Inner and Outer shadows support bindings, including the intermediate layers generated by easing. Exported CSS keeps the live variables and formulas.

Try a Number variable called Softness with a minimum of 0, then bind it to Blur in several folders. One control now tunes the whole design's softness. Follow the variable binding guide for setup and compatible ranges.