Your first screen

This walk-through builds a small sign-up screen for a phone: a title, a line of text and a button, lined up by auto layout so the screen keeps its shape when you change it. Along the way you meet the tools you will use every day. It takes about ten minutes.

If you would rather start from something drawn for you, read Make a file with the agent, then come back to adjust the result.

1. Make a file

On Home, press New file. A deck called Untitled deck opens on Page 1. Double-click the name in the top bar and call it something you will recognise.

2. Add a screen

Press F for the Frame tool and click on the canvas. You get a phone-sized frame, 390 by 844, white, with its content clipped to its edges.

While the Frame tool is on, the Design tab lists sizes by device: open Phone and pick one to add a frame of that size instead. You can also drag on the canvas to draw a frame of any size.

Press ⌘R and name the frame Sign up. Good layer names make the layers list, the prototype and your published site easier to read.

3. Turn on auto layout

With the frame selected, press ⇧A. In the Layout section of the Design tab, set:

• Direction: Vertical
• Gap between items: 16
• Padding: 24 on each side

From now on, anything you put in the frame stacks in a column with those gaps. Read Auto layout for everything it can do.

4. Add text

Press T and click inside the frame. Type a title, such as “Create your account”, then press Esc. In the Typography section, make it larger and bolder.

Add a second text layer the same way for a short line underneath, such as “It takes less than a minute.” Leave it at a smaller size.

Both layers join the column in the order you added them. To change the order, drag a layer up or down in the frame or in the layers list.

5. Add a button

Press B and click inside the frame, below the text. A button arrives with the label Button. Press ↩ to edit the label and type “Continue”.

To make the button as wide as the screen, open the menu on its W field and choose Fill container. It now stretches between the frame’s padding, whatever the width of the frame. Read Hug, Fill and min/max sizes.

6. Give it colour

Select the button and click the colour swatch in its Fill section. Pick a colour, or press I to take one from anywhere on screen. If you will use the colour again, save it as a variable so every use changes together. Read Variables and modes.

7. Let the coach check it

Select the Sign up frame, then press Coach in the floating toolbar. The coach reads the screen and shows its findings one at a time: text that is too small, too little contrast between text and its background, a tap target smaller than 44 by 44, and more. Many findings have Apply fix, which changes the layer for you. Read The UX coach.

8. Try it

Select the frame and press ⌥⌘↩, or the play button in the top bar. Preview opens in a tab beside your file and shows the screen as it will look on a device. Press Esc to come back.

Where to go next

• Add a second screen and link the button to it: Link screens and Preview.
• Make the screen work on a computer too: Breakpoints.
• Turn the button into a component you can reuse: Components and variants.
• Put it online: Publish a site.

Catches

• Text clicked outside the frame stays outside it. If a layer lands on the canvas instead of in the column, drag it into the frame.
• Fill container needs a parent. If it is unavailable, the button is on the canvas rather than inside the frame: drag it into the frame. Without auto layout on the frame, it fills the frame instead of the space between the padding.
• Everything saves as you go. There is no save button: your file is in your account the moment you change it. To keep a moment you can return to, use Save a version… in the file menu. Read Version history.