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.

Akson Phomhome

UI Designer

Designer at Design+Code.

icon

10 courses - 47 hours

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

David Norris

App Developer

Author avatar

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

Author avatar

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!

Ángel Vāzquez

UI-X interaction & design

Author avatar

Ángel Vāzquez

UI-X interaction & design

I can’t thank you enough @MengTo, thank you for making the whole process so enjoyable. This is the beginning of a new era for me thanks to you I found my passion and what I want to do for the next following years. Red heart

Fabio Sasso

Founder of ABDZ

Author avatar

Fabio Sasso

Founder of ABDZ

My first iOS app is available on the AppStore. I literally didn’t know anything about SwiftUI (still not much) and in probably 4 weeks was able to recreate my android app for iOS. Highly recommend MengTo videos!

Csaba Kissi

Full stack developer

I've seen the new site yesterday and that's one of the nicest designs I've ever seen man! Very good job. Also, courses + tutorials are really PRO quality.

Felipe Elioenay

Independent Designer

So far the best "online course" I've ever purchased. It's like a modern degree in Digital Design. Can't believe I'm finishing my first React App :D

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.