Components and Variants
Add to favorites
Reduce the number of variants in your design system by using component properties and editing them directly in the properties panel
In this section, we will explore the components that allow you to create and reuse design elements. This speeds up the design process and helps maintain consistency. We will also add layouts for the home screen and begin designing the other screens.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Browse all downloads
1
Intro to iOS Design
Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications
5:07
2
Inspirations and Wireframing
Get inspiration, learn design principles and plan the structure of the app by ceating a wireframe
8:10
3
Typography and Icons
Learn the principles of typography and how to create and use text styles, including the Resource plugin for icons
7:16
4
Onboarding Screen
Best practices for designing an effective onboarding screen to make a great first impression on users
7:56
5
Colors and Gradient
Implement a color scheme to create a beautiful and functional app that users will enjoy using
5:37
6
Login Screen
Create an effective login screen that clearly communicates to the user what they need to do to log in to the system
8:00
7
AI Illustrations with Midjourney
Generate images with AI using Midjourney Bot as placeholders for your designs
7:23
8
Components and Variants
Reduce the number of variants in your design system by using component properties and editing them directly in the properties panel
8:26
9
Realistic UI Design
Take your skills to the next level by designing a more detailed, complex, and immersive user interface.
14:24
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Sourasith Phomhome
UI Designer
Designer at Design+Code
10 courses - 31 hours
Design and Prototype Apps with Midjourney
A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools
5 hrs
iOS Design with Midjourney and Figma
Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications
1 hrs
UI Design for iOS, Android and Web in Sketch
Create a UI design from scratch using Smart Layout, Components, Prototyping in Sketch app
1 hrs
UI Design a Camera App in Figma
Design a dark, vibrant and curvy app design from scratch in Figma. Design glass icons, lens strokes and realistic buttons.
1 hrs
UI Design for iOS 16 in Sketch
A complete guide to designing for iOS 16 with videos, examples and design files
3 hrs
Prototyping in Figma
Learn the basics of prototyping in Figma by creating interactive flows from custom designs
1 hrs
UI Design Quick Websites in Figma
Learn how to design a portfolio web UI from scratch in Figma
1 hrs
UI Design Android Apps in Figma
Design Android application UIs from scratch using various tricks and techniques in Figma
2 hrs
UI Design Quick Apps in Figma
Design application UIs from scratch using various tricks and techniques in Figma
12 hrs
Figma Handbook
A comprehensive guide to the best tips and tricks in Figma
4 hrs
