Skip to content

Master Web & Mobile Design: Figma, UI/UX Essentials, +More

Unlock UI/UX Design Mastery: Figma for Web & Mobile Interfaces. Land Your Dream Job Now!

Imaginary Programmer

Summary

Price
£29.99 inc VAT
Study method
Online, On Demand What's this?
Duration
9 hours · Self-paced
Qualification
No formal qualification
Certificates
  • Master Web & Mobile Design: Figma, UI/UX Essentials, +More Completion Certificate - Free
  • Reed Courses Certificate of Completion - Free
Additional info
  • Tutor is available to students

Add to basket or enquire

Overview

Figma Essentials with Chetan Pujari: Master UX Design from Beginner to Pro

Become a Figma pro and take your UX design skills to the next level!

This comprehensive course, led by UX design expert Chetan Pujari, is your one-stop shop for mastering Figma, the industry-leading UI/UX design tool.

Whether you're a complete beginner or looking to refine your skills, this course has you covered. Learn the fundamentals of UX design, craft stunning user interfaces, and create interactive prototypes that bring your ideas to life.

Here's what you'll achieve:

  • Master Figma: Navigate the interface with ease, understand key concepts like frames and pages, and leverage Figma's powerful design tools.
  • Build User-Friendly Interfaces: Learn the art of wireframing, explore typography and color theory, and design custom UI elements for your projects.
  • Prototyping Expertise: Craft interactive prototypes that showcase your designs in action, including micro-interactions, page transitions, and animations.
  • Real-World Ready: Gain practical skills through hands-on projects, and build a portfolio that demonstrates your Figma expertise.
  • Industry Insights: Throughout the course, Chetan shares valuable insights from his design experience, helping you understand industry best practices and navigate client expectations.

Bonus!

  • Over 100 design assets and premium templates are included to jumpstart your projects.
  • Assignments and exercises help you solidify your learning and build a strong foundation in Figma.

Ready to transform from Figma novice to Figma hero? Enroll today and unlock your full design potential!

Curriculum

