OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Learn Figma in 14 Days - Master UI Design and Prototyping

4.3 Filled star Filled star Filled star Filled star Empty star
Based on 813 ratings
see reviews
Muhammad Ahsan Pervaiz

Figma is one of the most powerful UI and UX Design tool that can even run in your browser. Figma’s power is hidden in its being cross-platform and its Collaboration feature where you can easily collaborate with other Designers and Developers. It works seamlessly on Windows and Mac Operating Systems with a Desktop Application. In recent times, it is one of the most powerful and popular User Interface Design App due to being a Cloud based App (saves your file version history) and its FREE to use too

Read more

Figma is one of the most powerful UI and UX Design tool that can even run in your browser. Figma’s power is hidden in its being cross-platform and its Collaboration feature where you can easily collaborate with other Designers and Developers. It works seamlessly on Windows and Mac Operating Systems with a Desktop Application. In recent times, it is one of the most powerful and popular User Interface Design App due to being a Cloud based App (saves your file version history) and its FREE to use too

This course will teach you all about User Interface Designing and also adding interactivity to your Designs with powerful prototyping features of Figma. First, we will learn about the basic tools, common keyboard shortcuts and familiarizing ourselves with the Figma’s interface.

Once you have solid basics, we will move on to Auto Layout, Responsive design and few advance things like viewing your Prototype live on an actual Mobile Device. I will show you everything step by step.

We will design together the User Interface and then the prototype of a “Recipe App called YUMMS” from the scratch and make it into a pro level design by multiplying Artboards, using reusable Styles and Components.

If you are Beginner in UI UX Design or a seasoned UI/UX Designer trying to switch from Sketch or Adobe XD, please join me in this learning experience.

Enroll now

What's inside

Syllabus

Introduction

Introductory video for this Figma Course

How to create account on Figma and how to download Figma's Desktop app for Windows or MAC

Read more

Get familiar with Figma teams, projects, files, pages etc...its interface mainly

How to ask me questions and how to learn with discussion

Inside a Project interface of Figma, assets, layers panel, code panel, design and prototype panels

Download all the exercise files, assignments, images and fonts used

How to use resources folder to submit your assignments

Using and managing Frames or Artboards in Figma

Basic tools of Figma like Ellipse, Rectangle, lines and Arrow

Type tool in figma to have better control on typography for your UI Designs

How to use pen tool in Figma to create basic shapes and Icons

How to use Place image tool and how to speed up your workflow with images in Figma

Hand, Pencil and comment tools in Figma

How to use Fill color tool in detail? How to implement linear gradients and other types of gradients in Figma

How to use Masks to hide and show the areas of your design or images in Figma

How to create styles guides and reusable styles in Figma for your colors, gradients, shadows and text, all kinds of styles

How to use Drop shadow, inner shadow and other effects in Figma to your fullest

Components are the major building block of any UI Design system so here you will learn how to create a component and then use it again and again in Figma

How to use Constraints with Components to create responsive buttons and elements for User Interface Design within Figma

Most commonly used Figma shortcut keys so you can pick up speed using this App

How to invite other team members in Figma and how two designers can work simultaneously

Lets see how much you have learned so far

How to use Shareable Team Libraries when working in a team - Share your design assets and Style guide across team in Figma

Latest addition, use UI Kits and Design Resources in your designs by duplicating them. Follow and share love in Figma Community

How to use Local and Global Guides and layout Grid in UI Design

One of the advanced feature of Figma which is Auto Layout. Learn how to create auto expanding buttons in Figma with just low effort

Learn how to use Auto Layouts at advanced level and create responsive components with Auto Layouts in Figma

When to use groups and when to use frames in Figma. Major difference between Groups and Frames

Latest feature of Figma which is variants with your components

Advance use of variants in Figma

How to export images and assets if your designing for IOS or Android Devices. When to use SVG, JPG or PNG image formats

How to create Bootstrap 4 Website Grid in Figma

Basics of prototyping inside Figma. How to link screens together and how to pop up an overlay with using auto-animate transitions

How and when to use Swap with action in Figma and how to use Time delays with pop ups or feedback chips

How to use On Drag action in Figma's prototypes and how to enable a horizontal scroll inside a container

How to show hover over links and buttons transitions to your developers?

How to use Scroll to in Prototyping using Figma

How to preview your Prototype of your App live on an actual Device. Will show you the real screen of an actual device

Wireframes is the last part of UX Design and first part of UI Design, so here I will discuss on how to create Wireframes and how to use design inspirations. What was my plan behind this design

Laying out guides and grid to further build up our Yumms Mobile App Design

User Interface Design of Login Screen for Yumms Recipe App

Designing the main Meals screen and sliding top navigation in Figma

Designing the main Meals screen content and featured recipes section

Designing the UI of Desserts screen of the main meals section

