![jobs-in-dubai-jlvtech](https://jlvtech.com/wp-content/uploads/2024/04/Canonical-jobs-jlvtech-80x60.webp)
![jobs-in-dubai-jlvtech](https://jlvtech.com/wp-content/uploads/2024/04/Canonical-jobs-jlvtech-80x60.webp)
Discover the exciting world of software development and design.
Design an onboarding screen for a camera photo editing app
In this course, we will design this beautiful design, a camera photo editing app from scratch in Figma. It will be exciting because we will build the complete app design.
We’re going to use a flat style with simple two-dimensional elements and glassmorphism in dark mode with vibrant neon colors.
We’ll add more depth to the buttons by adding a gradient color and playing with the inner shadow to have the illusion that there is a hole inside the button and make the icon floats.
We’re going to learn how to create the zoom controller using stroke inspired by a camera.
To make the design more unique, we’re going to create a curved layout and custom tab bar to fit with the design.
Before starting, you will need to get a copy of a UI kit. I will be using this iOS16 UI Kit by Joey Bank from the Figma Community.
This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iOS. Each component has been created with the latest version of auto-layout, supports component properties, variants, light and dark mode and much more.
We’re going to use the Noto Sans font by Google Fonts which is a collection of high-quality fonts with multiple weight and width in sans, serif, mono and other styles. Google Fonts are free to use, making beautiful types accessible to anyone for any project.
Download the SF Symbols Browser plugin for Figma. It contains over 4,000 symbols.
To follow along, you will need a copy of my Figma file. Click on the (+) to add a new page where we will be designing from scratch.
In this section, we’re going to design our first screen. We only need a beautiful image and wallpaper to make the onboarding stunning and a beautiful gradient button.
We will add our first frame for the Onboarding screen.
We will now work on the bottom part of the screen.
Let’s finish the first screen with a nice gradient button.
We have completed our Onboarding screen. In the next step, we’re going to create the fun part of the design, the mode photo and portrait.
Discover the exciting world of software development and design with our comprehensive courses in React, Swift, and other cutting-edge technologies.
No Posts Found.