Jump to the end of this post for two comprehensive videos on Figma fundamentals.

What is Figma?

This is a web design program that solves a lot of common frustrations and bridges the gap between design, development, and project managers.

Before I began this web developer journey, I was a designer for over 5 years. (More on that in a future post.) Throughout this time it was/is one of my favorite tools to create with.

Highlights

• Two or more people can view and design at the same time.
• It is web-based and has no files.
• It automatically saves as you work.
• Tools are simple to use and change based on your actions.
• It incorporates flex box, positioning, and modularization principles.
• Hundreds of free plugins are available.
• Comments can be pinned anywhere.
• The cloud library allows for sharing assets and styles between projects.
• There is a dedicated panel for developers.
• The free plan includes all of its core functionality.

Why should I care as a developer?

Figma is a great tool to add to your already impressive kit. Being able to speak in basic "designer" jargon and work in their environment (literally), makes you a pleasure to collaborate with. That can help lead to more projects or roles.

As with many other great web-focused design programs (Adobe XD, Sketch) the methodologies are getting closer to development. Components are no longer confined to React and are being built with similar patterns in design programs.

Imagine how much time would be saved if you could collaborate with your design team, while they are crafting components? By the time you jump into VS Code, you would have already vetted the designs and worked through many roadblocks. (Or even be able to create the designs yourself.)

A Workshop For Developers

During my developer Bootcamp, several classmates expressed interest in Figma in anticipation of our final project.

So I put together the below (free) 2-hour webinar that goes in-depth on the basics. The goal is to introduce the core principles, from both designer & developer points of view, so you can hit the ground running.

In the workshop, we discuss…

• Setting up an account
• Overview of the major tools
• Common web design methodologies
• File types and optimizations
• Exporting for development
• Design systems with real-world examples
• Live Design Demo
• Design resources (like creating color palettes)

Topic Timecodes:

• Workshop Intro (0:00)

• Agenda (1:33)

• What is Figma? (2:44)

• Creating An Account (5:12)

• Raster vs Vector Files (6:40)

• Tool Bar Overview (12:05)

• Contextual Properties Panel (26:45)

• Understanding the Layer Panel (29:41)

• Discover Groups, Frames, Auto Layout & Components (39:05)

• Layout Grids & Constraints (58:51)

• Design Demo (1:04:57)

• Design Q&A (1:30:12)

• Exporting (1:39:05)

Update: Variants & Auto Layout

In late 2020 Figma updated their auto-layout / constraints panels and added a powerful new feature called variants.

Here is an additional overview video on these updates and how they can apply to React and empower responsive web design.

Topic Timecodes:

• Intro (0:00)
• Variants Overview (0:36)
• Variants in React (3:49)
• Auto Layout (5:43)
• Auto Layout Panel (7:35)
• Constraints & Resizing Panel (10:52)

Additional Resources

• How to Build Variants in Figma
• Figma Documentation

Header image designed with Figma