27
sections
100
lectures
9h 2m
total

    • 1: From Zero to Figma Hero 02:44
    • 2: Figma to Code Design Stunning Interfaces Without Writing a Line 01:35
    • 3: UI vs. UX in Figma Design Magic Explained 02:36
    • 4: Build Apps & Websites You'll Love (In This Figma Course) New 02:04
    • 5: Learn UX Briefs & Task Flows in Figma 03:47

    • 6: Lo-Fi vs Hi-Fi Wireframes Design Showdown 02:54
    • 7: Frames & Design file in Figma Design(Interface) 07:21

    • 8: Figma Text Tool and Fonts 07:30
    • 9: Figma Basics How To CREATE And MODIFY SHAPES 08:01
    • 10: How to Choose and use Colors in figma 04:39
    • 11: Strokes & updating default properties in figma 08:51
    • 12: What is Object Editing Mode & How to Use It! in figma 02:39
    • 13: How to Use The Scale Tool And Selection in Figma 02:17
    • 14: Figma groups and frames for better UI designs 06:41
    • 15: Project 1: From Sketch to Reality: Wireframing Your Design in Figma 02:05
    • 16: Best Free Icon Set Packs for UIUX Designers 05:52
    • 17: Icon basics in Figma 05:26
    • 18: How To Install And Use Plugins in Figma 02:52
    • 19: Project 2: Mastering the Toolbox: Icons & Plugins for Powerful Figma Designs 02:03

    • 20: How To Create And Use Pages In Your Figma File 05:58

    • 21: Figma Prototyping for beginners 06:20
    • 22: Figma Prototyping & Transitions (Easing) 08:37
    • 23: Figma Testing Prototype with Figma Mirror 04:37
    • 24: Project 3: Mobile Design Magic: Showcase Your App in Figma 01:54

    • 25: Figma Smart Animate for Beginners 06:31
    • 26: Project 4: Breathe Life into Your Design: Creating Smart Animations in Figma 01:04

    • 27: Sharing & Feedback in real-time with Figma 05:18
    • 28: Figma Collaborate in real-time with multiplayer 04:41

    • 29: What Are Moodboards & The SECRET to Finding Inspiration for Web & App Design FAS 05:42
    • 30: How to Create a Moodboard in Figma 02:20
    • 31: Project 5: Inspiration Station: Building a Moodboard in Figma 00:52

    • 32: Create a Responsive Grid System for Web & UI Design 05:06

    • 33: How to Choose Colors (Color Inspiration) 06:53
    • 34: How I make UI color palettes in figma 06:01
    • 35: How To Create Gradients in Figma 03:31
    • 36: Creating a Color System in Figma 05:49
    • 37: Easiest way to generate color palette in Figma (Using Plugins) 05:35

    • 38: Best Practices for Choosing Fonts and Font Pairing in UI and Web Design 05:50
    • 39: Create the Perfect Typography Scale for UI & Web Projects 06:49
    • 40: Fastest way to create text styles in Figma 06:17
    • 41: How to add lorem ipsum text in Figma 03:40
    • 42: Useful Text Tips & Tricks in Figma 07:12
    • 43: How to add fonts in Figma and How TO Add missing fonts in Figma 04:25
    • 44: Project 7: Textpertise: Mastering Text Styles in Figma 01:48

    • 45: Figma Pen Tool Basics & Vector Networks 07:54
    • 46: Why are the Apple icons different (corner smoothing) 04:15

    • 47: Figma Boolean Operations (Union,Subtract,Intersect,Exclude) 06:49
    • 48: Figma's Power Duo When to Use Union and When to Flatten 02:41
    • 49: Project 08: Homepage & Burger Menu Design in Figma 01:43
    • 50: How to Use Smart Selection and Tidy Up in Figma 07:52

    • 51: Placing images in Figma 04:53
    • 52: Figma Masks (Mask Image and Text in Figma) 05:49
    • 53: Figma images Plugins for UIUX Designers 04:40
    • 54: Project 9: Image Alchemy: Mastering Images & Plugins in Figma 00:58

    • 55: Auto Layout And Constraints In Figma 10:30
    • 56: Figma Auto Layout Space Between Objects 04:43
    • 57: Figma Constraints & Resizing Made SIMPLE 05:46
    • 58: Nest Frames,Auto Layout And Constraints In Figma 11:26
    • 59: Advanced Auto Layout Techniques - Figma 07:57
    • 60: Class Project 10 - Responsive Design 01:25

    • 61: How to Make Beautiful Shadows - UI Design with Figma 10:11
    • 62: How to Create Background Blur and layer Blur in Figma 09:05

    • 63: How To Save Your Figma Files To Desktop and How To Access Figma File's History 07:07

    • 64: Figma Components - The Basics 04:50
    • 65: Update,Change,Edit And Reset Components In Figma 05:36
    • 66: Deleting main components in figma is impossible (Tips & Tricks of components) 04:04
    • 67: Moving main components and how to Organize Your Components 06:20
    • 68: Figma Best Practices Name Layers & Stay Organized 03:52
    • 69: Class Project 12 - Components 02:53

    • 70: Figma components and variants for beginners 10:05
    • 71: Figma Component properties 10:11
    • 72: Project 13 - Variants 02:10

    • 73: How to Design an Interactive Input Field in Figma 12:58
    • 74: Project 14 Account and Category Page 02:14
    • 75: How to design a Notification UI design in Figma 08:58

    • 76: How to Add Popup Overlays in Figma 05:31
    • 77: How To Create a TOOLTIP (Hover to Show Text) Component in Figma 06:43
    • 78: How to Create Multiple Prototypes & Create Separate Flows on One Figma Page. 04:38
    • 79: Prototyping overlay transitions in Figma 10:40
    • 80: Project 15: Pop Up & Flow Like a Pro: Prototyping Interactions in Figma 01:02
    • 81: Sticky Scroll In Figma 05:36
    • 82: How to Create Auto Scrolling Animation in Figma 06:56

    • 83: The difference between Teams, Projects and Pages 05:24

    • 84: Figma Create a shareable team library 07:18

    • 85: Animation VS Micro InteractionIn Figma 05:46
    • 86: Amazing Button Animations in Figma 08:28
    • 87: Project 18: Pocket-Sized Perfection: Design an iPhone Product Page & Cart 04:52
    • 88: Micro animations using interactive components in Figma 08:03
    • 89: Figma Prototype easing & spring animations 12:48
    • 90: Pulsing animation in Figma 18:13
    • 91: Class Project 19 - Finish your designClickkart app final 01:58

    • 92: How do I set a project thumbnail or cover in Figma 05:05

    • 93: How to Export Your Figma Design as Image (PNG,JPG,SVG,PDF) 07:27
    • 94: How to Hand off your UX designs like a PRO 05:02
    • 95: Introduction to design systems resources and inspirations 04:20

    • 96: Intro - Real world projects With figma 01:41
    • 97: Real World UIUX Project 2 StayWave 02:28
    • 98: Real World UIUX Project 3 Food Delivery App 02:57
    • 99: RealWorld UIUX Project 4 Music App 02:32
    • 100: RealWorld UIUX Project 5 DIY 01:42

