[VIP] DesignCode: Web App Design using Midjourney and Figma

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

UI Patterns and Wireframing

A guide on UI patterns, wireframing, and iOS design guidelines for creating web app designs using Figma

Colors and Gradients

Learn about using colors including the color wheel, neutral tones, gradients and the Stark plugin to verify contrast ratios

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

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

AI Images with Midjourney

How to use Midjourney to generate images as placeholders for your designs

Auto Layout and Components

Use components and auto layout, create multiple components, to maintain design consistency for your design system

Variants and Swap Instance

Learn how to use variants, boolean, and swap instances in Figma to create efficient and organized designs

Interactive Components

Create 3 interactive components in Figma: segmented control, side menu, and card animation

Prototyping

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

Design Video Page

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

Design Channel Page

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