We’ll be working with this Figma project file. You can and should make a copy of it and follow along.
I’m Steve, the head of frontend engineering at Temporal I’m excited to guide you through Figma from a developer’s perspective. Our journey into Figma is not just about design; it’s about creating a bridge between design and development, making it easier for teams to collaborate and build amazing user interfaces.
Most of what we’re going to talk about today is included for free with any Figma account. That said, there are a few features like Dev Mode and Variable Modes that require a paid account.
There is no expectation that you have a paid account, but we will be exploring a few of these features during this course.
Why Figma for Developers?
A lot of the content out there around using Figma is—naturally—written by and for designers. In this course, we’re going to to learn how to use Figma from the perspective of an frontend or full-stack software engineer. Yes, that means we can make jokes about prototypal inheritance and other peculiarities of the JavaScript programming language.
Not only will you learn how to use Figma, but my goal is to empower you to be a better collaborator with the designers on your team when it comes developer handoff. In addition to learning how to use Figma, we’ll pick up a bunch of skills that will make it easier to implement designs created in Figma into our applications and software projects. You’ll also learn how to use Figma for those situations where you need to play the role of a designer.
If you’re a designer, this course is also for you. You’ll learn how to structure your designs to make your friendly neighborhood developers’ lives easier.
By the end of this course, you’ll not only be proficient in using Figma but also understand how to translate designs into code, contribute to a design system, and work effectively with designers. Whether converting from Photoshop or integrating with tools like Storybook, you’ll gain insights into making Figma a pivotal part of your development workflow.
Prerequisites
All you need is a Figma account and a web browser. Optionally, you might to install the Figma desktop application as well as Figma for Visual Studio Code.