Figma just made life easier for web designers

🧑‍💻 Figma releases a few features that make life easier for web developers

Earlier this week Figma held their annual Config conference in San Fran.

They usually use this as an opportuntity to announce their biggest feature updates for the year, so it’s an event that a lot of people pay close attention to.

Some people were anticipating they might announce a Framer competitor (or just use Adobe’s pockets to buy them outright), but that didn’t quite happen this time around.

Instead they released a number of features that make life easier for those who are actually building the websites.

You can find full details on everything that’s new here (as well as some helpful playgrounds), but here are the new features I can see myself using right away.

1) Variables

This is the big papi.

Variables allow you to create an actual design system within Figma.

You can create all your different spacing sizes and apply them to different elements.

If you ever want to change your regular section spacing from 80px to 96px, all you need to do is change the value and it’ll apply to all sections that use that variable.

Another use case is for different color modes.

As an example, you can create two variable modes: Light and Dark.

Then when you add your brand’s primary color, you can set the the color values for each mode.

When you switch the variable mode for a layer, you can see your colors switch instantly!

2) Auto Layout Wrapping

This is a simple one, but previously you could only use Auto Layout for one row of items.

If you wanted a blog post grid, you needed to create a frame for each row.

Now you can simply put all cards inside your one Auto Layout frame and have them wrap automatically.

3) Dev mode

I found Figma’s Inspect mode fairly easy to work with before, but Dev mode takes things one step further.

The new Inspect tool functions more like what you’d see in your browser.

You can see a box model layout for size, paddings, margins, and borders – as well as any CSS properties.

What’s sneaky good about this is that you can also now convert pixel units to REM (!), and you can link to a resource that might be useful when building out the design (aka you could link to a live version that you took inspiration from).

Overall Thoughts

I saw a few designers on Twitter disappointed by these updates.

They felt that it only makes Figma more complicated to use, and doesn’t help aid them in the design process in any way.

I can totally understand that. Over-complication is what has led some people switching from Notion back to Apple Notes.

At the same time, Figma has become the defacto tool for design on the internet.

As much as it’s used for design, it’s used by developers who need to bring the layout to life.

I personally think Figma has done a good job of balancing the two. The UI hasn’t changed a whole ton.

They’ve unlocked features that are accessible for those who need them.

If all you want to do is design, I wouldn’t say Figma has gotten more difficult for that.