# Your first screen
> Build a simple phone sign-up screen from an empty file in ten minutes, with auto layout, text, a button and Preview.
Source: https://uxdeck.app/guide/first-screen (checked against uxdeck on 16 October 2026)
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](/guide/make-with-ai), then come back to adjust the result.
## 1. Make a file
On [Home](/guide/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](/guide/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](/guide/sizing).
## 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](/guide/variables).
## 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](/guide/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](/guide/link-and-preview).
- Make the screen work on a computer too: [Breakpoints](/guide/breakpoints).
- Turn the button into a component you can reuse: [Components and variants](/guide/components-and-variants).
- Put it online: [Publish a site](/guide/publish).
## 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](/guide/version-history).