Course media

Description

Welcome to Figma Essentials with Chetan Pujari!

Embark on a journey to master UX Design using Figma, the ultimate UI/UX design tool. Whether you're new to design or eager to delve deeper into User Experience, this course is your gateway to success.

Starting from the basics, we'll guide you through crafting compelling User Interfaces and dynamic prototypes, while addressing client expectations head-on.

Here's what's in store:

  • Dive into the fundamentals: Understand the brief and work with UX personas.

  • Design with precision: Create sleek wireframes and master color and image implementation.

  • Perfect your typography: Learn the art of font selection for web and mobile apps.

  • Craft custom components: Design icons, buttons, and other UI elements tailored to your project.

  • Decipher advanced concepts: Explore components, constraints, and multi-dimensional variants with ease.

  • Boost productivity: Utilize free UI kits and plugins to streamline your workflow.

  • Create consistency: Develop a style guide for seamless client handoff.

  • Elevate your designs: Master micro-interactions, page transitions, and animations.

  • Bring your prototypes to life: Build fully interactive prototypes from start to finish.

  • Collaborate effectively: Work with team members and prepare files for developers.

Throughout the course, we'll focus on Figma while providing insights into real-world UX projects and industry practices. Plus, assignments will hone your skills and empower you to create a standout portfolio.

Ready to transform from Figma Zero to Figma Hero? Let's upgrade your UX Design journey today.


The course provides over 100 assets and premium design templates, ensuring you have everything you need for your future projects. Rest assured, this is the ultimate online hub for honing your Design skills!

Get ready for a hands-on journey from beginner to professional Designer, where we guide you through crafting polished designs and transforming them into fully functional websites or apps.


Here's what you'll learn in the course...


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 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

We'll equip you with the skills to command premium rates for your expertise, transcending the race for low-paying gigs on generic freelancing platforms. Our aim is to empower you with the capabilities of a seasoned designer while guiding you through the creation of a tangible product for your portfolio. This course isn't merely about passive learning; it's about empowering you to transition from a novice to a sought-after designer capable of securing lucrative opportunities. Unlike fleeting technical skills, design prowess remains timeless. While trends may shift, the foundational principles you'll master here will remain relevant for years to come.

