A canvas for the whole screen Layout, components and variables, in the browser.
uxdeck is a design canvas that runs in your browser. Frames, auto layout, components and variables work the way designers expect, the file lives in your account, and what you draw is ready to prototype, animate and publish.
Built for real layouts
Auto layout stacks layers in a row or a column with even gaps and padding, wraps when a row is full, and lets a layer hug its content, keep a fixed size or fill what is left.
Components are made once and used everywhere: combine them into variants, give them text, boolean and swap properties, and every instance follows the main one while keeping its own overrides.
Variables hold colours, numbers and text in collections with modes, Light and Dark or one per brand, and any layer bound to them changes when its mode does.
Every width
Desktop, Tablet and Phone breakpoints, each changing only what that width needs.
Bring your work in
Import a whole .fig file with its pages, components and variables, or drop in SVG and pictures.
Versions
Named versions are always kept; the rest for 30 days on Free and 90 on Pro.
Code
Read any layer as HTML and CSS, Tailwind or React, and copy it.
Details worth sweating
The small things are where a tool earns trust. Each of these is a recording of uxdeck as it is today.
Gradients. Linear, radial, angular and diamond, with as many stops as you like, each one editable.
Wrapping rows. Auto layout that moves tiles to the next line when the row runs out of room.
Selection colours. Every colour in a selection in one list; change one and every layer using it follows.
Modes. Switch a card from Light to Dark and its bound colours change with it.
Variants. Combine components into a set and switch any instance between them.
Breakpoints. Add a Phone width to a desktop frame and its cards stack.
The pen. Straight and curved points, closed into a shape with one click.
Masks. Crop a picture to any shape with one shortcut.
Maths in fields. Type 320/2 into a width and the layer becomes 160 wide.
Plans
The canvas is the same on Free and Pro. What changes is how much you keep.
- 01
Files
Three files of your own on Free; as many as you like on Pro. Files shared with you never count.
- 02
Modes
One mode per variable collection on Free; up to 10 on Pro.
- 03
Fonts
Upload your own typefaces: 3 families on Free, 30 on Pro, shared with your team.
- 04
Pictures
500 MB of images on Free, 10 GB on Pro; adding video takes Pro.
Learn it step by step
How each part works, in the Guide, with recordings of uxdeck as it is today.
- Auto layoutLet a frame place its layers in a row or a column, with the gaps and padding you set, so it grows and shrinks with its content.
- Components and variantsMake a layer once, use it everywhere, and change every copy from one place; group its versions as variants.
- Variables and modesKeep colours, sizes, words and motion in named variables, give them modes such as Light and Dark, and apply them to layers.
- BreakpointsLay one screen out at several widths, desktop, tablet and phone, and publish it as one page that switches between them.
- Pages, frames and sectionsOrganise a file into pages, draw frames for your screens, and group frames into sections by flow or by state.
- Shapes, pen, pencil and markupDraw rectangles, ellipses, lines, arrows, polygons and stars, build your own vectors with the pen, and mark up a design by hand.
Start on the canvas
Free, in your browser, with nothing to install.
Start free