Free assets
Design an App with Figma | The Ultimate Guide
Designing an app can be a hard task. There are so many things to consider, from the layout and user experience to the colors and fonts.
But don't worry, we're here to help! In this tutorial, we will show you how to use Figma to create a beautiful and user-friendly app design.
We'll walk you through each step of the process, from setting up your project file to adding text and images.
There are so many screens on an app but today we gonna design an Onboarding Screen.
Let's get started!
What Is App Design
Mobile app design bound both the user interface (UI) and user experience (UX). Designers are in charge of making sure that the app looks nice, while developers work on its functionality.
As a designer, you will be responsible for the overall look and feel of the app, including its color scheme, font selection, and different widgets that people can use to interact with it.
This means that you have to keep things simple so as not to lose your users along the way. Where do you start? In the beginning.
Read:- Top 10 Mobile App Design Courses For Beginners.
1. Open Up Your Figma File and Create The Frame For Your App Screen
First things first, let’s open the same Figma file. Then hit F to select the Frame tool, and pick iPhone X from the options on the right of your design view. Then let’s change the background color for this screen.
With that Frame selected, look over to the Inspector on the right of your Figma window. Click the white square under where it says “Background”, and choose a color.
We went with #FFFFFF which is a shade of blue found in the bottom left corner of Figma’s default color swatches.
2. Create A Shape
Then click “R” to the active rectangular tool. Hold the left click of your mouse then make the rectangular the same size as your frame.
You also can resize the rectangle from the top right side of the Figma app where you can manage the W & H to resize your rectangle
3. Place The Image
To place an image you need to select the shape tool first then select the place image option or click “Ctrl+Shift+K”.
Then browse your image from your computer. Then click on the rectangular to past the image.
4. Type Your Text
By clicking “T” you can activate the text tool. Then you can type whatever you want to. As for now, I am typing “Welcome To Aura”.
Then you can customize the text size, font, and colors from the right side. In this tutorial, we are using the “Outfit” font on the Semibold family. Also, we used 30px font sizes and #0A0B0D colors on the text.
5. Subtext
Now let's type some subtext. You can write whatever you want but for now, we gonna type “We Are Preparing Something Great For You!”.
Now you can customize the text from the right size like the Heading Text. We are using the “Poppins” font in a regular family. The text size is 14px and the color code is #8C8994.
6. Alignments
Now we gonna make sure the text is aligned properly, for that we gonna select both texts by using the “Shift” key. Then go to the top right and click on middle align, to align your text perfectly.
7. Button With Icon
Now let’s make the button. For that press “R” again. Then make a rectangular. Then make it (W 156) & (H 52).
Now go to the color section and make it white (#FFFFFF). After that go to Corner Radius on the top right of the app and increase the radios to 20.
Now you have to find some icons for the button. You can visit here to download free icons. Then download and paste the icon on Figma.
After pasting the icon reduce the size of your icon and fit it into the shape like the image down below.
Then use the Type tool and type “Google” to make the text size 12px with the ‘Poppins” font on Medium Family. Change the color of the font to #071731.
Now select the icon, text & shape then click “Ctrl+G” to make a group of the button. Then press “Ctrl+D” to duplicate the button, and change the second button icon and text.
8. Simple Button
Now let's make another long button. For that press “R” again and make another rectangular (W 335) & (H 50).
Now go to the color section again and make it white (#FFFFFF). Now increase the radius to 100 from the top left of the app.
Now press “T” to the active type tool and type “Continue with email” and change the color to #0A0B0D.
Make sure the font is “Outfit” 14px on Medium. Now select the shape and text and make it middle align like before. Now press “Ctrl+G” to make the group.
9. Another Subtext
Now let us make another subtext. Press the “T” again to the active type tool and type “Don’t have an account? Sign Up”.
Change the font size to 14px and make it “Outfit” on the regular family. Now we gonna use a two-color on this text.
For that, we need to select the half text first, “Don’t have an account?” select this text and change the text color to #676D7B then select another half of the text “Sign Up” and change the color to #4877EF.
10. Final Alignments
Now we need to make sure our text & buttons are aligned properly. For that, you need to select all the growth of your design.
Now press “Alt” and hover on the frame. You can see the pixels of your design elements. Make sure your all elements are in the middle like on the image. Then from the top make it 100.
Hurray! The Design Is Complete
Congratulations! You complete the design properly and you have done a really good job. Here is the Final Design We make. The full design link is here.
Note: Don’t Worry About saving design. Figma will autosave your design. If you want to export the design select the frame and click on the export button from the bottom right of the app.
Hopefully, you liked our tutorial. Feel free to share your opinion with us and let us know on which screen we should make another blog.
Thank You For Your Time.
More For You:
◾ To 10 Mobile App Design Courses For Beginners.
◾ 10 Best Mobile App Design Tools in 2023.
