Basic Layer Operations

Learn how to work with layers in Figpea, from basic selection and visibility controls to essential transformations. This guide covers the fundamental operations you'll use most frequently.

Creating New Layers

Shape Layers

• Press 'A' or click the "New Shape" button in the toolbar
• Select from three basic shapes:
  • Rectangle (default: 100x50 pixels)
  • Ellipse (default: 50px radius)
  • Line (default: 100px length)
• Click anywhere on the canvas to place the shape
• Shapes inherit styles from previously created layers

Text Layers

• Press 'T' or click the "New Text" button
• Click on the canvas to place text
• Start typing immediately in edit mode
• Text layers are named "Text" by default

Layer Placement

• Click inside a folder/group to add as child
• Click outside page boundaries to add to project root
• Click inside page to add to the page you clicked in
• Layers automatically position based on cursor location

Learn more: Creating Shape and Text Layers in Figpea

Layer List Navigation

The layer list is your primary tool for organizing and managing design elements:

Finding Layers

• Use the search bar to quickly locate layers
• Navigate the hierarchy with expand/collapse controls
• Filter layers by type (shape, text, group, etc.)

Selection Techniques

• Single click for individual selection
• Cmd/Ctrl + click for multiple selection
• Shift + click for range selection
• Click parent folders to select groups

Learn more: Layer Hierarchy Operations in Figpea

Essential Layer Controls

Visibility

• Toggle layer visibility with the eye icon
• Hide/show multiple layers at once
• Quick isolation mode for focused editing
• Temporarily hide other layers

Layer Order

• The list reads front-to-back: the layer at the top of the list is the one drawn in front. Drag a row above another to bring it in front of that layer, below to send it behind, and onto the middle of a folder row to nest it inside.
• A mask sits behind what it masks, so it appears below its targets in the list — see Masks for how a mask row and its affected rows are marked.
• Drag and drop to reorder layers
• Move layers between groups
• Keyboard shortcuts: Cmd/Ctrl + ] brings a layer one step forward and Cmd/Ctrl + [ sends it one step back; add Shift — Cmd/Ctrl + Shift + ] / Cmd/Ctrl + Shift + [ — to bring it all the way to the front or send it all the way to the back
• The same four commands sit as buttons next to Flip, Locate, and Lock in the Position panel
• Right-click a selected layer on the canvas for the same four commands at the cursor; press Esc or click away to close the menu without changing anything
• Ordering moves a layer among its siblings — a layer inside a group is restacked within that group, not in front of the whole page
• Already at the front or back? The command does nothing and its control greys out
• How do I bring a layer to the front in Figpea? Use the Cmd/Ctrl + Shift + ] shortcut, the Bring to Front button in the panel, or right-click the layer and choose it from the menu

Grouping

• Create groups to organize layers (Cmd/Ctrl + G)
• Nest groups for complex hierarchies
• Ungroup when needed (Cmd/Ctrl + Shift + G)
• Groups help organize related elements
• Groups maintain layer relationships while moving
• Groups can be nested for complex structures

Basic Transformations

Move Tool

• Drag layers on canvas
• Hold a drag still over a page for about a second to move the layer into that page — or over empty canvas to move it back to the top level. The layer keeps its position.
• Arrow keys for precise movement
• Snap to other elements
• Align to guides
• Align and distribute multiple layers for precise arrangement

Resize Operations

• Drag handles to resize
• Maintain aspect ratio (hold Shift)
• Scale from center (hold Alt)
• Numeric input for exact dimensions
• Lock proportions with the chain toggle next to Width/Height — resizing one dimension (by field or drag) scales the other to match.

The lock only ever links Width and Height — not corner radius, padding, or other paired fields.

This is an editor setting — it stays on as you switch between layers until you turn it off.

To control how a layer behaves when its page or group is resized, see Constraints & Resizing. That page describes how child layers reflow when their container resizes — a different feature from locking a single layer's own aspect ratio. To set a page itself to a standard size — A4, an iPhone screen, an Instagram post — see Page Sizes & Presets.

How do I resize a layer in Figpea without distorting it? Use the chain toggle next to the Width and Height fields to lock proportions.

Group Scale & Reset Scale

When a group (folder) is selected in content mode, the inspector Position section displays its accumulated matrix scale as Scale X and Scale Y percentage fields alongside a Reset Scale button.

• Scale X and Scale Y: View and edit the group's scale factors directly in percent (e.g. 150% width x 80% height). Typing a target percentage resizes the group relative to its parent-space top-left.
• Reset Scale: Click the Reset Scale button (⟲) to reset both scale factors back to 100%. This snaps the group back to its natural content dimensions while leaving child local geometry untouched and preserving rotation.
• Disabled State: The Reset Scale button automatically disables at exactly 100% x 100% scale.

Math in numeric fields

Can I type calculations into Figpea's size and position fields? Yes — numeric fields in the inspector accept arithmetic expressions using the operators +, -, *, /, ^ (power), and parentheses for grouping. This applies to the X and Y position fields, width and height, rotation, corner radius, font size, stroke width and offset, drop-shadow and blur parameters, and prototype timing.

