Overview

All designs in Judo start as an Artboard, allowing you to easily design apps and app elements for multiple devices. When designing in an Artboard, you can choose from a variety of preset sizes, define your own custom size, and set many other preview controls.

⬇ Note
Artboards are gray when unselected and blue when selected while Components are purple.

Adding an Artboard

There are several ways that you can start designing in an Artboard:

From the Insert (+) menu, click on Artboard. You can drag already created layers inside.
Use the keyboard shortcut A.
Select several layers from the Layers panel or directly on the canvas, right-click, and click on Embed in Artboard.

⬇ Note

While Artboards can contain layers and Components, they cannot be placed within other Artboards or Components.

Artboard Preview Controls

When you insert an Artboard to the canvas, you define an area for a small interface element or screen that you are designing. Each Artboard has its own Preview Controls, so you can adjust the following settings directly from the Inspector panel: screen size, color scheme, language, and text size. This way, you can easily see how your design will adapt. Let’s break down each control.

Screen Size

Preview how your design will look in one of the following screen sizes: iPhone 14, iPhone 15 Pro Max, iPad Pro 11”.

Appearance

By default, the Artboard will adhere to the system setting of your device. However, you have the option to explicitly set the Artboard to display in either Light or Dark mode.

Increased Contrast

Preview how users with the 'Increased Contrast' accessibility feature enabled will see your design by checking the Increased contrast box in the Preview Controls.

Preview how users with the 'Larger Text' accessibility feature enabled will see your design. Simply click on the plus sign and select one of the following sizes from the menu: Extra Small, Small, Medium, Large (Default), Extra Large, XX Large, XXX Large, Accessibility Medium, Accessibility Large, Accessibility Extra Large, Accessibility XX Large, Accessibility XXX Large.

Language

Preview how users who speak one of the 35 languages supported by the iOS simulator will see your design. Simply click on the plus sign and select a language from the menu.

⬇ Note

Make sure that you’ve added translations to see the translation take effect. To add translations to your design, click on Text in the menu bar at the top and select Translations… Then, click on the globe icon to add a new language and either fill in the translations yourself, or click on the cloud icon to get automatic translations from Google.

Orientation

You can also preview how your design will look vertically or horizontally by changing the following settings in the Inspector panel.

⬇ Note

You can only change the orientation when your Artboard is set to one of the screen sizes.

Turning an Artboard into a Component

If you want to reuse your design or add Properties, you can convert your Artboard into a Component. There are 3 ways to do so:

Right-click on the Artboard in the Layers panel, or on the canvas, and click on Create Component
With the Artboard selected, click on the Create Component button in the toolbar
With the Artboard selected, use the keyboard shortcut ⌥⌘K

Designing Components for Various Scenarios

A common use of Artboards is to preview a Component in various scenarios at the same time. Try adding multiple Artboards to the canvas and insert an instance of the same Component into each one. Then, configure the Preview Controls on each Artboard in different ways to see how your Component reacts.

For example, one Artboard could be set to an iPhone 14 with an Accessibility Extra Large Text size while another one could be set to Dark mode and translated in Czech. Another Artboard could be set to an iPhone 15 Pro Max in a Horizontal orientation while another one could be set to an iPad Pro 11” in Dark mode.

When you make adjustments to the Component, the changes are reflected across all of the Component Instances. This brings a powerful workflow for designing Components that allows you to see how changes in layout, color, and typography react to multiple scenarios all at once.

Set an Artboard as the Starting Point

If you’d like your app to start with a specific Artboard when previewing the design on the Judo mobile app, select the Artboard and either right-click it, or head to the Inspector panel, to select Use as Prototype Start Point.

The prototype starting point will have a flag icon before the name of the Artboard.