Figma UI UX Design Essentials
The course starts by introducing you to Figma, explaining what it is and how it differs from coding.
You’ll learn the distinction between UI and UX design within Figma.
Right away, you’ll dive into a class project to create your own design brief.
Next, you’ll explore wireframing and low-fidelity designs in Figma.
You’ll learn about frames, the basics of typography, colors, icons, and how to work with shapes like rectangles and circles.
Through hands-on projects, you’ll practice wireframing and working with icons.
As you progress, you’ll dive deeper into typography, learning about font pairing, sizing, and creating custom text styles.
You’ll also learn advanced techniques like drawing shapes, using Boolean operations like Union and Subtract, and working with images and masking.
The course covers crucial UI design concepts like layout techniques using columns and grids, as well as auto-layout and constraints for responsive designs.
You’ll explore effects like drop shadows, blurs, and even create neumorphic UI buttons.
Moving on, you’ll learn about components, variants, and how to create complex forms using these features.
This leads into more advanced prototyping techniques like overlays, tooltips, and mobile navigation menus.
The course also touches on animation and micro-interactions, teaching you how to add custom easing and transitions.
You’ll even learn how to create interactive components like toggle switches and burger menu animations.
Finally, you’ll learn how to export your designs, collaborate with developers during the handoff process, and explore what comes next after this course, like design systems.
Throughout the course, you’ll work on practical projects that reinforce the concepts, ensuring you gain hands-on experience with Figma’s powerful UI/UX design capabilities.
Complete Web Design: from Figma to Webflow to Freelancing
You’ll start by mastering the secrets of good design principles like layout, typography, color theory, and using photos effectively.
The course dives deep into visual hierarchy, alignment grids, typeface personalities, sampling colors, image overlays and cropping techniques.
You’ll even learn six design tricks every designer should know, such as contrast, white space, and creating tension.
Once you’ve nailed the design fundamentals, it’s time to practice like an artist.
You’ll mimic designs from pros, create mood boards for inspiration, and design your first beautiful web page - a chat app homepage.
This hands-on approach ensures you internalize the concepts.
The real fun begins when you transition to Webflow for web development.
You’ll learn how web pages work under the hood with HTML, CSS, and the box model.
Step-by-step, you’ll build the chat app page, mastering elements like navbars, buttons, images, flexbox, and interactions.
Responsive design is key, so you’ll optimize the site for all devices.
You’ll tackle an end-to-end client project - from design brief and wireframes to a fully functional, dynamic website with a blog and CMS integration.
This real-world experience is invaluable.
The course even prepares you for freelancing with a free portfolio website, tips on finding gigs online and in-person, pricing strategies, proposal templates, and a whopping 28 tips to win on Upwork.
You’ll be equipped to start making money right away!
With advanced topics like custom modals, code embeds, and Photoshop techniques like unboxing and stretch crops, this course leaves no stone unturned.
Learn Figma - UI/UX Design Essential Training
You’ll start by getting familiar with Figma’s interface, tools, and features.
The course explains what Figma is, its advantages (like real-time collaboration), and how to access it.
You’ll learn about the different panels, canvas, shortcuts, and version history.
Next, you’ll set up a new project, import files from other tools like Sketch, and work with teams and templates.
This prepares you for the hands-on design work.
The core of the course focuses on adding and editing content in Figma.
You’ll learn to work with frames, shapes, icons, text, images, colors, styles, and components.
Importantly, you’ll dive into responsive design using constraints.
With these skills, you’ll complete the design of a recipe mobile app, including a slide-out menu, overlays, comments section, and multiple artboard states.
You can make it your own with unique styling.
Finally, you’ll learn to create an interactive prototype, view it on a mobile device, share your design for feedback, and export assets for development.
Throughout, you’ll use Figma’s powerful version control, real-time collaboration, and cloud capabilities.
Motion Design with Figma: Animations, Motion Graphics, UX/UI
You’ll kick things off by understanding why motion is crucial in design, dispelling common misconceptions and learning how it enhances usability and creates engaging user experiences.
The course then dives into the fundamentals of Figma - covering everything from the interface and tools to designing responsive layouts using auto layout.
Once you’ve grasped the basics, you’ll explore Figma’s powerful Smart Animate feature through hands-on exercises like creating parallax effects, new message animations, and interactive buttons.
This section culminates in building a photo inspiration app, putting your new skills into practice.
The course dedicates an entire module to motion design principles such as easing, transformation, masking, and parallax.
You’ll learn techniques to add depth and dimensionality to your designs through dolly and zoom effects.
The real fun begins when you start creating motion in Figma!
Through a series of exercises, you’ll master navigation transitions, scrolling interactions, paging carousels, dragging elements, and crafting delightful microinteractions like file uploaders and like buttons.
You’ll learn the entire motion design process - from discovery and research to prototyping and testing.
The syllabus includes projects like building a National Geographic carousel with complex parallax effects and a smart home app with toggle and temperature adjustment interactions.
Other highlights include adding motion to form elements, creating order progress animations for a food delivery app, and learning how to showcase your work using screen recording tools like Kap and Screenity.
Complete Figma Megacourse: UI/UX Design Beginner to Expert
You’ll start with an introduction to user interfaces, user research, and design principles.
This lays the foundation for understanding user needs and creating intuitive designs.
The course then dives into the practical aspects of Figma, guiding you through setting up your account, creating design files, mapping user journeys, and building wireframes.
Once you’ve grasped the basics, you’ll move on to prototyping, a crucial step in UI/UX design.
You’ll learn how to create frames, use tools effectively, work with fonts, plan layouts, group elements, create shapes, work with images and masking, and build reusable components.
The course also covers constraints, versioning, prototyping techniques, team collaboration, previewing, and exporting assets.
To solidify your learning, the course includes several demonstration scenarios for designing apps and websites.
You’ll tackle real-world examples, applying the concepts you’ve learned.
The course goes beyond UI design, offering lessons on color theory, UI comparisons, advanced techniques like 3D buttons and gradients, content creation, and professional UI discussions.
You’ll also explore forms, buttons, plugins, and animations for interactive elements like “like” buttons, burger menus, and calendars.
There’s even a section dedicated to recreating a Netflix prototype.
If you’re interested in UX design, the course includes a bonus section covering empathy, the importance of UX, key factors of user experience, and bridging the empathy gap.
For those seeking advanced Figma skills, there’s an entire section dedicated to mastering auto layout, design systems, advanced prototyping, external libraries, and documentation.
The course wraps up with recommended resources, a summary of concepts, and several use cases that apply the learned concepts to responsive web designs, e-commerce sites, crypto exchange dashboards, Android and iOS apps, and more.
The Complete Figma Course - Designing Mobile & Web App UI/UX
You’ll start by getting familiar with Figma.
After signing up and learning the basics, you’ll explore Figma’s interface, panels, and shortcuts.
Next, you’ll dive into Figma’s tools, creating frames, drawing shapes, using the pen and pencil tools, and performing boolean operations.
With these skills, you’ll design your first mobile app mockup, setting up frames, adding images and icons, choosing a color scheme, and creating styles.
The course covers key UI/UX concepts like components, variants for creating component groups, and constraints to ensure responsiveness.
You’ll also learn about plugins to enhance your workflow.
To complete the mobile mockup, you’ll apply User Experience (UX) principles, use templates like Apple’s, design navigation with tab bars, add sample data from Google Sheets, and create custom text styles.
Prototyping is essential, so you’ll learn to turn your mockup into an interactive prototype with connections, scrolling, animations, page transitions, interactive maps, GIFs, and Smart Animate.
You can even test it on your mobile device!
Working with teams is covered, showing how to share files and collaborate.
The course also teaches exporting to formats like PNG, JPG, PDF, SVG, and using the Code panel for developer handoff.
Finally, you’ll design a web app UI, starting with a template, creating a login page, dashboard with auto-layout and sample data, leveraging reusable components, and exploring version history.
Figma UI UX Design Advanced
With over 150 lectures spanning various advanced topics, you’ll gain mastery over intricate Figma features and workflows.
The course kicks off by diving into Auto Layouts, a powerful tool for responsive design.
You’ll learn when to use components, optimal spacing techniques, and how Auto Layout differs from constraints.
Shortcuts and tips are provided to boost your productivity.
Next, you’ll explore advanced workflow tricks like file handling, advanced copy/paste, and precision zooming.
Grids are demystified, covering grid styles, nested grids, and when to use grids over constraints or Auto Layouts.
A project on event branding walks you through logo creation using Iconscout.
Nested and responsive Auto Layouts are covered in-depth, including nesting multiple layouts, responsive text, and device adaptability.
You’ll animate gradients using variants and learn the “Critique Sandwich” technique for providing feedback.
Prototyping skills are honed through bulk wire creation, updating links, setting device frames, and creating sticky scrolling elements.
Interactive components like sliding buttons and checkboxes are also explored.
The course dives into advanced layer management, from hiding/locking layers to bulk renaming and search/replace.
You’ll master working with components, variants, and combining them with properties for input fields and more.
Typography enthusiasts will appreciate lectures on font previews, leading, hanging punctuation, and using variable fonts.
Image handling is thoroughly covered, from masking techniques to color blending modes.
Video integration is simplified through autoplay videos, hover playback, and building video cards.
You’ll also learn to create color themes, manage styles/libraries across files, and leverage design tokens.
More advanced animation lectures teach path animations and integrating Lottie files.
Accessibility is emphasized through Figma’s plugin.
Collaboration is key, with tips on working with colleagues, version control, documenting design systems, and using DEV mode.
Finally, you’ll complete a capstone project to showcase your newfound skills.
Learn Figma: User Interface Design Essentials - UI/UX Design
You’ll start with an introduction to the course structure and the required tools.
There are even free UI kits and an e-book to get you started.
The first major section covers design basics - the foundation for any great UI/UX designer.
You’ll dive into layout, visual hierarchy, iconography, typography, color theory, spacing, and composition.
This ensures you understand the principles behind effective design.
Next up is the Figma Academy section, where you’ll get hands-on with Figma’s powerful features.
From shapes and text styling to components, layout grids, and prototyping, you’ll master the tools to bring your designs to life.
The course even covers handy plugins and keyboard shortcuts.
With a solid grasp of design principles and Figma, you’ll move on to designing various UI elements like text fields, buttons, menus, and charts.
This section equips you with the building blocks for crafting intuitive user interfaces.
The course dedicates entire sections to wireframing, a crucial step in the design process, and creating your own design system with consistent styles.
You’ll even get to design a complete finance app from scratch, applying everything you’ve learned.
Web design is covered too, as you’ll design a modern landing page.
And if you’re interested in logo design or 3D modeling for UI, there are sections dedicated to those skills as well.
The course even touches on Adobe Photoshop for UI/UX design.
Towards the end, you’ll learn about prototyping tools, creating an online portfolio on platforms like Dribbble and Behance, and even starting your own UI/UX design business.
The course wraps up with resources for design inspiration and what to do next on your UI/UX journey.
Design & Prototype a Mobile UI/UX Experience - Learn Figma
The course starts with an introduction to Figma, and you’ll download the class file to follow along.
You’ll then dive into designing the login and sign-up screens, creating reusable components, and learning how to prototype interactions.
From there, you’ll design the core shopping experience, including browsing products and adding them to your cart.
The checkout process is covered next, ensuring a smooth path to purchase.
Designing user profiles rounds out the app’s key features.
Collaboration and exporting assets for developers are also taught, preparing you for real-world workflows.
You’ll pick up handy Figma tricks like keyboard shortcuts, plugins, and using UI kits.
The instructor provides final thoughts and comments, wrapping up the core lessons.
But there’s more!
Bonus videos explore advanced prototyping techniques like animations, overlays, scrolling, and interactive components.
Throughout the course, you’ll use Figma’s powerful design and prototyping tools to craft a complete mobile app experience.
UI/UX Design With Figma : 5+ Real World Projects
You’ll start by understanding the fundamentals of UI/UX design and the difference between the two.
Then, you’ll dive into Figma.
The course covers everything from installing Figma to using its various features like layers, components, text tools, images, Boolean operations, alignment, libraries, code panel, prototyping, scrolling, masks, and exports.
You’ll also learn about wireframing, an essential skill for UI/UX designers.
The course teaches you how to create wireframes using Figma and wireframe.cc.
Once you’ve grasped the basics, you’ll work on five real-world projects, including a food delivery app (Lattofatto), an OTT streaming website, a music player app (Musify), and a social media website.
For each project, you’ll learn how to wireframe, design the UI, and create prototypes using Figma.
The course also covers team setup and collaboration in Figma, so you can work on projects with others in real-time.
Additionally, you’ll learn about grid systems in web and UI design, as well as tips for creating attractive user interfaces.
The course even provides inspiration and resources, including websites for design inspiration.