How to design a mobile app in Lunacy?

Add a mobile app project to your portfolio and get familiar with all the basic features of Lunacy. A step-by-step tutorial for beginners. Repeat and learn.

Throughout this tutorial, we’ll create five basic views of an e-learning app with all the essential UI elements used in all types of mobile apps. You’ll learn how to work with components, color variables, styles, and other time-saving things in Lunacy. And here is what your design will look like when you get to the end.

We’ll start with creating an onboarding view and a sign up form. You’ll work with shapes, create styles and color variables.

Create a new document.
Create an artboard. Enable the Artboard tool (A) and simply click over the canvas to use the default iPhone 13 preset. Or select any other preset from the list.

Create a rectangle with the following settings: size 390*360px, fill #BABFFF, and corner radius 20px for lower corners.
Create a color variable through the Color Picker. Lunacy will automatically generate the variable’s name, but you can change anytime.

Add the status bar from the UI kits. Go to Apple iOS UI kit > Bars > Status bar > iPhone > Light and drag the bar component onto the canvas.

Switch to the Illustrations tab and place an illustration over the blue rectangle. I used illustrations from the Casual life 3D pack.

Enable the Text tool (T) and add a text block below the rectangle. I used the following text settings: Inter Bold, size 28, color #17232D. Create the second color variable (Shark).

Create the first text style to re-use these text settings later and give it a name. For example, H1 28 Bold, where

H1 is the level 1 heading in our design
28 is the font size
Bold is the font weight.

Add another text block below: Inter Regular, size 14, color variable Shark.
And create the second text style with the name Paragraph 14 Regular.

Now, let’s create a current page indicator.
For this, we’ll use two ellipses and a rounded rectangle. Create the first ellipse with the following settings: size 8*8 px, color #CFD3D6. Save the color as a color variable (Iron).

Create a rounded rectangle with the following settings: size 23*8 px, corner radius 5, color #53DF7D, color variable Pastel Green.
Duplicate the first ellipse.

Now, we’ll create a button. Add a rectangle with the following settings: size 344*50 px, corner radius 12, color variable Pastel Green.

With the rectangle selected, enable the Text tool (T). The text block automatically groups with the rectangle and aligns with the center of the shape. The text settings are as follows: Inter Medium, size 18, color #FFFFFF. Create one more color variable (White).

The first view is ready.
Let’s create another one. Add a new artboard.

Add a rectangle: size 390*360px, fill #ABFFEB, and corner radius 20px for lower corners. Or simply copy the rectangle from the first artboard and recolor it. Create a new color variable (Ice Cold).

Don’t forget to add the status bar.

Add another illustration from the Illustrations tab and place it over the rectangle. I used an illustration from the same Casual life 3D pack.

Create a text block under the rectangle. Apply the H1 28 Bold text style to it.

Create a rectangle with the following settings: size 344*50 px, corner radius 8. Add a border with color variable Iron, and delete the main fill.

Add a text block with the Paragraph 14 Regular text style and generate an email address using the Generate Text tool in text settings. An input field is ready.