Interactive Components
Add to favorites
Create 3 interactive components in Figma: segmented control, side menu, and card animation
Web App Design using Midjourney and Figma
This document provides a tutorial on how to create an interactive button animation prototype using Figma. The tutorial covers steps such as creating a clear idea of the intended animation, adding masks and logos, and creating variants and component sets. The document also includes a demo of the final product and tips for creating optimal outcomes.
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.
Design template
Source code for all sections
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
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.
7 courses - 29 hours
Design and Prototype Apps with Midjourney
A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools
5 hrs
Web App Design using Midjourney and Figma
Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma
1 hrs
UI Design for iOS 16 in Sketch
A complete guide to designing for iOS 16 with videos, examples and design files
3 hrs
UI Design Android Apps in Figma
Design Android application UIs from scratch using various tricks and techniques in Figma
2 hrs
UI Design Smart Home App in Figma
Design a Smart Home app from scratch using various tricks and techniques in Figma
2 hrs
UI Design Quick Apps in Figma
Design application UIs from scratch using various tricks and techniques in Figma
12 hrs
Figma Handbook
A comprehensive guide to the best tips and tricks in Figma
4 hrs