Duplicating Screens and creating more screen by using Components and replacing image fills

Creating Healthy recipe screen with the top menu bar that moves right with this screen

Creating Sliding menu and auto-animating images of recipes in Figma. Adding interactivity to your Static Interface

UI Design for the search filters for food allergies and diet plans

Design the second selected filters screen along with filter selection transition animations

After search is pressed, search results will popup and this is where that magic happens in Figma

Design the single recipe screen with inner sub section of Ingredients and Preparation

Design Single recipe App and prototype the transition between main screen and recipe screen using Figma

How to use Overlay pop up and how to show and hide it with Prototyping using Figma App

Whats next to learn from me

In this lecture, you will learn how to use local variables and and how to create color variables in Figma. If you are new to this variables feature, make sure you watch this video and learn the basics and beginner level stuff about new local variables feature of Figma

In this lecture, you will learn how to use number type of local variables in Figma. You can use them for spacing, for setting heights and widths and also corner radius in Figma. If you are confused about local variables in Figma, watch this video

In this lecture, you will learn how to use local variables in Figma. Learn about String local variable in Figma and how to use it just in UI Design. Simple and straightforward way to use string type local variables in Figma

In this lecture, you will learn how to use Figma's new auto layout wrap along with max width and min width setup. If you are a beginner and having problems with Figma's Auto Layout usage, this video is for you

Traffic lights

Read about what's good
what should give you pause
and possible dealbreakers
Covers Figma's prototyping features, enabling designers to add interactivity to their designs and test user experience, which is essential for modern UI/UX design
Explores the use of styles and components, which promotes efficient and consistent design practices, and is a core skill for UI/UX designers
Teaches Auto Layout and Constraints, which are essential for creating responsive designs that adapt to different screen sizes and devices, a must-have for modern UI/UX
Includes sections on Figma's latest features, such as local variables and auto layout wrap, which helps designers stay up-to-date with the tool's capabilities
Requires downloading Figma's desktop app for Windows or Mac, which may pose a barrier for learners using other operating systems or those who prefer browser-based tools
Uses a recipe app as a case study, which may not appeal to learners interested in other design domains, such as dashboards, e-commerce, or SaaS products

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.
Save

Reviews summary

Practical figma ui/ux with project

According to learners, this course provides a solid foundation for mastering Figma's essential tools for UI design and prototyping. Students particularly appreciate the clear, step-by-step instruction and the comprehensive coverage of key features like Auto Layout and Prototyping. The included hands-on project, building a Recipe App, is highlighted as a valuable practical exercise that helps solidify understanding. While many find it excellent for beginners, some suggest the pace can be quite fast, especially to complete within the 14-day timeframe, and that it serves as a great introduction rather than a deep dive into advanced topics. Recent updates adding Figma's latest features like Variables are also noted.
Includes recent Figma features.
"It's great that the course has been updated to include the new Variables feature in Figma."
"The addition of the latest features like auto layout wrap is very helpful and relevant."
Covers essential Figma features extensively.
"I was impressed by how well Auto Layout, Components, and Prototyping were covered."
"Learning about constraints and variants made a big difference in my designs."
"The sections on styles and reusable components were particularly useful for workflow efficiency."
A great starting point for new Figma users.
"As someone completely new to Figma, this course was perfect for getting started."
"It gave me a really strong foundation in Figma's basics and core functionalities."
"If you're a beginner, this course will guide you well through the interface and tools."
Building a full app helps reinforce learning.
"Designing and prototyping the Recipe App from scratch was incredibly helpful and practical."
"The project tied everything together nicely; I feel confident applying what I learned now."
"Working on the Yumms app gave me real-world experience using Figma's features."
"The final project felt like a real design task and really solidified the concepts."
Explanations are easy to follow and understand.
"The instructor explains everything very clearly and breaks down complex topics into simple steps."
"I found the lectures easy to follow, making learning Figma straightforward even as a beginner."
"His explanations were very concise and to the point, making the learning process smooth."
Fast-paced, may require extra time or study.
"Trying to finish this course in 14 days is ambitious; the pace is very fast at times."
"While it covers a lot, some complex topics could use a bit more depth for intermediate users."
"It's a great overview, but I feel I need to supplement this with other resources for advanced techniques."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Learn Figma in 14 Days - Master UI Design and Prototyping with these activities:
Review Basic Design Principles
Reinforce fundamental design principles like typography, color theory, and layout to create more effective and visually appealing Figma designs.
Show steps
  • Read articles or watch videos on design principles.
  • Analyze existing designs, identifying strong and weak points.
  • Practice applying these principles in small design exercises.
Read 'Don't Make Me Think, Revisited'
Understand core usability principles to create intuitive and user-friendly interfaces in Figma.
View Don't Make Me Think, Revisited: A Common Sense... on Amazon
Show steps
  • Read a chapter of 'Don't Make Me Think'.
  • Apply the principles to a Figma design.
  • Reflect on how the changes improved usability.
