Versions, variations and iterations
A design changes in three ways. An iteration is a round in time, a variation is a context, and a version is an alternative. These words tell you which one you are looking at.
| What | What it is | When you use it |
|---|---|---|
| Iteration | A frozen snapshot of the whole journey, one per round of designs | You want to look back at an earlier round or bring it back |
| Variation | The same design tweaked to a context: a theme, a user role, a state or a corporate design | You want every screen in dark mode, for admins, or in one customer's colours |
| Version | An alternative inside one variation, named A, B, C | You want to compare two ideas for the same screen |
| Branch | A line of work in your app's code | You want to see the screens of code that is not finished yet |
| Corporate identity version | A saved state of your logos, colours and fonts | You want to try a new look before everyone gets it (see "Corporate identity") |
Every variation is a valid design, and each one can be approved. A version always belongs to a variation. You approve a version in one of two ways: make it the winner, or approve the variation. Approving a variation always approves the version it shows at that moment.
Most people only need versions at first. Branches are for people who work in the code.
Design or built app
The Version switch at the top has two halves. One half shows the code branch name, such as "main", and stands for the built app. The other half says "Design" with a letter, and stands for the designs. Press D to switch between them. Clicking a half opens its list.
A new version of one screen
- Next to a card, open Versions of this screen.
- Click + (Ask for a new version).
- Write what the new version should do differently. Click Make version B (or the next letter).
- Tell your AI to do your comments. It draws the new version.
- Like it best? Click Make B the winner. That approves it.
Iterations
An iteration freezes the whole journey as it was. Your AI saves one after a round of designs. Click the design half of the Version switch to see every iteration. An older one shows a note at the top. Click Back to latest to return.
Want a fresh take on a whole iteration? Click + in that list. Your AI picks it up the next time it does your comments.
Branches
Click the built-app half of the Version switch. Each branch of your code shows how many screens already match the design, and which are missing.
Variations
A variation keeps the design and changes its context, so every variation is valid and can be approved on its own. CD means corporate design: your logos, colours and fonts. A CD variation, such as dark mode, is the most common kind.
- Click Overview under Corporate design in the left bar.
- Click New variation at the top. Give it a name, such as "Dark", and click Create variation.
- A tab with that name now shows at the top. Click it, then comment on what should look different, such as the background colour. Tell your AI to do your comments.
- On the board, use CD variation at the bottom left to show every screen in that variation.