Using Example Screens and Themes

Example Screens & Themes

In this tour, we'll show you where to find Example Screens and how to further customize your app by modifying or creating Themes.

Before you start, make sure you have Live Preview open on your phone. You can launch Live Preview by clicking the ‚Ė∂ÔłŹ button at the top of the Builder.

Add the Email & Password Login example screen to your app:

  • Click 'Screens' from the left-hand column
  • Click the¬†+¬†to open the¬†Add a Screen¬†gallery.
  • Add the¬†Email & Password Login¬†screen to your app (in the middle of the 2nd row), then close the gallery popup.

Go to your new Email & Password Login screen:

  • Click¬†Screens
  • Select the¬†Email & Password Login¬†row

Change the default Theme of your screen:

  • Click 'Themes'
  • Observe that the screen is set to the default¬†Draftbit¬†theme
  • Select the¬†Yummy¬†theme card and observe your screen UI update automatically

To create your own theme:

  • Click '+' on the Themes drawer to launch the New Theme popup
  • Give your new theme a name

Next, edit your new theme's setting. New themes have system settings by default.

Don't forget to save when you're done!


You've made your first theme in Draftbit!


You can continue editing your new Theme by clicking the ✎ Pencil icon on its Theme card.

Need more help with creating and editing themes? Connect with us in the¬†Draftbit Community‚ÜóÔłŹ

In the next Tour, we'll show you how to create interactions in your app using Navigation.