And just like that, Config 2023 has come and gone.
For those who don’t know what Config is, think of it like Figma’s version of Apple’s WWDC or their annual September product launch event. Designers from all around the globe gather together to watch Figma unveil redefining workflows, new features and listen in on talks from some of the brightest minds in product and UX/UI design. For Figma fans, like myself, Config is like the Superbowl. There is genuine excitement and anticipation for this event, watch parties form in offices in all major cities and for some of us on the other side of the world, it’s the one event that will get designers out of bed at 2 am.
With over 40 keynotes, it's nearly impossible to put all my highlights in a single blog post so, to avoid writing a novel on Config 2023, I’m going to share with you which of the new features that were announced in the opening keynote I’m most excited about and tell you why they should matter to you.
The New Font Picker
When transitioning into UX/UI, I knew about six font families off the top of my head: Inter, Arial, Helvetica, Comic-Sans, Jokerman and Times New Roman, which made up my staple diet in Microsoft PowerPoint and Word. While these fonts were fine for writing questionnaires and reports (well, maybe not Jokerman) when it came to mocking up designs for my portfolio, it was time to spread my wings a little further, however, with Figma’s old font picker and its lack of previewing features, this was incredibly difficult.
Without having an intimate knowledge of what every font is called, I had to manually go through the extensive list of fonts, clicking and trying hundreds until I found the one that was ‘jussssst right’. Community-built plug-ins, like Better Font Picker, made the process a little less painful, but still added additional steps to my workflow and created bottlenecks. After three years in development, this issue is now a thing of the past with Figma’s new font picker. Finally featuring a font previewer you’ll now be able to peruse all the available fonts in Figma to your heart's content. Finding that perfect font will now be much more enjoyable.
Dev Mode
Whether you’re just starting in the industry or are a seasoned veteran, you would have come across memes or commentary about the relationship between designers and developers. Despite both being an integral part of the product development process, often these two roles clash, with designers prioritising delivering a phenomenal experience while developers are more concerned with the technical feasibility and implementation of a design. As you can imagine, these differing perspectives often result in forced trade-offs and leave one party with a sour taste in their mouth. If only there was something that could help designers and developers better collaborate to achieve the best possible outcome.
The single biggest announcement from Config is what Figma is calling ‘Dev Mode’, which aims to help make the design to development process much faster. By adding features that help designers better prepare their work for development, providing access to more details developers need to start building, such as measurements, specs, styles and product-ready code, and an improved hand-off experience, the idea is to make it as easy as possible for a design to come to life. As designers, it's in our best interest to build great relationships with developers and Figma’s new Dev Mode will help bridge any gaps. There’s no time like the present, so jump into Dev Mode (while it's still free).
Variables
Finally, it’s time to discuss the new feature that I’m the most excited about…Design Variables.
In conversations with other designers since its announcement, there is a consensus that Variables will have the greatest impact on our workflow and fundamentally change how we use Figma. However, it’s not all sunshine and rainbows…for users this will likely be the steepest learning curve we’ve seen to date within the software. But, I’m so ready to get stuck in. Essentially, a variable in Figma stores reusable values that can be applied to all kinds of different design properties and can make elements behave in certain ways when prototyping.
Gone are the days of having to create two separate designs for dark mode and light mode. Now, all you’ll have to do is simply define the variable properties and with a click you can instantly trigger changes in your design, like going from mobile to desktop. Although this may not sound like much, when you put it into the context of the hours you’ll save designing, checking for consistency and creating complex prototyping flows, it hits home.
If you only take one thing away from this post, it’s that the sooner you learn how to use Figma’s Variables feature the better. Don’t be a late adopter and get left behind.
Honourable Mention
The new advanced prototyping features are a game-changer. When used in combination with Variables…wowie, you’ll be designing with power!
Wrapping Up
What we’ve discussed today only scratches the surface of what was shared at Config 2023. Do yourself a favour and jump onto Youtube or Figma’s website and tune into some of the other scintillating presentations. I know, I’ll be going full Sponge-bob Square Pants, soaking as much information up as I can.
