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 - 45 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

Christiano Mere

Designer

Author avatar

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

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.

Haawa

iOS Developer

Author avatar

Haawa

iOS Developer

Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for the design lessons and many controls and animation that I used from you SwiftUI course. Man bowing deeply.

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!

Cyril Zakka

iOS Developer

I don’t know if you remember but I bought your first book a little less than 4 years ago. You started me on my path to code and design. Now I do iOS development and have also moved on to AI and deep learning. So thank you for that!

Jean-Marc Denis

Product Designer at Facebook

Design+Code is a wake-up call. Why should I learn a web based technology or a deprecated tool when the obvious choice is to learn Xcode?

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.