Read 'Refactoring UI'
Learn practical UI refactoring techniques to improve the visual appeal and usability of your Figma designs.
View Melania on Amazon
Show steps
  • Read a chapter of 'Refactoring UI'.
  • Apply the techniques learned to a Figma project.
  • Reflect on the impact of the changes.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Component Creation Practice
Sharpen your component creation skills in Figma to build reusable and maintainable UI elements.
Show steps
  • Create 5 different button components with various states.
  • Create 3 different input field components with labels and hints.
  • Combine these components into a small form.
Redesign an Existing App Interface
Apply your Figma skills to redesign an existing app interface, focusing on improving usability and visual design.
Show steps
  • Choose an app with a UI you want to improve.
  • Analyze the existing UI and identify areas for improvement.
  • Create wireframes and mockups of your redesigned interface.
  • Prototype the redesigned interface in Figma.
Design a UI Kit
Solidify your understanding of Figma by creating a comprehensive UI kit with reusable components and styles.
Show steps
  • Choose a specific design style or theme.
  • Create a set of basic components (buttons, inputs, etc.).
  • Define styles for colors, typography, and effects.
  • Document the UI kit's usage and guidelines.
Advanced Prototyping Techniques
Explore advanced prototyping techniques in Figma to create more interactive and realistic user experiences.
Show steps
  • Find tutorials on advanced prototyping features (variables, conditional logic).
  • Follow the tutorial to create a complex prototype.
  • Experiment with different interactions and transitions.

Career center

