Figma Mastery: From Wireframes to Prototypes

Coursera via Coursera Specialization

Go to class Write review

Details

Go to class

Provider

Coursera Specialization
Pricing

Paid Course
Languages

English
Certificate

Certificate Available
Duration & workload

4 weeks, 10 hours a week

Found in

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

Grab it

Master the complete UX design workflow using Figma, the industry-leading design tool used by millions of professionals worldwide. This comprehensive program takes you from basic mockup creation to advanced prototyping, user testing, and design handoffs. You'll learn to create wireframes, high-fidelity prototypes, interactive designs, and professional design documentation that bridges the gap between design and development. Through hands-on projects, you'll build real-world skills in user journey mapping, persona development, usability testing, and collaborative design workflows. By completion, you'll have a portfolio of Figma projects demonstrating your ability to solve complex design challenges and communicate effectively with development teams. This program prepares you for roles in UX/UI design, product design, and digital design across industries.

Syllabus

Course 1: Create a Mockup in Figma
Course 2: Work with Components in Figma
Course 3: Design and Develop a Website using Figma and CSS
Course 4: Create a Digital Wireframe with Figma
Course 5: Create a High-Fidelity Prototype with Figma
Course 6: Handshake Ready: Design Specs & Handoff in Figma
Course 7: Prototype to Success: Figma Prototyping Essentials
Course 8: Interaction Intelligence: Advanced Prototyping with Figma
Course 9: UI Design using Figma: Create a Weather App Interface
Course 10: Prototypes in Figma: Creating an Initial Low Fidelity Design
Course 11: Simple to Stunning: The Fidelity Evolution in Figma Design
Course 12: Test, Learn, Evolve: Usability Testing in Figma
Course 13: Flow Forward: Mastering User Journeys & Wireframing in Figma
Course 14: Mapping the Mission: User Personas & Journey Design in Figma

Courses

0 reviews
1 hour 55 minutes
View details

In this 2-hour long project-based course, you will learn how to use the basic tools and features of Figma, design a website’s prototype and convert it into a website exactly as designed, using HTML and CSS. Note: This course works best for learners who are based in the North America region. We’re currently working on providing the same experience in other regions.
0 reviews
1 hour 23 minutes
View details

Components are popular in engineering and used for building user interfaces and games. Components are elements that you can use in designs when working with Figma. They help to make your projects have consistency. Adding the concept of components to a design tool makes the composition of complex designs more consistent and efficient. The great part of components in Figma is that Figma wants to make components easy to learn and use while still being powerful enough for advanced users. Learning about components will help you to build things faster and more consistently. By the end of this project you will be able to manipulate components in your projects easier.
0 reviews
2 hours 4 minutes
View details

This Guided Project “Create a Mockup in Figma” is for anyone who wants to learn to create their own mockup items. In this 1-hour long project-based course, you will learn to create t-shirt mockups on Figma. You will also learn to create a hair oil bottle mockup for a cosmetic business using the artboard studio mockup plugin. You will also learn to integrate third-party plugins (Artboard studio mockup and removebg) on Figma. To achieve this, we will work through : Task 1 : Introduction and creating an account on Figma Task 2 : Exploring Figma’s interface Task 3 : Creating a men’s t-shirt mockup on Figma Task 4 : Integrating artboard studio mockup plugin on Figma Task 5 : Importing a hair oil bottle mockup from the artboard studio plugin Task 6 : Adding designs to the hair oil bottle mockup This project is unique because it’s helpful for an individual who wants to design his/her own clothing mockups and is also helpful for small business owners who want to scale their businesses. This course is beginner-friendly, so you don’t need to have any experience before. Let's get started!
0 reviews
1 hour 58 minutes
View details