For example: 1920/2 evaluates to 960, 100+50 to 150, (1440-16)/2 to 712, 2^3 to 8. Note that 2^3 is how you write a power — 2**3 isn't valid.

Relative inputs: begin with an operator to work from the current value. *2 doubles, +50 adds 50, /2 halves. A leading - is read as an absolute negative number (so -10 still sets the value to -10), not relative. To subtract relatively, type +-10.

What isn't supported: no percentages (50%), no units (20px), no named values or functions (pi, min()). If what you typed isn't valid arithmetic, the field snaps back to its previous value and nothing moves — the one exception is the two blur radius fields (Blur and Background Blur), which reset to 0 instead.

Note on limits: a field with a limit still clamps the evaluated result. A corner radius can never go below 0, so committing 0-5 — which works out to -5 — lands at 0, not -5.

Learn more: Transform Tool in Figpea

Layer Properties

Opacity

• Adjust layer transparency
• Quick opacity presets
• Keyboard shortcuts
• Group opacity settings

Blend Modes

Figpea supports all 27 Photoshop blend modes, rendered client-side with complete visual fidelity using per-pixel compositing. Blend modes are organized into standard categories:

• Normal: Normal, Dissolve
• Darken: Darken, Multiply, Color Burn, Linear Burn, Darker Color
• Lighten: Lighten, Screen, Color Dodge, Linear Dodge (Add), Lighter Color
• Contrast: Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix
• Inversion: Difference, Exclusion, Subtract, Divide
• Component: Hue, Saturation, Color, Luminosity

SVG & CSS Export Warning & Rasterisation

When exporting layers to SVG or CSS, blend modes that cannot be natively represented using standard CSS mix-blend-mode or SVG filter primitives are automatically rasterised into image fills to preserve exact visual fidelity, and a non-blocking warning is recorded on the project's warnings channel and surfaced via the Agent API's figpea.report.diagnostics() as a rasterized_fallback diagnostic.

Switching a layer's Blend Mode recomposites the canvas instantly — pick a different mode in the inspector and every affected pixel redraws in place:

Layer Effects

• Drop Shadows & Inner Shadows: Configure dx/dy offsets, blur radius, color, opacity, and blend modes for realistic shadow depth.
• Gradient Overlay (gradientOverlay), Pattern Overlay (patternOverlay), Outer Glow (outerGlow) & Inner Glow (innerGlow): Decoded from Photoshop's lfx2 layer style data and rendered faithfully on canvas. In the inspector, each of these 4 effects shows as a read-only summary row — a color/gradient/pattern swatch, its key parameters, and an enable/disable toggle — rather than editable sliders or color pickers. Full parameter authoring (gradient stops and reverse, pattern scale and origin, glow size/spread/choke/source, blend mode, opacity) is available today via the Agent API's figpea.layer.stylePatch().

Frequently Asked Questions

How does Figpea render PSD layer styles? Figpea decodes Photoshop's lfx2 layer style descriptors and renders effects in Photoshop's native layer-style stacking order (Drop Shadow → Outer Glow → Overlays → Inner Shadow → Inner Glow → Stroke) completely in your browser without uploading files.

Learn more: Layer Operations in Figpea

Working with Text

Text Editing

• Double-click to edit text
• Basic formatting options
• Font selection
• Size adjustments

Text Properties

• Alignment controls
• Line height
• Letter spacing
• Color settings

Shape Operations

Basic Shapes

• Rectangle
• Ellipse
• Line
• Polygon

Shape Properties

• Fill color
• Border style
• Corner radius
• Path operations

Quick Actions

Common Operations

• Copy/Paste (Cmd/Ctrl + C/V)
  • Copy and paste layers with properties
  • Paste images directly from clipboard
  • Paste images from other applications
  • Support for various image formats
  • The page under your cursor determines which page receives the pasted content; your selection determines the container within that page
• Duplicate (Cmd/Ctrl + D)
• Delete (Delete/Backspace)
• Undo/Redo (Cmd/Ctrl + Z/Shift + Z)

For many copies at once — along a path, around a ring, or in a grid — see Repeat.

Learn more: Copy & Paste Feature in Figpea

Selection Shortcuts

• Select All (Cmd/Ctrl + A)
• Deselect (Cmd/Ctrl + D)
• Select Parent (Cmd/Ctrl + Up)
• Select Child (Cmd/Ctrl + Down)

Tips for Efficiency

1. Organization:

   • Name layers clearly
   • Use logical grouping
   • Maintain clean hierarchy
   • Delete unused layers

2. Selection:

   • Learn keyboard shortcuts
   • Use search effectively
   • Master multiple selection
   • Utilize isolation mode

3. Transformations:

   • Use snap guides
   • Learn modifier keys
   • Practice with handles
   • Master numeric input

4. Visibility:

   • Use isolation mode
   • Toggle groups efficiently
   • Manage complex hierarchies
   • Quick show/hide techniques

For more detailed information about specific layer operations, check our blog posts or move on to Advanced Layer Operations.