🔨

Building Your First Screen

Let's build your first screen! 📱

This guide will walk you through building a simple Welcome Screen.

Before we get started, make sure you're on a new, blank screen!

To add a new screen, click the 'Screens' button in the left-hand column, and then the '+' button in the Screens header.

Also make sure you have Live Preview open on your phone by clicking the ▶️ button at the top of the Builder.

image

Step 1: Add components to your screen

Click '✚ Add' to open the Component Drawer and add the following components to your screen:

From the Bits Section:

  • Image Background
  • View x2
  • Text x3

From the Blocks Section, under Buttons:

  • Button Solid
  • Button Outline
image

Step 2: Rearrange Components

Drag and drop the Components in the Layer Tree to rearrange them so they match the picture below.

image

Select the Image Background in the Layer Tree.

In the Styles tab, change:

  • Justify to Space Around
  • Width to 100%
  • Height to 100%

In the Data tab, change:

image

Select the first Text component in the Layer Tree.

In the Styles tab, change:

  • Color to Strong Inverse
  • Font to Headline2
  • Align to Center

In the Data tab, change:

  • Text to Welcome

image

Select the second Text component in the Layer Tree.

In the Styles tab, change:

  • Color to Strong Inverse
  • Font to Headline6
  • Align to Center

In the Configs tab, change:

  • Text to "Let's get started."

image

Select the second View component in the Layer Tree.

In the Styles tab, change:

  • Justify Content to Space Between
  • Height to 150pt
  • Padding (left & right) to 16pt

Note: The first View component needs no styling. It's good as-is!

image

Select the Button Solid in the Layer Tree.

In the Configs tab, change:

  • Text to "Sign up"

image

Select the Button Outline in the Layer Tree.

In the Configs tab, change:

  • Text to "Log in"
  • Color Override to Strong Inverse
image

Select the last Text component in the Layer Tree.

In the Styles tab, change:

  • Font to Caption
  • Color to Light Inverse
  • Align to Center

In the Configs tab, change:

  • Text to "Photo by Max Kleinen on Unsplash"
image

Step 5: View your work!

image

Nice work! Your screen should look like this! 👆

Having trouble getting your screen to match? We can help you in the Draftbit Community↗️

In the next Tour, we'll show you how to build even faster with Example Screens and Themes.