Why developers should know Figma

Enabling a constructive dialogue between UI design and development

Originally published via Smashing Magazine

We must understand the possibilities and limitations of each other’s tools to work hand in hand so let me show you the design side of things and all the little Figma treasures you might not yet understand fully.

1. We work with components & variants
2. We work with Styles in Figma, but they are not very smart
3. We can set up and test responsive Design!
4. We have no breakpoints in Figma but can still test
5. We can work with actual data (sort of)
6. soft grid vs. hard grid
7. Why we sometimes mess up line-height
8. All we have in Figma is px, no relative units
9. We can set up pretty sweet Prototypes in Figma
10. We will invite you to ‘view only’ rights, giving you access to everything you need as a developer

1. We work with components & variants in Figma

Components in Figma

In Figma, we can set up reusable UI components and create instances. components can also be nested. Hence we can follow a nice atomic design path.

We also have variants
We can also create component sets containing variants, swapping them easily throughout our design via the properties panel. Therefore, all states of a component can be found in one place for documentation.

Figma variants can be one-dimensional or multi-dimensional, adding several properties.