Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices. In this course, we will explore the fundamentals of Figma’s toolset that you can use for various design functions.
The Beginner's Guide to Figma
24m 19s
English
Paid
The Beginner's Guide to Figma is a 10-lesson 24 minutes self-paced course by egghead.io. Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices.
Course facts
- Lessons
- 10
- Duration
- 24 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- egghead.io
- Price
- Premium
We will start from scratch, then walk through scenarios you may encounter when designing a website or application. We will cover building reusable designs — known as “components” in Figma — all the way up to prototyping your designs to show screen transitions and animations between state.
By the end of the course, you will understand the basics of Figma so you can use it to your advantage when building your next app or website.
Additional
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=0:1
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=50:3
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=113:26
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=115:30
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=76:12
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=141:44
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=143:15
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=143:70
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=163:86
https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=163:87
Who teaches The Beginner's Guide to Figma? egghead.io
egghead.io is a US-based subscription video platform focused on short, focused screencasts on JavaScript ecosystem topics. Founded in 2012 by John Lindquist (a Google Developer Expert) and run by Joel Hooks, egghead pioneered the short-screencast format that most modern developer-education platforms now use — courses are typically broken into 2-5 minute lessons that each cover one specific concept or API.
The instructor roster includes many of the most cited names in the JavaScript ecosystem — Kent C. Dodds (whose Testing JavaScript launched on egghead before EpicWeb.dev), Andrew Del Prete, Hannah Davis, Lukas Ruebbelke, Tomasz Łakomy, Andy Van Slaars, and many others. Course material covers React, Next.js, TypeScript, Node.js, GraphQL, Vue, the testing tracks, RxJS / observables, and a long list of smaller libraries and tools.
The CourseFlix listing under this source carries over 20 egghead courses spanning that range. Material is paid; egghead itself runs on a monthly / annual subscription on the original platform. The bite-sized format suits developers learning incrementally during work hours rather than committing to multi-hour video sessions.
What lessons are included in The Beginner's Guide to Figma?
0:00
/ #1: Create a Mobile, Tablet and Desktop Frame in Figma
All Course Lessons (10)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Create a Mobile, Tablet and Desktop Frame in Figma Demo | 01:01 | |
| 2 | Build Reusable Designs with Figma Components | 03:47 | |
| 3 | Add a Reusable Figma Component to Multiple Frames | 02:15 | |
| 4 | Create a Simple Icon with Figma Ellipse and Pen Tool | 02:02 | |
| 5 | Duplicate Grouped Vectors to Create a Patterned Logo in Figma | 02:15 | |
| 6 | Establish a Typography System in Figma with Text Styles | 02:59 | |
| 7 | Create Figma Color Styles to Reuse Across Frames | 04:05 | |
| 8 | Reuse a Drop Shadow in Figma with Effect Styles | 01:55 | |
| 9 | Prototype a Screen Transition in Figma | 02:17 | |
| 10 | Export and Share Figma Frames | 01:43 |
Unlock unlimited learning
Get instant access to all 9 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRecommended next
What courses are similar to The Beginner's Guide to Figma?
Updated 2y agoMastering Figma
By: Level Up Tutorials (Scott Tolinski)This video is about Mastering Figma Introduction. Figma has similar uses to adobe XD and I'll be bringing you more videos to go more in-depth on how to use.3h 37m
Updated 3y agoUI UX Design Hybrid from Figma to HTML CSS and JavaScript
By: UdemyLearn how to become a Full-Stack Designer with User Interface Design, User Experience Design, Web Development, Bootstrap31h 51m
Updated 2y agoDesign a Responsive Airbnb Website with Figma
By: Zero To MasteryJoin this course to explore advanced Figma features by designing a responsive website for a fictional rental service. Learn the full design process from initial11h 17m
Updated 3y agoComplete Web Design: from Figma to Webflow to Freelancing
By: UdemyIt gives you a huge self-satisfaction when you look at your work and say, "I made this!". I love that feeling after I'm done working on something.19h 10m5/5
Updated 2y agoAdvanced Figma Video Course + Let's Design Together Add-on
By: Andrija PrelecBecome a Figma master and ascend the career ladder in design with our comprehensive course.20h 58m
Updated 2y agoLearn Figma - UI/UX Design Essential Training
By: UdemyFigma is a very powerful application that runs online. There are virtually no platform boundaries when it comes to using figma because you can design within a w3h 55m5/5
Updated 2y agoFigma for Web Designers
By: Flux Academy (Ran Segall)If you've ever found yourself overwhelmed by Figma's extensive features or wished your workflow could be more efficient for web design projects… Then this.5h 31m5/5
More courses by egghead.io
Updated 3y agoRxJS Beyond the Basics: Operators in Depth
Operators are the core building blocks for reacting to data in your JavaScript applications. In this course you will learn what operators are, and then take a t1h 30m
Updated 3y agoHow to Use npm Scripts as Your Build Tool
In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce52m
Updated 3y agoReact: Flux Architecture (ES6)
As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How49m
Updated 3y agoHow to Contribute to an Open Source Project on GitHub
“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not38m
Updated 3y agoUse Grep for Fast Search from the Command Line
CMD+F in your text editor can only get you so far! In this course, we will learn to use grep and find, two powerful command-line utilities.24m
Updated 3y agoWrangle your terminal with tmux
Learn to manage your terminal sessions and work more effectively from the command line using tmux. If you use the command line at all, tmux can make your life e27m
Frequently asked questions
What prerequisites are needed for enrolling in this course?
This course is designed for beginners with no prior experience in Figma or design tools. Basic computer skills and familiarity with web navigation are sufficient to get started.
What kind of projects will I build during the course?
Throughout the course, you will engage in creating various design elements such as mobile, tablet, and desktop frames, reusable components, simple icons, patterned logos, and prototypes for screen transitions. These projects will help solidify your understanding of Figma's design capabilities.
Who is the target audience for this course?
The course is aimed at anyone interested in learning the fundamentals of Figma, particularly those new to design or looking to transition from other design tools to a collaborative platform like Figma.
How does the depth of this course compare with other Figma courses?
This course focuses on the basics of Figma, covering fundamental tools and functions such as creating frames, components, and prototypes. It is suitable for beginners, whereas more advanced courses might cover complex design systems or advanced prototyping techniques.
What specific tools or platforms are covered in this course?
The course specifically covers Figma's design tools, such as the ellipse and pen tools for icon creation, typography and color styles for design consistency, and effect styles like drop shadows. You will also learn how to export and share your designs using Figma.
What topics are not covered in this course?
The course does not cover advanced functionalities such as Figma's auto-layout features, advanced prototyping interactions, or integration with other tools like Sketch or Adobe XD. It is focused on providing a solid foundation in the basics of Figma.
How can skills from this course benefit my career or other courses?
Skills gained from this course will benefit careers in UI/UX design, graphic design, and any role requiring collaborative design tools. The foundational knowledge of Figma can also serve as a stepping stone for more advanced design courses or tools, enhancing your design proficiency and versatility.