In this 1 hour guided project, you will first learn the fundamental principles of high-fidelity prototyping. Then you will learn the basic techniques of using Figma to create a high-fidelity prototype for a pizza restaurant mobile application. High-fidelity prototypes closely resemble the final product and give users and developers a real taste of how the features work. Finally you will learn how to share your work with team members and clients to refine your design with them. Prior knowledge with basic mobile application user interface is recommended. An account with Figma is required for this project. If you do not already have an account. You can create a free account with Figma. To make your learning experience smoother, please do so prior to starting the project.
0 reviews
1 hour 49 minutes
View details

In this 1.5 hours guided project, you will learn the fundamental principles of wire-framing. Then you will learn the basic techniques of using Figma to create a wireframe for a pizza restaurant. Finally you will learn how to share your work with stakeholders and refine your design with them. An account with Figma is required for this project. If you do not already have an account. You can create a free account with Figma. To make your learning experience smoother, please do so prior to starting the project.
0 reviews
2 hours 19 minutes
View details

Why should you learn Figma, and UX/UI design and process principles? Figma is currently one of the most used tools in the UX/UI design field, it's simple and powerful. Having solid design and process skills will help you interpret the user's needs and remove roadblocks, creating a smooth and simple user flow. In this 1.5 hours long Guided Project you will learn how to identify and build a user experience process, how to design a user interface and implement a functional user experience prototype. To achieve this we will work through. This project is really unique as it enables you, in a very short time, to think critically and cover all aspects of UX/UI design, building a concrete output for your study and work portfolio. In order to be successful in this project, it will be preferable, however not mandatory, for you to have a basic understanding of UX/UI fundamental principles, and an introductory knowledge of Figma.
0 reviews
2 hours 2 minutes
View details

In this 1-hour long project-based course, you will learn how to create a login screen for a weather app using Figma, incorporating input fields and a login button. You'll also design a home screen for the weather app displaying current weather conditions, and prototype the login and home screens together in Figma, demonstrating the ability to link screens and add basic interactions for seamless navigation. This course is designed for learners who want to build foundational skills in using Figma for UI design. This project will empower learners to create polished UI designs efficiently, regardless of prior experience, fostering confidence in using Figma for future projects. There are no hard prerequisites, and any individual with basic computer skills should be able to complete the project successfully, but some familiarity with Figma is recommended.
0 reviews
2 hours 40 minutes
View details

In this course, you'll dive into the critical process of translating user journeys into functional wireframes using Figma. We'll demystify the concepts behind user flow design and low-fidelity wireframing, exploring how to bridge the gap between user needs and interface structure. You'll gain a clear understanding of how user journeys inform wireframe creation, from mapping user paths to developing structural design solutions. You'll be introduced to the specific capabilities of Figma for creating detailed user flows and comprehensive wireframes within the UX design ecosystem. We'll showcase how Figma harnesses the power of design to revolutionize your productivity when developing user-centered interface structures. From analyzing user journey touchpoints to building wireframe, you'll discover the myriad ways Figma can enhance your user flow and wireframing workflow. By the end of this course, you'll be able to: - Map comprehensive user journeys that inform design decisions. - Create detailed user flows using Figma's design and prototyping tools. - Develop low-fidelity wireframes that align with user journey requirements.
0 reviews
2 hours 48 minutes
View details

In this course, learners will elevate their UX design skills by immersing themselves in the critical process of preparing design specifications and executing seamless handoffs to development teams using Figma's powerful collaboration and specification tools. They will learn how to create comprehensive design documentation, generate accurate technical specifications, and facilitate smooth communication between design and development phases. Throughout the course, learners will master the art of translating design decisions into developer-friendly assets and documentation that ensure design integrity throughout the implementation process. By the end of this course, learners will be able to: - Create comprehensive design specifications and documentation using Figma's inspection and annotation features - Generate and organize design assets, including exportable graphics, icons, and style guides for development teams - Prepare design specifications and assets that ensure a smooth transition from design to final product implementation
0 reviews
4 hours 4 minutes
View details

