Artboard
An artboard is a defined drawing area within a graphics document on which a single design is created. A file can contain many artboards side by side, for instance one for each screen of an app.
An artboard is a rectangular work area in a graphics program. Think of it as a sheet of paper lying on a very large table. The table is the endless workspace of the program, the sheet is the part that ultimately counts. Only what lies on the artboard is eventually printed or output as an image file. Everything beside it remains visible but is not part of the finished result. A single file can hold many such areas, each with its own size and its own name.
Why designers don’t work with one file per image
In the past, a separate file was created for each visual. For an app with thirty screens, that means thirty files. If the color of a button changes, all thirty must be opened individually. Artboards solve this problem because all screens lie side by side in one document.
This has a second advantage: you can see the connection. A designer can tell at a glance whether the margin at the top edge is the same on all pages. With separate files, such a discrepancy often goes unnoticed until late. Clients, too, understand a design more quickly when they see the flow of an app as a series of areas.
A third point concerns different formats. An advertising campaign needs the same visual as a poster, as an ad, and as a square image for social media. Each format gets its own artboard with matching dimensions. The visual is copied and adapted, while the shared idea stays in one place.
Size, origin, and export
Each artboard has a fixed width and height, specified in pixels or millimeters. A screen design for an iPhone is typically 390 by 844 pixels. A poster in A1 format measures 594 by 841 millimeters. When creating a new artboard, programs offer ready-made templates for common devices and paper sizes.
Each area’s own origin point is important. The position of an object is not measured from the edge of the document but from the top-left corner of the respective artboard. A logo with coordinates 20 and 20 therefore sits in the same spot on every area. If the artboard is moved, the content moves along with it.
Upon export, each artboard becomes its own file. A document with twelve areas thus produces twelve images, named after the artboards' names. That’s why it pays to name them cleanly, i.e. “Home Screen” instead of “Artboard 7”. Programs can also output several resolutions at once, for example for standard and high-resolution displays.
From Illustrator to Figma
The term originates from Adobe Illustrator, where artboards have existed in their current form since 2008. Photoshop has them too. In Figma and Penpot, the same concept is called Frame; in Sketch, simply Artboard. The names differ, but the idea is identical.
A common mistake is confusing them with layers. Layers lie on top of one another and determine what covers what. Artboards lie side by side and determine what belongs together. Both concepts exist in parallel: an artboard can contain many layers.
You will encounter the term wherever interfaces are designed. Anyone working on a school project in Figma creates frames without even noticing. AI tools that generate designs from a description also usually output their results as individual artboards. The developer later exports them as a template for the finished code.