Building your first screen in Draftbit

For this tutorial, we’ll recreate the Simple Welcome screen you can find in our Example Screens gallery.

After you’ve created a new app and entered the builder, click + Add at the top of the left sidebar to open up our design system comprised of low-level elements called Bits and more complex components called Blocks.

Step 1: Containers

Once this drawer is open, you can begin clicking elements to add them to your screen. To get started building the Simple Welcome screen, let’s add an Image Background and two Views. Drag both of the Views inside of the Image Background.

add%20views

Select the Image Background in the Layer Tree and upload an image (we used this one) as the Image Source in the Config Panel.

Step 2: Text

Add two Text components inside of the first View.

1

On the first Text element change:

  • Text to “Welcome”
  • Text Color to Strong Inverse
  • Style to Headline 2
  • Text Align to Center

On the second Text element change:

  • Text to “Let’s get started.”
  • Text Color to Strong Inverse
  • Style to Headline 6
  • Text Align to Center

2

Step 3: Buttons (and a little :ok_hand:more text)

Select the second View in the Layer Tree and add 16 padding on the right and left to ensure the contents of the View don’t extend to the edge of the phone screen. While the View is still selected, add a Button Solid and a Button Outline inside of it. Switch back over to the Bits section and add one more Text element.

adding%20buttons

On the Button Solid change:

  • Label to “Sign Up”
  • Remove the Icon

On the Button Outline change:

  • Label to “Log In”
  • Color Override to Strong Inverse
  • Remove the Icon

On the Text element change:

  • Text to “Photo by Max Kleinen on Unsplash”
  • Text Color to Light Inverse
  • Style to Caption
  • Text Align to Center

Step 4: Flex

Now, your screen should look something like this:

We have all the content we need for our screen but the layout isn’t quite right. Luckily, this is an easy fix with flex!

On the second View , open up the Size panel and change the Height to 150. Next, open up the Alignment panel and change Justify Content to Space Between. If you’re not familiar with flex, Space Between positions the first element inside the container at the start, the last element at the end, and any other elements are spaced out evenly in between.

View widths and heights default to automatically fit the size of its contents so setting the Height to 150 gave the buttons and text some room to spread out.

Next, select the Image Background, go back to the Alignment panel, and change Justify Content to Space Around.

flex%20first%20screen

Conclusion

And that’s it! All it takes is a few steps to make a beautiful screen in Draftbit. Now it’s time to see what you can build on your own! :smile:

2 Likes

Uploading the image is not working for me. I tried in Safari, Chrome and Firefox with the same result seen in image. The action produces and upload error with the image not uploading. The image is the suggested image in Step 2 above!

Ideas? Thank you.

Hey Alain!
Sorry you’re running into this issue…
I noticed you have the ReactDevTools and Reason Tools installed, would it be possible for you to send over a screenshot of your console and network tab?
Also if you could send over your image so that I could better test it on my end.
Thanks, Sebastian.

Perfect!
It seems to be a cors issue… For clarification and to get some easy debugging out of the way.

  • Are you on an office network/ work connection?
  • You mention using different browsers, do you have any extensions such as ad Blockers or privacy filters?

Sorry for the trouble you’re having but we are working on a solution and we get one to you asap!

Non on office connection. Just tried different browsers before asking for help.

Nothing yet? You might extend the time of your trials beyond 3 days, folks.

1 Like