Draftbit empowers you to build apps visually. Whether you’re just getting started with it, this is your first (visual) adventure into app development, or you still need to request an invite, this new Draftbit 101 blog series will explore some of Draftbit’s core features and how they work.

To kick off the series, let’s go over how to create and build your first Screen.

What are Screens?

Screens are foundational to apps and, therefore, to working in Draftbit. Everything you do in apps happens across a series of Screens—organize a list of tasks, use a login form, view a photo, change settings. Those are all Screens, and Draftbit is a Screen machine.

How to create a Screen

Once you’ve logged in, watched our intro video, and got set up with our Slack community (check your email for the invite!), you’ll have to create your first app.

  • Click New App in the upper right of Draftbit
  • In the New Project window that appears, click to give your new app a name, then click Next
  • On the next Screen is a prompt to set up the Live Preview feature, which displays your app on your device and updates live as you work. This feature will be more useful later. But for now, install the Expo Client app for iOS or Android, then scan the QR code (the iOS camera can do this natively, the Expo Android app can handle it for you). Click Next
  • On the final New Project setup Screen, click Done to begin with a blank Screen

Boom! As Bon Jovi once said: we’re halfway there.

How to build *your* Screen

To start bringing your vision to life, check out the ⨁ Add button at the top of the left toolbar. This is where you’ll find our growing library of visual app building blocks—controllers, image placeholders, buttons, text boxes, icons, dividers, and more. Simply drag and drop them out of this component drawer and onto your Screen.

We won’t explore all the components in this post, but you can in our documentation. For now, let’s use a few of the most common blocks to build the Simple Welcome Screen from our Template gallery.

Step 1: Containers

Your project should look quite a bit like this at the end of Step 1

First up, drag the Container block from the Add panel to your Screen. For most projects, we recommend dropping in a container first, then adding other components into it.

Think of a Container as a tool to group interface elements. It can hold multiple components that all inherit some of the container’s settings and style, such as a background image and padding related to other items on the Screen. Let's do a little more with Containers for now (if necessary, click away from the Add panel to dismiss it).

  • Click the Container you just added to the Sidebar (let's call this the parent container)
  • In the Configuration Panel on the right, click the Layout tab at the top
  • In the Width & Height section, set those two options to "auto" and "100%". This sets the container to take up the full height of the device screen
  • Click the Config tab, then add a Background Image. If you're short on stock photography, we recommend Unsplash as a great source for free, beautiful photos
  • Open the Add panel again and drag two more Containers onto your Screen. These are where we'll add components like text for a Screen title, and buttons for the user to sign up or log in
  • In the Sidebar, drop them onto the parent Container so they both become child Containers (see screenshot above)
  • Click Screen at the top of the Sidebar, then click the Config panel on the right. Make sure Has SafeAreaView is disabled

Step 2: Text

Your Simple Welcome Screen is coming along nicely!

Text is a good ol’ fashioned block of text. For this step:

  • Click the first child Container
  • In the Alignment tab on the right, change the Justify Content option to Space Around to ensure your text takes center stage on the Screen. Learn more about justifying content
  • Open the Add panel and drop a Text component onto your Screen
  • In the Sidebar, click and drag it to just below the first child Container in the Sidebar (so it becomes a child of that Container. See screenshot above)
  • With the Text block selected, click the Config tab of the Configuration Panel on the right
  • In the box labeled Text there, add something like a welcome message or your organization's name
  • Adjust other elements in that tab such as text style, color, and alignment. We recommend center alignment and Headlins2 or Headline3 to help it stand out
  • (Optional) Add a second text box below this one for helper text like instructions or a company tagline

Step 3: Buttons

The Button is another common component. We added a variety of flexibility for visual elements such as background, a library of icons that can be displayed inside the button, text formatting, and more. Let's add Sign Up and Log In buttons to your Simple Welcome Screen.

  • Click the second child Container
  • In the Alignment tab on the right, change the Justify Content option to Space Between to ensure the buttons are spaced evenly in this Container. Learn more about justifying content
  • In the Add panel, click the Button component, which will display a sub-section of button options
  • Drag the Button Solid component onto your Screen
  • Drag the Button Outline onto your Screen
  • Before you click away from the Add panel, click back out of the button section at the top to return to the full list of components
  • Drag them both to the second child Container

When it comes to best practices for laying out a Screen like this, we recommend setting the solid button as Sign Up and the outline button to Log In. Click each button, apply their respective labels in the Config tab on the right, then drag to order them with Sign Up on top and Log In on bottom.

Preview Your Handiwork

Left: full project build. Right: Preview on Expo Client

Now is a good time to see how your Screen will look on your actual device. Remember, you'll need the Expo Client app (for iOS or Android) to use Live Preview.

  • Click Live Preview at the top of the Draftbit builder
  • Use your device to scan the QR code that appears. This will launch the live preview (on iPhone, use the device's built-in camera, then tap the notification that appears. On Android, use the Expo Client app's camera)

Your Screen should now be live on your device. As you work in Draftbit to add components and create new Screens, the Expo Client will update its preview in real time. We recommend previewing your app more often this way than in the Draftbit builder, as many of our components render more completely on device.

Screen On

We hope this was a helpful introduction to some Draftbit basics. Catch us on Twitter, Facebook, and LinkedIn, and let us know what you think or if you have requests for future posts. We’ll be back soon with more.

Banner photo by Max Langelott on Unsplash