Design+Code logo

Quick links

No results found

Suggested search

Web App Design using Midjourney and Figma

12 sections - 2 hours of video

icon

Add to favorites

icon

Notify me

Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma

Instructor avatar

Taught by Akson Phomhome

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

12 topics

All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.

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

10

Prototyping

Explore prototype animation in Figma: segmented control, dropdown menu, video integration and scrolling with interactive components

11:57

11

Design Video Page

Elevating the video page: enhancing visuals, controls, and engagement

26:51

12

Design Channel Page

Redesigning the channel page: revamping segmented control and creating visually stunning subscriber avatars

21:42

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

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

300+ hours of video

Subtitles in English, Chinese

Subtitles in English, Chinese

Source files, ePub

Source files, ePub

UI, icons, illustrations

UI, icons, illustrations

Premium, support chat

Premium, support chat

Source files

Source files

Design templates and source code files are included to help you learn.

ePub files

ePub files

Read offline using Books for iOS, Mac or other apps that can read this format.

Video files

Video files

Download the videos so that you can watch later or offline using any video player.

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.

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.

Pass the test
Get the certificate.

Test your knowledge of Web App Design using Midjourney and Figma. Complete the course and get perfect results for this test to get your certificate.

Web App Design using Midjourney and Figma: Question 1 out of 20

Why is good design considered crucial for a web app's success?

Stories

How students learned from our courses

See what people have learned and built by taking courses from Design+Code

Anthony Collurafici

Designer

Author avatar

Anthony Collurafici

Designer

Simple Ratio is Live! After years of designing apps, I can finally say I built my own. Big thanks to Meng To for getting me started with SwiftUI.

Artem Adams

Artchitect at IBM

Author avatar

Artem Adams

Artchitect at IBM

Learned a lot from your course to port my app from #AppleWatch to #iPhone, #iPad and #Mac. All SwiftUI, one code base, iCloud, learn words with Widgets.

Mogens Egeskov

iOS Developer

Author avatar

Mogens Egeskov

iOS Developer

After months of hard work i'm excited to share my new app "Read" which helps you reach your yearly book goal by telling you how many pages or percent to read daily. You can time your read.

Jiani Li

UI/UX Designer/Developer

Author avatar

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.

Dusan Veljovic

Co-founder of HighlightsCrew

This is amazing what you did. It opens up a whole new world with things that you can learn and develop. Pricing is very affordable and the quality of the website and tutorials are so neat! Keep up with a good work!

Liu Yi

Founder at Price Tag

Thanks to Design+Code, I improved my design skill and learned to do animations for my app Price Tag, a top news app in China.

Trusted by teams

110,000 people

Many startups look for designers who code and developers who design. They use our courses to help train new hires and expand skill sets.