Who is this course for?

  • UX Design Beginners: Brand new to UX design? This course equips you with the essential Figma skills and UX principles to get started.
  • Career Changers: Looking to switch gears? Learn in-demand UX design skills with Figma to launch a new and exciting career.
  • Design Enthusiasts: Want to level up your design skills? Master Figma and core UI/UX design concepts to build a strong foundation.
  • Portfolio Builders: Need to impress potential employers? Enhance your portfolio by adding "UX Design with Figma" to your skillset.
  • Freelancers & Entrepreneurs: Take control of your career! Learn valuable UX design skills to offer freelance services or design user-centered products.
  • Ideal for Web Developers and Mobile Developers seeking to expand their skill set with valuable design expertise.
  • Suited for individuals aiming to land roles as Web Designers, Mobile Designers, or UI/UX Designers in the industry.

Requirements

  • No prior experience is needed. We guide you from square one to mastery, making it accessible for everyone.

  • Prepare to embark on a journey from novice to expert, with comprehensive instruction every step of the way.

  • Open your heart to the world of design and unlock the ability to transform your ideas into stunning creations indefinitely.

  • Embrace the opportunity to develop a lifelong passion for creating beautiful projects, starting from ground zero.

  • Access to Figma is necessary; a free plan is available on the Figma website.

Career path

Career Paths After Mastering Figma in UX Design

  • UX Designer: Craft user-centered experiences for websites and apps. (Estimated Salary: £40,000 - £80,000 [
  • UI Designer: Design user interfaces that are both beautiful and functional.
  • Web Designer: Build visually appealing and user-friendly websites.
  • Freelance Designer: Offer your Figma expertise to clients worldwide.

Questions and answers

Currently there are no Q&As for this course. Be the first to ask a question.

Ask a question

Certificates

Master Web & Mobile Design: Figma, UI/UX Essentials, +More Completion Certificate

Digital certificate - Included

This certificate is awarded in recognition of the successful completion of the "Master Web & Mobile Design: Figma, UI/UX Essentials, +More" course on Reed. The course equips students with the necessary skills to design and develop user-friendly web and mobile applications through comprehensive coverage of Figma, UI/UX essentials, and more.

Reed Courses Certificate of Completion

Digital certificate - Included

Will be downloadable when all lectures have been completed.

Reviews

Currently there are no reviews for this course. Be the first to leave a review.

Leave a review

Legal information

This course is advertised on reed.co.uk by the Course Provider, whose terms and conditions apply. Purchases are made directly from the Course Provider, and as such, content and materials are supplied by the Course Provider directly. Reed is acting as agent and not reseller in relation to this course. Reed's only responsibility is to facilitate your payment for the course. It is your responsibility to review and agree to the Course Provider's terms and conditions and satisfy yourself as to the suitability of the course you intend to purchase. Reed will not have any responsibility for the content of the course and/or associated materials.

FAQs

Study method describes the format in which the course will be delivered. At Reed Courses, courses are delivered in a number of ways, including online courses, where the course content can be accessed online remotely, and classroom courses, where courses are delivered in person at a classroom venue.

CPD stands for Continuing Professional Development. If you work in certain professions or for certain companies, your employer may require you to complete a number of CPD hours or points, per year. You can find a range of CPD courses on Reed Courses, many of which can be completed online.

A regulated qualification is delivered by a learning institution which is regulated by a government body. In England, the government body which regulates courses is Ofqual. Ofqual regulated qualifications sit on the Regulated Qualifications Framework (RQF), which can help students understand how different qualifications in different fields compare to each other. The framework also helps students to understand what qualifications they need to progress towards a higher learning goal, such as a university degree or equivalent higher education award.

An endorsed course is a skills based course which has been checked over and approved by an independent awarding body. Endorsed courses are not regulated so do not result in a qualification - however, the student can usually purchase a certificate showing the awarding body's logo if they wish. Certain awarding bodies - such as Quality Licence Scheme and TQUK - have developed endorsement schemes as a way to help students select the best skills based courses for them.
View all
Similar subjects: Web design, UX, Design, IT
Related searches: Online courses