UI Design Quick Apps in Figma
50 sections - 12 hours of video
Add to favorites
Notify me
Design application UIs from scratch using various tricks and techniques in Figma
Taught by Sourasith Phomhome
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
50 topics
All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.
1
Getting Started with UI Design
Design your first iOS app using the best practices in UI design
22:33
2
Food App UI Design
Learn how to design simple screens for a food app in the Figma design tool
10:43
3
Meditation App Glassmorphism UI Design
Learn how to design onboarding screens for your first app
15:18
4
Bitcoin App Glassmorphism UI Design
Create a user interface of a crypto app from scratch by combining Neomorphism and Glassmorphism
46:06
5
Dark UI Design
Learn how to design dark UI design in the Figma design tool
13:30
6
Glassmorphism, Components and Design System
Meditation app part 2 with Explore Screen and design system
19:45
7
Soft UI Design
Learn how to create a beautiful user interface from scratch using soft drop shadows, inner shadows and vibrant colors
16:35
8
Dark Mode NFT app Part 1 - Card with blurred background
Learn to design an NFT marketplace app by combining overlays with the Glassmorphism style
9:45
9
Dark Mode NFT app Part 2 - Cards with outline
Learn to create a card with a blurred background using an overlay outline
8:13
10
Dark Mode NFT app Part 3 - TabBar
Learn how to create a custom tab bar using overlay glassmorphism
7:43
11
Dark Mode NFT app Part 4 - Segmented Control
Learn how to create segmented controls and buttons with glassmorphism style
11:59
12
Dark Mode NFT app Part 5 - List
Learn how to design a list with rows
7:56
13
Neon UI Design Part 1 - Screen 1
Learn how to create a lighting and glowing user interface from scratch using neon style
11:53
14
Neon UI Design Part 2 - Screen 2
Learn how to create a lighting and glowing user interface from scratch using neon style
16:42
15
Neon UI Design Part 3 - Screen 3
Learn how to create a lighting and glowing user interface from scratch using neon style
19:24
16
Dark Neumorphism Tesla app Part 1 - Neumorphic Button
Learn to design a Dark Neumorphism button effect
8:41
17
Dark Neumorphism Tesla app Part 2 - Nav bar
Learn to create navigation bar and use remove background trick to get png image
9:22
18
Dark Neumorphism Tesla app Part 3 - Control Menu & Table view
Learn how to create Control menu and table view using auto-layout frame
12:36
19
Dark Neumorphism Tesla app Part 4 - Tab bar
Learn how to create a custom tab bar with the curve and neon light effect
8:33
20
Dark Neumorphism Tesla app Part 5 - Temperature Progress bar
Learn how to create temperature progress bar using ellipse tool and arc tool.
8:49
21
Dark Neumorphism Tesla app Part 6 - Temperature Slider
Learn how to create temperature bar
8:42
22
Dark Neumorphism Tesla app Part 7 - Control setting with background blur
Learn how to create the control setting with background blur
6:37
23
Dark Neumorphism Tesla app Part 8 - Battery with neon light effect
Learn how to create battery control with neon light effect
11:13
24
Dark Neumorphism Tesla app Part 9 - Dropdown table row
Learn how to create a drop down table row
11:21
25
Social Media App Part 1 - Profile Screen
Learn how to create a social media app design, we will start the profile screen
13:26
26
Social Media App Part 2 - Home Screen
Learn how to create a social media app design by desigining the home screen
17:09
27
Social Media App Part 3 - Chat Screen
Learn how to create a social media app design by designing the chat screen
11:38
28
Weather App Part 1 - Bottom sheets
Learn how to create a modal bottom sheets with glassmorphism
16:52
29
Weather App Part 2 - TabBar
Learn how to create a custom tab bar
11:49
30
Weather App Part 3 - Weather Widget
Learn how to create a weather widget
8:59
31
Map app Part 1 - Custom Nav Bar with 3D Effect
Learn how to create 3d triangle buttons with custom shape,background with blur and navigation description
12:06
32
Map app Part 2 - Map and Navigation Detail
Learn how to create the navigation system
9:27
33
Map app Part 3 - Mileage Chart
Learn how to create a mileage chart status
9:22
34
Map app Part 4 - Map List and Tab Bar
Learn how to create a map list and custom tab bar with neon light effect
15:41
35
Movie Ticket Booking App Part 1 - Reservation Screen
Learn how to design a movie ticket booking app by starting with the reservation screen
16:38
36
Movie Ticket Booking App Part 2 - Seats Screen
Learn how to design our seats screen for our movie ticket booking app
20:38
37
Movie Ticket Booking App Part 3 - Tickets Screen
Learn how to design our tickets screen for our movie ticket booking app
20:01
38
Wallet App Part 1 - Transactions Screen
Learn how to design a wallet app by starting with the transactions screen
21:36
39
Wallet App Part 2 - Cards Screen
Learn how to design a wallet app by designing a cards screen
17:12
40
Wallet App Part 3 - Statistics Screen
Learn how to design a wallet app by designing a statistics screen
14:09
41
Bike Shopping App Part 1 - Discover Screen
Learn how to design a bike shopping app design with neumorphism style and matte effect
13:27
42
Bike Shopping App Part 2 - Detail Screen
Design the detail screen for our bike shopping app
8:14
43
Bike Shopping App Part 3 - Cart Screen
Design the cart screen for our bike shopping app
9:41
44
Cab Booking App Part 1 - Chosen Ride Screen
Learn how to design a cab booking app using the neumorphism style
18:33
45
Cab Booking App Part 2 - Destination Screen
Design a destination screen for our cab booking app
14:36
46
Cab Booking App Part 3 - Driver Screen
Design a driver screen for our cab booking app
8:29
47
Flight Booking App Part 1 - Homepage
Learn how to design the homepage for a flight booking app
16:28
48
Flight Booking App Part 2 - Book Your Flight
Learn how to design a booking section for a flight booking app
11:57
49
Flight Booking App Part 3 - Select Your Flight
Learn how to design the selecting flight section for a flight booking app
10:29
50
Flight Booking App Part 4 - Boarding Pass
Learn how to design a boarding pass for a flight booking app
13:06
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
What's included?
All courses come with downloadable files to help you design, code and follow the course offline.
300+ hours of video
Subtitles in English, Chinese
Source files, ePub
UI, icons, illustrations
Premium, support chat
Source files
Design templates and source code files are included to help you learn.
ePub files
Read offline using Books for iOS, Mac or other apps that can read this format.
Video files
Download the videos so that you can watch later or offline using any video player.
Meet the instructors
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
16 courses - 58 hours
Build a React Native app with Claude AI
This comprehensive course explores the integration of cutting-edge AI tools into the React Native development workflow, revolutionizing the approach to mobile application creation. Participants will learn to leverage AI-powered platforms such as Claude and Locofy to expedite coding processes, enhance problem-solving capabilities, and optimize productivity.
6 hrs
Design and Prototype for iOS 18
Design and Prototype for iOS 18 is an immersive course that equips you with the skills to create stunning, user-friendly mobile applications. From mastering Figma to understanding iOS 18's latest design principles, you'll learn to craft two real-world apps - a Car Control interface and an AI assistant.
3 hrs
Master Responsive Layouts in Figma
Creating responsive layouts is a must-have skill for any UI/UX designer. With so many different devices and screen sizes, designing interfaces that look great and work well on all platforms is necessary. Mastering this skill will make you stand out in the field. In this course, we'll start from scratch to create this beautiful design using Figma. You'll learn how to make layouts that are easy to use and work well on any device. We'll cover key concepts and tools to help you master responsive design in Figma.
2 hrs
UI UX Design with Mobbin and Figma
Mobbin is a powerful tool for UI/UX designers seeking inspiration and innovative design solutions. This platform offers a vast collection of real-world mobile app designs, providing a treasure trove of UI elements and layouts.
2 hrs
3D UI Interactive Web Design with Spline
Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites
3 hrs
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
8 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
6 hrs
Akson Phomhome
UI Designer
Designer at Design+Code.
12 courses - 55 hours
Build a SwiftUI app with Claude AI
This comprehensive SwiftUI course combines cutting-edge AI assistance with hands-on development, guiding you through the process of transforming Figma designs into fully functional iOS applications. Leveraging Claude 3.5 Sonnet, you'll learn to efficiently generate and refine SwiftUI code, create reusable components, and implement advanced features like animations and responsive layouts.
5 hrs
Prototype and Code iOS apps in Figma and SwiftUI
Welcome to our course on designing a sleek wallet interface with Figma! You’ll learn to create a visually appealing and functional wallet interface using DesignCode and Apple UI Kits. Master prototyping, swipe gestures, carousel animations, overlays, and reusable components. Plus, explore a Figma plugin to easily transition from design to SwiftUI. By the end, you’ll create dynamic, user-friendly prototypes.
3 hrs
Create 3D UI for iOS and visionOS in Spline
Comprehensive 3D Design Course: From Basics to Advanced Techniques for iOS and visionOS using SwiftUI
3 hrs
3D UI Interactive Web Design with Spline
Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites
3 hrs
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
8 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
6 hrs
Flutter
Certificate
Figma
Certificate
SwiftUI
Certificate
UI Design
Certificate
Create a profile
Get certificates
After passing a test, we’ll award you with an online certificate. You can add them to your profile after completing the courses.
Stories
How students learned from our courses
See what people have learned and built by taking courses from Design+Code
David Norris
App Developer
David Norris
App Developer
Big thanks to you and your DesignCode team. A big help to me. Learning design is just as important as the code that drives it. Built @getNebulaApp, using the SwiftUI courses. Essential for learning iOS and macOS app dev.
Mike Ekkel
Frontend Engineer at Bynder
Mike Ekkel
Frontend Engineer at Bynder
What I really like about @MengTo's SwiftUI course is how he introduces you to awesome use cases for so many of the view modifiers. While this scroll animation is straight from the course, you can imagine all the cool things you could do with it!
Jiani Li
UI/UX Designer/Developer
Jiani Li
UI/UX Designer/Developer
Bucket is now live in @AppAirport! Thanks to @designcodeio by @MengTo, I was able to learn #SwiftUI and built the app in 2 months.
Christiano Mere
Designer
Christiano Mere
Designer
My studies of swiftUI with a little help and inspirations of @designcodeio and @MengTo. Thanks for the today's live. Illustrations by @FireartStudio
Manuel Sainsily
Senior UI/UX Designer at IBM
As an old developer, I bought the first version of design+code on its release date, and 1 month after... I literally quit my company. It was such an eye-opener and interactive/comprehensive book, I couldn’t continue to work as before and had an urge for disruption and reinvention. Thanks for being a true lever for my personal career.
Kenny Chen
UX Designer at Google
I found and bought Design+Code by Meng To which takes you through each step of the process from design to code to app store submission.
