Auto Layout and Components
Add to favorites
Use components and auto layout, create multiple components, to maintain design consistency for your design system
Web App Design using Midjourney and Figma
Components are reusable elements that help maintain consistency and efficiency in design, while auto layout allows for dynamic resizing and alignment of objects within frames. This tutorial teaches you how to create multiple components and component sets for the icons, avatars, menu and content.
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
UI Design for Web and Desktop
Learn UI design for web and desktop apps covering patterns, colors, typography, components, auto layout, design system and Midjourney
3:14
2
UI Patterns and Wireframing
A guide on UI patterns, wireframing, and iOS design guidelines for creating web app designs using Figma
7:20
3
Colors and Gradients
Learn about using colors including the color wheel, neutral tones, gradients and the Stark plugin to verify contrast ratios
9:07
4
Fonts and Text Styles
Learn about the importance of typography in app design and how to create buttons with auto layout while maintaining consistent font styles
7:24
5
Icons and Avatars
Create an icon and avatar library, organize assets and use icon sets and plugins like SF Symbols and Unsplash for the sidebar design
6:48
6
AI Images with Midjourney
How to use Midjourney to generate images as placeholders for your designs
10:25
7
Auto Layout and Components
Use components and auto layout, create multiple components, to maintain design consistency for your design system
9:42
8
Variants and Swap Instance
Learn how to use variants, boolean, and swap instances in Figma to create efficient and organized designs
8:16
9
Interactive Components
Create 3 interactive components in Figma: segmented control, side menu, and card animation
14:30
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.
Akson Phomhome
UI Designer
Designer at Design+Code.
7 courses - 29 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
Web App Design using Midjourney and Figma
Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma
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
UI Design Android Apps in Figma
Design Android application UIs from scratch using various tricks and techniques in Figma
2 hrs
UI Design Smart Home App in Figma
Design a Smart Home app 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