In this course, learners will elevate their UX design skills by immersing themselves in advanced prototyping techniques using Figma's sophisticated interaction and animation capabilities. They will learn how to create complex interactive experiences, implement advanced transitions and micro-interactions, and build prototypes that closely simulate real application behavior. Throughout the course, learners will develop highly interactive prototypes that demonstrate advanced user flows and engaging interface behaviors using Figma's most powerful prototyping features. By the end of this course, learners will be able to: - Create complex interactive prototypes using Figma's advanced prototyping features and capabilities - Implement sophisticated animations, transitions, and micro-interactions to enhance user experience - Design multi-layered interactions including overlays, component states, and conditional logic - Build realistic prototypes that accurately simulate final product behavior and functionality
0 reviews
4 hours 47 minutes
View details

In this course, you'll dive into the essential practice of user persona development and journey mapping using Figma. We'll demystify the concepts behind user-centered research translation, exploring how to transform user insights into actionable design tools. You'll gain a clear understanding of how personas and journey maps fit within the broader UX design process, from research analysis to strategic design planning. You'll be introduced to the specific capabilities of Figma for creating compelling user personas and detailed journey maps within the UX design ecosystem. We'll showcase how Figma harnesses the power of collaborative design to revolutionize your productivity when developing and sharing user-centered design artifacts. From analyzing user research data to crafting detailed user journeys, you'll discover the myriad ways Figma can enhance your persona and journey mapping workflow. By the end of this course, you'll be able to: - Analyze user research data to identify key user segments and needs. - Create comprehensive user personas using Figma's design tools. - Develop detailed user journey maps that highlight pain points and opportunities. - Apply personas and journey maps to inform design decisions and strategy.
0 reviews
3 hours 23 minutes
View details

In this course, you'll dive into the powerful world of interactive prototyping using Figma's comprehensive prototyping tools. We'll demystify the concepts behind low-fidelity prototyping, exploring how to bring static designs to life and validate design concepts through interactive experiences. You'll gain a clear understanding of the prototyping process, from connecting wireframes to creating realistic user interactions that simulate the final product experience. You'll be introduced to the specific prototyping capabilities of Figma within the UX design ecosystem, including transitions, overlays, and interactive components. We'll showcase how Figma harnesses the power of collaborative design to improve your productivity when building and sharing prototypes with stakeholders and team members. You'll discover the myriad ways Figma's prototyping features can enhance your design validation and communication workflow. By the end of this course, you'll be able to: - Create interactive prototypes using Figma's prototyping tools and features. - Design realistic user interactions including transitions, animations, and overlays. - Test and validate design concepts through interactive prototyping. - Utilize Figma's collaborative features for prototype sharing and stakeholder feedback.
0 reviews
3 hours 27 minutes
View details

In this course, learners will elevate their UX design skills by immersing themselves in the transformation process from low-fidelity wireframes to high-fidelity designs using Figma, a powerful industry-standard tool. They will learn how to enhance visual design elements, implement sophisticated styling techniques, and create polished interface designs that maintain usability while achieving visual excellence. Throughout the course, learners will work on evolving basic wireframe structures into visually compelling, detailed interface designs that reflect real-world design standards. By the end of this course, learners will be able to: - Transform low-fidelity wireframes into high-fidelity designs using Figma's advanced styling features - Apply visual design principles including typography, color theory, and spacing to enhance interface appeal - Create design systems to implement consistent visual elements and styling patterns - Utilize Figma's design tools to create polished, professional-quality interface designs
0 reviews
2 hours 48 minutes
View details

In this course, learners will elevate their UX design skills by immersing themselves in comprehensive usability testing methodologies using Figma as their primary design and testing platform. They will learn how to plan effective usability tests, conduct user sessions with Figma prototypes, and systematically gather valuable user feedback to identify areas for improvement. Throughout the course, learners will develop skills in test facilitation, data collection, and translating user insights into actionable design improvements using Figma's collaborative features. By the end of this course, learners will be able to: - Plan and design comprehensive usability testing strategies using Figma prototypes - Conduct effective usability test sessions and facilitate user feedback collection - Analyze usability test results and identify patterns in user behavior and pain points - Iterate on designs based on data-driven insights and user feedback