Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
UIUX with Figma and Adobe XD
Rating: 4.4 out of 5(1,257 ratings)
68,052 students

UIUX with Figma and Adobe XD

Learn User Interface and User Experience UI UX with Adobe XD and Figma
Last updated 5/2026
English

What you'll learn

  • Function of Figma
  • Tools of Figma
  • Function of Adobe XD
  • Tools of Adobe XD

Course content

2 sections39 lectures10h 40m total length
  • Introduction7:14

    Explore Figma from basics to advanced features, mastering the interface, tools, frames, components, auto layout, masking, styles, collaboration, and exporting for teams.

  • Introduction to Figma15:48

    Explore Figma as a collaborative UI/UX design platform, covering basics, account setup, navigation, design, collaboration, and prototyping.

  • Interface and Workspace11:45

    Explore the Figma interface and workspace, including layers, pages, frames, and assets; manage colors, grids, export, preview, and sharing while organizing projects.

  • Basic Tools in Toolbar28:41

    Explore the Figma toolbar basics, mastering move and scale tools, framing, sections and slices, shape tools (rectangle, line, circle, polygon, star), and placing or editing images.

  • Frames, Pages and Artboard in Figma New16:58

    Explore frames, artboards, and pages in Figma, create and customize frames with size, corner radius, and rotation, manage pages and version history for efficient design workflows.

  • Type Tool in Figma12:14

    Learn how to add and edit text in Figma using text boxes, apply fonts, adjust size and paragraph spacing, and use auto width/height, alignment, bullets, and fill and stroke options.

  • Creation Tools in Figma11:30

    Master creation tools in Figma, using the pen and pencil tools to draw shapes, adjust strokes, fills, colors, dashed accents, and apply shadows and blur effects.

  • Hand tool and adding comment in Figma13:24

    Master the hand tool to move the entire workspace in Figma. Add and resolve comments on frames, colors, and shapes, and explore basic boolean operations and resources.

  • Font colour and Stroke colour in Figma15:22

    Master color techniques in Figma, from fill and stroke colors to gradients (linear, radial, angular, diamond) and text color and stroke, with opacity and styling tips.

  • Alingings in Figma6:20

    Learn how to use masking in Figma to place images inside shapes, adjust opacity and layering, and combine text within masked groups for dynamic compositions.

  • Masking in Figma6:57

    Master alignment in Figma by centering objects, aligning to corners, and applying vertical and horizontal distribute spacing for consistent gaps.

  • Styles in Figma14:19

    Learn how to save and reuse color and text styles in Figma, apply them across shapes and text, and manage styles in a shared library for consistent design.

  • Components9:59

    Learn to create and use components in Figma, drag them from the assets panel, edit text, and adjust size. Detach instances to tailor buttons for your design.

  • Effects in Figma7:59
  • Constraints and Icons in Figma14:15

    Learn to use constraints in Figma to keep button components responsive, align text and icons, and explore selecting, coloring, and customizing icons from plugins and icon libraries.

  • Layout grid and the Figma Community13:31

    Master layout grids and guides in Figma and tap into the Figma community for free and paid templates, plugins, and design assets to enhance web and app designs.

  • Grouping, Framing, Auto layout and Team Library New31:01
  • Design styles and Shortcut keys in Figma41:13

    Explore design systems in Figma by building components, styles, and color palettes, then apply auto layout and assets to create app and web designs, while mastering essential shortcut keys.

  • Project of Designing Mobile app pages32:15
  • Web page designing using Shape blocking method32:08
  • Tips to work in Figma Efficiently21:31
  • Making rounded text, exporting and sharing link in Figma New14:45
  • How to Do Better UI/UX Design in Figma0:02

Requirements

  • Basic Computer Knowledge

Description

Are you ready to embark on a journey to master the art of designing beautiful, user-friendly interfaces and captivating user experiences? Look no further! In this course, we'll take you from a beginner to a proficient UI/UX designer, equipping you with the essential skills and techniques to create stunning designs for web and mobile applications.

Course Overview:

  1. Introduction to UI/UX Design: We'll start with the fundamentals, understanding the core principles of UI/UX design, the design process, and the role of designers in shaping digital experiences.

  2. Getting Started with Figma: Figma has revolutionized the design industry with its collaborative features and powerful capabilities. We'll provide you with a comprehensive introduction to Figma, showing you how to set up your projects, use artboards, layers, and various tools efficiently.

  3. Mastering Adobe XD: Adobe XD is another prominent design tool used widely in the industry. We'll dive deep into XD, exploring its features, and demonstrating how to create responsive designs for different devices.

  4. User Research and Analysis: Discover the importance of user research and how to gather valuable insights into user behavior, preferences, and pain points. Learn how to translate this data into design decisions that truly resonate with your target audience.

  5. Wireframing and Prototyping: Develop wireframes to plan and organize the layout of your designs effectively. We'll then move on to creating interactive prototypes, allowing you to test and validate your ideas before moving forward.

  6. Designing for Web: Designing for the web presents its own set of challenges and opportunities. You'll learn about responsive web design, designing intuitive navigation, selecting appropriate color schemes, and creating engaging web interfaces.

  7. Designing for Mobile: Mobile design is an essential skill in today's mobile-first world. We'll explore mobile UX best practices, optimizing for touch interactions, and crafting mobile app experiences that keep users coming back for more.

  8. Microinteractions and Animations: Delight your users with well-crafted microinteractions and subtle animations that enhance usability and create memorable experiences.

  9. Collaborative Design: Discover the power of collaboration with design stakeholders, developers, and fellow designers. Learn how to communicate your design decisions effectively and receive constructive feedback.

  10. Real-World Projects: Put your skills to the test by working on real-world projects that simulate the challenges faced by UI/UX designers in the industry. You'll gain practical experience and build an impressive portfolio to showcase your abilities.

By the end of this course, you'll be equipped with the expertise to create captivating UI/UX designs using Figma and Adobe XD, making you a sought-after professional in the field of user interface and experience design. Enroll now and join us on this exciting journey into the world of UI/UX design!

Who this course is for:

  • Beginner who want to learn UIUX