Every Studio project is a set of pages laid out side by side on one canvas. This page covers adding pages from 17 size presets, drawing custom pages, nesting frames, backgrounds, clipping, and the workspace appearance settings.
A page in Studio works like an artboard. Each one has its own size, position on the canvas, background color and layers, and each one exports as its own image (or as one page of a PDF). A carousel, a pitch deck or a set of social sizes can all live in a single project.
There are four ways to add a page.
F) turns the pointer into a crosshair. Drag on an empty part of the canvas to draw a page of any size.Cmd / Ctrl + D with nothing selected duplicates the active page, layers and all, and places the copy right after it.When a project has no pages at all, the canvas shows No pages yet, add a page to start with two buttons: Add square 1080 and Draw page (f).
The page menu and the Preset dropdown in the page properties share the same 17 presets, grouped into four sets.
| Preset | Size (px) |
|---|---|
| square 1080 | 1080 × 1080 |
| portrait 4:5 | 1080 × 1350 |
| story 9:16 | 1080 × 1920 |
| landscape 16:9 | 1920 × 1080 |
| wide banner | 1500 × 500 |
| Preset | Size (px) |
|---|---|
| desktop 1440 | 1440 × 1024 |
| desktop 1920 | 1920 × 1080 |
| laptop 1280 | 1280 × 800 |
| Preset | Size (px) |
|---|---|
| iphone | 393 × 852 |
| iphone pro max | 430 × 932 |
| android | 360 × 800 |
| ipad | 820 × 1180 |
| ipad pro | 1024 × 1366 |
| Preset | Size (px) |
|---|---|
| a4 | 2480 × 3508 |
| a5 | 1748 × 2480 |
| us letter | 2550 × 3300 |
| poster 3000 | 3000 × 3000 |
The print sizes match A4, A5 and US Letter at 300 pixels per inch, so they hold up when printed.
Tip: Device sizes are in screen points, which are small. Export them at
2xor4xto get a sharp image for a real phone. See exporting.
Click a page's name label, just above its top-left corner, to select the page itself. The right panel changes to Page properties and the page gets resize handles you can drag.
Clicking inside a page (on its background) makes it the active page and deselects any layer. Clicking a page's header in the Layers panel does the same.
| Section | Controls |
|---|---|
| Name | A text field for the page name, with its position shown underneath, for example Page 2 of 5. You can also double-click the name label on the canvas to rename it. |
| Preset | Every size preset, plus custom when the size does not match one. |
| Background | The page's background color. You can bind it to a design kit color so it updates with the kit. |
| Size | W and H, with a lock button to keep the aspect ratio. Pages cannot go below 50 pixels on either side. |
| Position | X and Y of the page on the canvas. |
The trash icon in the panel header deletes the page. You can also press Delete or Backspace while the page is selected and no layer is selected.
Drag a page by its name label to move it around the canvas. Position does not affect export, it only helps you arrange your workspace.
Every page has a header row in the Layers panel showing its name and its layer count.
Deleting a page cannot be recovered from the panel, but Cmd / Ctrl + Z brings it back.
A frame is a page nested inside another page. It has its own background color and its own layers, and it moves and resizes like any other layer. Frames are handy for photo grids, device screens inside a presentation slide, or any area that should crop what is inside it.
To add one:
You can also press F and draw a frame directly inside an existing page. Drag a frame so its center sits over another frame or page and it moves inside that one.
While a nested frame (or a layer inside one) is selected, images, adjustment layers and patterns you add go inside that frame.
Top-level pages always crop anything that hangs over their edges. Nested frames have a Clip content setting in their properties: Clip content to page bounds is on by default. Turn it off to let the contents of a frame spill out over the page around it.
Each page and frame has a solid background color, set from the Background section of its properties. New pages start white, and pages added from the Layers panel copy the active page's color.
The color picker accepts any color, and can bind the background to a design kit color. See color tools for everything the picker can do.
Some templates also use a page image. Template image slots that have no picture of their own show the page image. Replacing the picture in one of those slots sets it as the page image. See images and uploads.
When an image layer is selected, the match page to image button under its size fields resizes the active page to exactly the image layer's size and moves the image to the top-left corner. It is the quickest way to build a design around one photo at its own proportions.
The resize to other formats button in the top bar opens a dialog titled resize to formats. Tick any of the six formats and Studio adds one new page per format, placed to the right of your existing pages.
| Format | Size (px) |
|---|---|
| square post | 1080 × 1080 |
| story / reel | 1080 × 1920 |
| landscape | 1920 × 1080 |
| album cover | 3000 × 3000 |
| wide banner | 1500 × 500 |
| a4 print | 2480 × 3508 |
The resize follows fixed rules rather than guessing. Layers that cover the whole page (full-bleed backgrounds) stretch to fill the new size. Every other layer keeps its relative center point and scales evenly to fit, and text scales its font size and letter spacing to match. Your original page is never changed, so you can fine-tune each new page by hand.
Click an empty part of the canvas, outside every page, so that nothing is selected. The right panel then shows the Page panel for the workspace itself.
| Section | What it does |
|---|---|
| Workspace background | The color of the canvas area behind your pages, not the pages themselves. Reset to theme returns it to the light or dark theme default. |
| Pattern | Dots, Grid or None behind your pages. The spacing adapts as you zoom so it never turns into a smudge. |
| Design kits | Your saved design kits. Click one to make it active. If you have none, it says No kits yet. Create one from the Kit menu. |
| Quick keys | A short list of the most used shortcuts. |
These settings are a personal preference, saved in your browser. They apply to every project and never appear in exports.