Learners who complete Learn Figma in 14 Days - Master UI Design and Prototyping will develop knowledge and skills that may be useful to these careers:
User Interface Designer
A user interface designer focuses on the visual elements users interact with in a software or application. This includes the layout, buttons, and overall aesthetic. This course helps build a solid foundation in Figma, a leading UI design tool. The course covers essential tools, components, styles, auto layout, and responsive design. Designing the User Interface and then the prototype of a recipe app helps give practical experience in creating pro level designs with reusable styles and components, which is a key aspect of this job.
See salaries and explore the career path for User Interface Designer
Prototyper
A prototyper specializes in creating interactive prototypes of digital products to test and validate design ideas. This course teaches prototyping in Figma, covering transition effects, overlays, and interactive design elements. It offers hands-on experience in designing interfaces and creating interactive prototypes. This includes learning how to link screens, use auto-animate transitions, and create interactive elements by using Figma.
See salaries and explore the career path for Prototyper
Mobile App Designer
A mobile app designer specializes in creating the user interface and user experience for mobile applications. They take into account the unique constraints and opportunities of mobile devices. This course directly addresses mobile app design by showing how to design User Interfaces and prototypes for mobile apps using Figma. The course will teach you how to view a Prototype live on an actual Mobile Device. You also learn how to export images and assets for IOS or Android Devices, ensuring designs are optimized for mobile platforms.
See salaries and explore the career path for Mobile App Designer
Web Designer
A web designer creates the visual layout and design of websites. They use design tools and code to ensure the website is visually appealing and easy to navigate. This course helps build skills for designing website interfaces in Figma. The exercises cover basic tools, typography, image placement, masking, and styling. Learning about Auto Layout and responsive design allows you to create websites that adapt to different screen sizes. It will also be helpful to learn how to create a Bootstrap 4 website grid in Figma.
See salaries and explore the career path for Web Designer
Digital Product Designer
A digital product designer is involved in the entire product design process, from ideation to launch. This course can help refine UI and UX design skills, building a foundation in Figma. The course covers UI design principles, prototyping, and interactive design. Designing and prototyping a recipe app from scratch provides practical experience in the product design process.
See salaries and explore the career path for Digital Product Designer
Interaction Designer
An interaction designer focuses on how users interact with a digital product, paying close attention to animations, transitions, and feedback. This course may be useful because you will learn how to prototype within Figma, enabling the creation of interactive prototypes with transition effects. You'll also learn how to use 'on drag' actions and create horizontal scrolls within containers. Furthermore, the course will teach you to create hover-over links and button transitions that can be shared with developers.
See salaries and explore the career path for Interaction Designer
User Experience Designer
A user experience designer focuses on how a user feels when using a software or application. They conduct research, create user flows, and design interactions that are intuitive and enjoyable. This course may be useful because it covers prototyping in Figma, including transition effects and overlays. It also teaches how to add interactivity to static designs, which are all crucial for improving User Experience. Designing and prototyping a recipe app provides hands-on experience in testing designs with users.
See salaries and explore the career path for User Experience Designer
Design Systems Manager
A design systems manager is responsible for creating, maintaining, and evolving a library of reusable components and guidelines. This course may be useful because it focuses on creating reusable components and styles in Figma, which are fundamental to design systems. The course covers how to create components, use constraints for responsiveness, and manage team libraries for sharing design assets. Understanding components and variants in Figma is a must for anyone managing design systems.
See salaries and explore the career path for Design Systems Manager
Visual Designer
As a visual designer, your concern is with the visual elements of a design, focusing the aesthetic and ensuring it aligns with brand guidelines. This course may be useful because it will show you how to fully utilize Figma's tools for visual design. The course covers color fills, gradients, shadows, and other effects. The course will also teach you how to create style guides and reusable styles for colors, gradients, and shadows, all critical for maintaining visual consistency.
See salaries and explore the career path for Visual Designer
UI Developer
A user interface developer translates designs into functional code, building the interactive elements of a website or application. This course may be helpful because it provides a strong understanding of UI design principles and the use of Figma. Even without coding, understanding Figma helps bridge the gap between design and development. The course also covers how to inspect code panels in Figma, offering insights into the code behind the designs.
See salaries and explore the career path for UI Developer
Design Consultant
As a design consultant, you provide expert advice and guidance to organizations on design-related matters. This course may be useful because it can help you increase your knowledge of Figma, a leading UI design tool. You can broaden your skills in UI/UX design and interactive prototyping. The course provides a solid foundation in Figma, covering everything from basic tools to advanced prototyping features.
See salaries and explore the career path for Design Consultant
UX Researcher
As a UX Researcher, the main task involves understanding user behaviors, needs, and motivations through various research methods. This course may be useful as it helps you prototype interfaces in Figma, enabling the creation of interactive prototypes for user testing. Learning prototyping skills helps you to create realistic prototypes that can be used to gather valuable user feedback.
See salaries and explore the career path for UX Researcher
Information Architect
An information architect structures and organizes content in a way that is user-friendly and easy to navigate. This course may be useful. The course will provide a visual medium to think about how users will navigate the site. It is also helpful that the course teaches prototyping in Figma, covering how to link screens, use overlays, and create interactive prototypes. The course experience designing the UI and prototype of the recipe app will be valuable.
See salaries and explore the career path for Information Architect
Frontend Engineer
The work of a frontend engineer involves implementing user interfaces using code. While this course does not teach code, understanding Figma and UI design principles helps you collaborate effectively with designers. This course can broaden your understanding of design systems and component libraries. This includes how to inspect code panels in Figma, offering insights into the code behind the designs.
See salaries and explore the career path for Frontend Engineer
Accessibility Specialist
An accessibility specialist ensures that digital products are usable by people with disabilities. This course involves UI design principles and practices. You will learn how to design interfaces in Figma, which can be adapted for accessibility. While this course does not directly address accessibility, understanding UI design principles helps you create more inclusive designs. This includes how to use color contrast and typography effectively.
See salaries and explore the career path for Accessibility Specialist

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Learn Figma in 14 Days - Master UI Design and Prototyping.
Cover image
Don't Make Me Think, Revisited
Save
Classic guide to web usability, offering practical advice on making websites and apps easy to use. While not Figma-specific, the principles of usability it covers are essential for creating effective UI designs. Understanding these principles will help you design interfaces that are intuitive and user-friendly. This book is valuable for both beginners and experienced designers.
Don't Make Me Think, Revisited: A Common Sense...
Paperback
$$
Don't Make Me Think, Revisited : A Common Sense...
Hardcover
$$$
Don't Make Me Think, Revisited: A Common Sense...
Kindle Edition
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Course image
Rating
4.3 Filled star Filled star Filled star Filled star Empty star
Effort
8.5 total hours
Via
Udemy
Instructor
Muhammad Ahsan Pervaiz
Language
English
Traffic lights
Read about what's good
what should give you pause
and possible dealbreakers
Covers Figma's prototyping features, enabling designers to add interactivity to their designs and test user experience, which is essential for modern UI/UX design
Explores the use of styles and components, which promotes efficient and consistent design practices, and is a core skill for UI/UX designers
Teaches Auto Layout and Constraints, which are essential for creating responsive designs that adapt to different screen sizes and devices, a must-have for modern UI/UX
Includes sections on Figma's latest features, such as local variables and auto layout wrap, which helps designers stay up-to-date with the tool's capabilities
Requires downloading Figma's desktop app for Windows or Mac, which may pose a barrier for learners using other operating systems or those who prefer browser-based tools
Uses a recipe app as a case study, which may not appeal to learners interested in other design domains, such as dashboards, e-commerce, or SaaS products
Share this
Share to help others discover this course.
Facebook LinkedIn X Reddit Link Email
Begin learning today
Enroll now to gain full access to Learn Figma in 14 Days - Master UI Design and Prototyping.
Enroll now
Save for later
Add this course to your list. Find it anytime.
Save
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser