Design+Code logo

Quick links

No results found

Suggested search

In modern design, icons play a vital role in conveying both function and emotion. They are widely used in UI design, branding, and marketing materials to create a consistent user experience and add visual interest. This tutorial covers creating an icon and avatar library, as well as organizing assets for a streamlined workflow. You will receive step-by-step instructions for using various icon sets and plugins such as SF Symbols and Unsplash. Additionally, you will learn how to apply these icons to the sidebar design.

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

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

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

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.

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.