Editor modes

The switch at the left of the bottom bar sets one mode for the whole editor. Feega remembers it in your browser.

Mode	What it does	Key
Design	Edits set the resting state of a layer. Editing an animated property shifts its whole animation, curve shape kept, with a notice. ⌘J opens the timeline to scrub, read-only.	E toggles with Motion
Motion	Recording: a red border marks the canvas and the properties bar. Edits create or move a keyframe at the playhead; the ◇ next to a property toggles its keyframe. The timeline opens on video frames; ⌘J hides it.	E
Play	Connect and try: prototype links drawn as arrows, node lines hidden. The right panel holds the link, Prototype flow (Play, Copy play link), Play on canvas and Interactive.	—
Code	Read a layer as CSS or Tailwind, export the frame as React, HTML or Svelte. Nothing can be edited. See Code mode.	Shift+D

• E switches between Design and Motion; from Play or Code it goes back to Design.
• Shift+D enters Code; pressed again it goes back to Design.
• Play starts the player on the frame you are in, or the one frame selected.
• Stills always edit in Design: Motion applies to frames that have a timeline.

Recording in Motion

• Drag, resize, rotate on the canvas key the change at the playhead. A layer that was not animated starts a track: its value stays at its first frame and the new one lands at the playhead. The anchor point is never keyed.
• Drawing a new layer in Motion sets its resting values, with no keyframes. It starts at the playhead.
• Motion path: select one layer whose position is animated and its path shows on the canvas, one tick per frame.
• Onion skin: turn it on with Onion skin in the timeline bar. The selected layer shows as faint outlines at its previous and next keyframes.
• Voice-over and music: with nothing selected, the right panel has a Sound row with Voice-over… and Music…. They are also in the node’s … menu.

The mode used to live in a row at the top of each frame’s properties. That row is gone: the bottom-bar switch replaces it, for every frame at once.

The properties panel

The right panel follows the selection, whatever is selected:

• A generated image or video: its model and settings, the same pickers as the selection toolbar.
• Several free elements or nodes: Align (left, centre, right, top, middle, bottom) and Distribute horizontally or vertically.
• Several layers inside a frame: X, Y, W and H (Mixed where the layers differ; typing sets each layer), spacing (blank where they overlap), rotation, opacity, the same Align and Distribute bar, and Use as mask: the bottom-most selected layer cuts the layers above it. Remove mask undoes it. Both are in the right-click menu too.
• An instance: its name, Instance of its main component, and X, Y, W and H; swap the main component in the instance panel.
• One layer, in Design: alignment, layout, constraints, appearance, fill, stroke and effects. Timing, Transform, 3D, Parent & mask and Animation appear only in Motion; so do Morph and the liquid presets, and Morph only on a shape that has morph targets. A 3D model keeps its 3D section in both.
• A frame itself: its name in the header, X and Y on the canvas (and Rotate for a free group or image), size, then its look.
• A main component: its properties and variants, with X, Y, W and H; Swap, Reset overrides, Push to main and Detach are on its instances only.

Properties live in the right bar, actions in the right-click menu: Duplicate, Group, Export, the image tools and the frame entries (Components, Templates, History, Publish…) are there, each once, with its shortcut. Aligning is only in the right bar; the bar that used to float under a frame is gone.

On a phone or tablet, press and hold a node or a layer to open the same menu a right click opens.