Design System
Add to favorites
Learn how to create a simple design system for colors and text styles
In this series, we are going to learn how to create a smart home app from scratch in Figma. We will create a top navigation with icon and avatar, a weather widget and segmented controls. Let’s begin by creating a simple design system for color and text styles.
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
Design System
Learn how to create a simple design system for colors and text styles
17:05
2
Top Navigation
Build the top navigation of the app
15:34
3
Segmented Control
Learn how to create segmented controls
15:06
4
Custom Tab Bar
Learn how to create a custom tab bar
13:45
5
Thermostat Control
Design a thermostat control
16:10
6
Dropdown Button and Cards
Learn how to create a dropdown button
7:44
7
Active and Inactive Buttons
Learn how to create a button with 2 different states
7:43
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.
8 courses - 38 hours
Design and Prototype for iOS 17 in Figma
Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.
6 hrs
Design and Prototype Apps with Midjourney
A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools
7 hrs
Web App Design using Midjourney and Figma
Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma
2 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
