Welcome to the ultimate journey in mastering web and mobile design with Master Web & Mobile Design: Figma, UI/UX Essentials, +More! If you are a newcomer to this field or if you want to improve yourself to a certain level, you’ll be able to become a professional in this exciting area of UX design here.
Building on the basics, you will explore how users’ requirements can be met, the process of building wireframes, and typography and color theory. Here, you will find comprehensive walkthroughs on how to develop custom components, discover how micro-interactions and animations work, and make your projects truly interactive.
But this course, "Master Web & Mobile Design: Figma, UI/UX Essentials, +More, passes through the application. The Hue application offers you over 100 assets and premium design templates, so you will have all the tools you need to create stunning projects. It starts with maintaining a positive relationship with the team members through effective communication to triaging files ready for developers, you’ll be ready to solve real life design problems.
Master Web & Mobile Design: Figma, UI/UX Essentials, +More Table of Contents:
- Section 1 GETTING STARTED
- Frames & Design file in Figma Design(Interface)
- UI vs. UX in Figma Design Magic Explained
- Build Apps & Websites You'll Love (In This Figma Course)
- Figma to Code Design Stunning Interfaces Without Writing a Line
- Learn UX Briefs & Task Flows in Figma
- Section 2: Wireframing: Fundamentals and Best Practices
- Lo-Fi vs Hi-Fi Wireframes Design Showdown
- Section 3: Mastering Typography, Color, and Icons
- Figma Text Tool and Fonts
- Figma Basics: How To CREATE And MODIFY SHAPES
- How to Choose and Use Colors in Figma
- Strokes & updating default properties in Figma
- What is Object Editing Mode & How to Use It? In Figma
- How to Use The Scale Tool And Selection in Figma
- Figma groups and frames for better UI designs
- Best Free Icon Set Packs for UIUX Designers
- Icon Basics In Figma
- How To Install And Use Plugins in Figma
- Section 4: Creating Pages in Figma
- How To Create And Use Pages In Your Figma File
- Section 5: Introduction to Prototyping in Figma: A Beginner's Guide
- Figma Prototyping for Beginners
- Figma Prototyping & Transitions (Easing)
- Figma Testing Prototype with Figma Mirror
- Section 6: Figma Animation Basics
- Figma Smart Animate for Beginners
- Section 7: Collaborate with Others: Sharing, Commenting, and Editing in Figma
- Section 8: The Ultimate Guide to Creating Moodboards in Figma
- What Are Mood Boards & The SECRET To Finding Inspiration For Web & App Design
- How To Create A Mood Board In Figma
- Section 9: Mastering Columns & Grids in Figma
- Create a Responsive Grid System for Web & UI Design
- Figma: Essential Tips and Tricks
- Section 10: The Ultimate Guide to Using Colors in Figma
- How to Choose Colors (Color Inspiration)
- How I Make UI Color Palettes In Figma
- How To Create Gradients in Figma
- Creating a Color System in Figma
- The easiest way to generate a colour palette in Figma (Using Plugins)
- Section 11: Mastering Text and Fonts in Figma
- Best Practices for Choosing Fonts and Font Pairing in UI and Web Design
- Create the Perfect Typography Scale for UI & Web Projects
- The fastest way to create text styles in Figma
- How to add lorem ipsum text in Figma
- Useful Text Tips & Tricks in Figma
- How to add fonts in Figma and How TO Add missing fonts in Figma
- Section 12: Figma's Drawing Tools
- Figma Pen Tool Basics & Vector Networks
- Why are the Apple icons different (corner smoothing)
- Section 13: Figma Essentials: Working with Boolean Operations
- Figma Boolean Operations (Union, Subtract, Intersect, Exclude)
- Figma's Power Duo: When to Use Union and When to Flatten
- How to Use Smart Selection and Tidy Up in Figma
- Section 14: Figma Essentials: Working with Images and Assets
- Placing images in Figma
- Figma Masks (Mask Image and Text in Figma)
- Figma images Plugins for UIUX Designers
- Section 15: Figma Essentials: Mastering Auto Layout and Constraints
- Auto Layout And Constraints In Figma
- Figma Auto Layout Space Between Objects
- Figma Constraints & Resizing Made SIMPLE
- Nest Frames, Auto Layout, And Constraints In Figma
- Advanced Auto Layout Techniques - Figma
- Section 16: Figma Essentials: Working with Effects
- How to Make Beautiful Shadows - UI Design with Figma
- How to Create Background Blur and Layer Blur in Figma
- Section 17: Figma Essentials: Understanding Saving and Version History
- How To Save Your Figma Files To Desktop and How To Access Figma File's History
- Section 18: Figma Essentials: Understanding Components and Creating Instances
- Figma Components - The Basics
- Update, Change, Edit, And Reset Components In Figma
- Deleting the main components in Figma is impossible (Tips & Tricks of components)
- Moving main components and how to Organize Your Components
- Figma Best Practices Name Layers & Stay Organized
- Section 19: Figma Essentials: Exploring the Power of Variants
- Figma components and variants for beginners
- Figma Component properties
- Section 20: Figma Essentials: Mastering Input Form Design and Functionality
- How to Design an Interactive Input Field in Figma
- How to design a Notification UI design in Figma
- Section 21: Advanced Prototyping Techniques in Figma
- How to Add Popup Overlays in Figma
- How To Create a TOOLTIP (Hover to Show Text) Component in Figma
- How to Create Multiple Prototypes & Create Separate Flows on One Figma Page.
- Prototyping overlay transitions in Figma
- ticky Scroll In Figma
- How to Create Auto Scrolling Animation in Figma
- Section 22: Figma Essentials: Working with Teams and Project Management
- The difference between Teams, Projects and Pages
- Section 23: Figma Essentials: Understanding and Using Libraries
- Figma Create a shareable team library
- Section 24: Animation and Micro Interactions in Figma
- Animation VS Micro Interaction In Figma
- Amazing Button Animations in Figma
- Micro animations using interactive components in Figma
- Figma Prototype easing & spring animations
- Pulsing animation in Figma
- Section 25: Figma Thumbnails
- How do I set a project thumbnail or cover in Figma?
- Section 26: Master Figma Export: A Step-by-Step Guide
- How to Export Your Figma Design as an Image (PNG, JPG, SVG, PDF)
- How to Hand-off your UX designs like a PRO
- Introduction to design systems resources and inspirations
- Section 27: Let's Build Real-World UIUX Project
- Intro - Real-world projects With Figma
- Real World UIUX Project 2 StayWave
- Real World UIUX Project 3 Food Delivery App
- Real World UIUX Project 4 Music App
- Real World UIUX Project 5 DIY
Who is this course for?
- Ideal for beginners, those who decide to change careers, or lovely people who love design but don’t have any background in that field, this course wakes up your Figma and gives you base UX knowledge to start.
Click on the links below to Download Master Web & Mobile Design: Figma, UI/UX Essentials, +More!
در حال پاسخ به :