RectangleFlow

Design

Rectangle for Designers: A Figma and Sketch Window Workflow That Holds

Artboards, asset panels, mood boards and a brief document all want the same pixels. A fixed spatial grammar settles the argument once, and your hands stop negotiating with the desktop.

12 Jul 2026 · 6 min read · RectangleFlow

Figma canvasBriefReference
Reference layout for this guide, drawn to scale in twelfths of the screen.

Why design work punishes free-floating windows

A typical Figma session on a Mac is never one window. There is the canvas, a browser tab holding the brief, a second tab with the design system, a Slack thread where the client is still revising the copy, and a folder of reference shots. macOS treats all of these as equal citizens in one shuffling stack, so the designer spends the day performing a small administrative task — find the window, drag it, resize it, lose it again — several hundred times.

The cost is not the seconds. It is the interruption. Every manual reposition is a context switch away from the thing you were actually looking at, and creative attention does not resume instantly afterwards. Rectangle removes the administration by giving each window a named destination that a keystroke can reach, which turns window arrangement from an activity into a reflex.

There is a second, quieter benefit. When the reference panel lives in the same corner every single day, your eyes learn where to go without conscious direction. Spatial memory does the retrieval for free. That is the real argument for a keyboard-driven window manager in design work: not speed, but the fact that a stable layout stops competing for the attention you need for the work.

A Figma layout that survives a full working day

Figma in a browser is greedy — it opens maximised and manages its own internal panels, so the temptation is to leave it full screen and Cmd-Tab to everything else. That works until the third time you need to check a spec value. A better default is the two-thirds split: canvas on the left two thirds, supporting context in the right third.

⌃⌥ELeft two thirds — Figma canvas
⌃⌥GRight third — brief or Slack
⌃⌥←Left half — file A
⌃⌥→Right half — file B

Two thirds is wide enough for real canvas work on a 14-inch display and still leaves a readable column for the brief. When the session shifts from making to reviewing — a designer and a developer walking through the same screen — switch to an even split instead. Two keystrokes, and the design and the requirement sit side by side without either being cropped.

Comparing two Figma files, such as the component library against a live screen, is the case where the Rectangle app pays for itself in a single afternoon. Put each file in its own browser window, snap one left and one right, and the comparison becomes a glance instead of a tab cycle. Anyone who has hunted a four-pixel spacing discrepancy by alternating tabs will recognise the difference immediately.

On an ultrawide display, skip halves entirely and work in thirds: canvas centre, references left, communication right. Rectangle for Mac treats a 34-inch panel as one screen, so the thirds shortcuts divide it into three genuinely usable columns rather than two absurdly wide ones.

Sketch, Affinity and other native canvases

Sketch and Affinity Designer behave differently from a browser because they carry floating inspector and layer panels that the application positions itself. A window manager acts on the parent window; the child panels follow it. In practice this means snapping Sketch to the left two thirds will move its panels along too, and they may then sit awkwardly close to the new right edge. Nudging them once, at the start of the session, fixes it for the day.

For pure creation work, full screen is honest — most designers do not need anything else visible while drawing. The value of Rectangle there is the return trip: one shortcut expands the canvas, one shortcut restores the two-thirds layout when a reference is needed again. The layout is not something you build, it is something you toggle.

Designers who keep a separate symbols or components document open alongside the working file get the clearest win from the halves layout. Both documents stay fully visible, focus moves between them with Cmd-Tab, and neither ever needs to be minimised and dug out again.

Pinning reference so you stop retrieving it

The single most useful pattern for visual work is the persistent reference quarter. Put the mood board, the brand sheet or the client's photograph in the upper-right quarter and leave it there. It occupies a corner nobody needs, and it removes an entire category of interruption from the day.

⌃⌥IUpper right — reference
⌃⌥UUpper left — canvas
⌃⌥KLower right — spec notes
⌃⌥↩Maximise — focused drawing

Colour matching and proportion judgement both improve when the reference is continuously in peripheral view rather than summoned every few minutes. You are comparing rather than remembering, and memory is the weaker instrument. Type specifications behave the same way — with the spec pinned in a corner, every size check is a glance, and glances do not break flow.

Handoff and review layouts

Handoff sessions are where undisciplined desktops fall apart in front of an audience. The designer opens annotations, then the design file, then the component docs, then a staging URL, and the shared screen becomes a slideshow of window management. Set the layout before the call instead: design left half, implementation notes right half, component reference in the upper-right quarter.

Reviewing a build against the original design works the same way — Figma on one side, the deployed preview on the other. Discrepancies are obvious when both are visible at once and remarkably easy to miss when you are toggling. The Rectangle window manager is free and open source, so a whole team can standardise on the same shortcuts without a procurement conversation.

Rectangle is free and open source

Halves, thirds, quarters and sixths from the keyboard, on any Mac. No trial, no account.

Download Rectangle for Mac →

Frequently asked questions

Does Rectangle work with Figma running in a browser?

Yes. It positions the browser window, not the page inside it, so Figma behaves exactly like any other app. Figma's own internal panels reflow to whatever width the window ends up with.

Will snapping windows break Sketch's floating panels?

No, but they travel with the parent window. After a big resize you may want to nudge the inspector back inside the new bounds once. It is a Sketch behaviour rather than a window manager limitation.

Is two thirds better than a half for design work?

On 13- and 14-inch displays, usually yes — a half leaves the canvas cramped. On 27-inch and larger, halves are comfortable and thirds are better still.