Left
All Post

Figma Config 2023 Updates Explained

Menu
Figma
clock
7 min read
upload
August 11, 2023

Every year, Figma holds a special event for their users called Config, where they showcase the major updates made on their platform. Whether you attended the latest Config 2023 or not, this article covers all the latest developments, no need to spend hours sifting through hours of footage!

Figma Config 2023 in a nutshell

This year’s Config brings the design and development world closer than ever before. With its major development mode updates and more, Figma closes the gap between designers and developers.

Figma’s latest updates are not just for developers. Basic minor details with big impacts have also been incorporated into the platform to cater to the needs of designers and enhance the overall user experience, allowing them to supercharge their design process.

What are the Figma Config 2023 updates

As we dive into Figma’s latest developments, we’ll explore a range of features contributing to a designer and developer’s everyday use of the tool. Starting from basic improvements that enhance user interaction, we’ll move our way up to the more advanced changes geared to significantly influence the dynamics of Figma.

Brand New Font Picker

Old vs New Update - Figma Font Picker Comparison

After years of designers patiently waiting for a redesign of Figma’s font picker, they’ve finally done it.

Old Figma Font Picker Preview

Prior to the update, Figma’s font selection tool consisted of a static, monotonous list of font names. While each name corresponded to a different font, designers were required to manually select each font to see how it looked on canvas. This takes a significant amount of time for a seemingly simple task like picking a font.

With Figma’s latest updates, designers now benefit from a more dynamic and efficient font preview within the font picker tool. Additionally, a search option has been introduced, allowing designers to easily pick a font without having to scroll through a list of thousands of fonts.

File browser redesign

Figma File Browser Redesign

If your Figma account is home to hundreds of projects, this new feature is perfect for you.

The recent file browser redesign allows you to easily access your shared files and projects through the new tabs in Figma’s dashboard. Search, Recent, Notifications, and Drafts have also been incorporated into the Account Overview dropdown so you can have quick access to any file or project that you’re looking for.

Auto Layout Update

Figma Auto Layout Update

Figma has also updated Auto Layout, reducing the effort needed for simple tasks like adjusting sizes for your responsive designs.    

Previously, Figma’s Auto Layout didn’t have the feature to automatically break contents into a new line or “wrap” contents within a certain area when turned responsive. As a result, when these designs are scaled down, some components get crowded, cut off, or appear broken.

Figma Auto Layout Wrap Update

In the latest update, Figma provided a wrap option for Auto Layout, which allows responsive designs to automatically adjust content into a new line to avoid messy designs. Apart from this, Figma’s Auto Layout updates now include a setting for minimum and maximum widths and heights of contents. This added control restricts the size of design elements, even in responsive states, creating a more structured and cohesive layout.

Variables (Text, Numbers, Colors, Booleans)

Figma Variables

Variables are a game-changing addition to Figma, empowering designers to create reusable values such as colors, text, dimensions, and more — all of which can be applied to various design properties and prototyping actions.

In Figma, variables now function similarly to design tokens, housing distinct values for the appearance of design elements like text and spacing. As of date, Figma has four different types of variables available: Color, Number, String (Text), and Boolean.

Each variable type can be applied to designs as theming options that cater to different design requirements. Whether a different screen size or even a different language, the latest addition of Figma Variables allows designers to switch seamlessly between different design element properties.

Let’s use a case sample

Figma Variable Case Sample (Figma Course & Figma User Research Course)

For instance, you have an existing design for a regular user and are tasked to create a separate design for a super user. In your regular user design, you have the following content:

  • Credit amount: $500
  • Course prices: $300 and $650

However, for the super user, you were asked to change the values of these numbers and change the ‘Regular user’ text to ‘Super user’.

How do Variables solve this

Figma Variables Sample

With Variables, you can input the values for content that you want to change, whether text, number, or color, and apply them to your new design in simple clicks.

Figma Variables Sample Input Values

By building a database of various variables for different design elements, you can automatically modify your designs as needed.

Advanced Prototype Capabilities Using Variables

Figma Variables - Figma Advanced Prototypes

Apart from the capability to modify the contents of your design easily, variables also provide the ability to create advanced dynamic prototypes. Using mathematical expressions, designers can now enhance their prototypes to create more advanced user interactions for their design such as buying interactions and more.

Similarly, Boolean variables can also now be used to improve prototypes. By utilizing Boolean variables, you can assign 'true' or 'false' values to specific design elements. Figma will then recognize when to trigger the values and their opposite values in prototype interactions.

Dev Mode for Seamless Design-to-Development Translation

Figma Dev Mode - Design-to-Development

One of the highlights from Figma Config 2023 is the introduction of Dev Mode, a feature that has the development community buzzing. This new feature is an exclusive space for developers to navigate through design files and translate designs into code seamlessly.

This new Dev Mode closes the gap between designers and developers, allowing them to work and collaborate in one space. This integration enhances communication clarity between the two groups, ultimately reducing the likelihood of crucial design details getting lost during developer handoff.

Dev Mode acts like a browser inspector for designs in Figma, where developers are presented with the information they need to transform a design into code. This includes access to details for colors, spacing, dimensions, assets, and more. The feature also gives designers the ability to export assets from the design all in one place.

Within Figma's ecosystem, designers can easily mark their design as 'Ready for Dev' using Figma’s Sections feature. This helpful tag allows developers to pinpoint the specific portions of the design file that are ready for coding. Moreover, developers can readily compare design modifications, speeding up the iterative process.

Seamless Coding with Dev Mode and VS Code (Visual Studio Code plugin)

Figma Dev Mode and VS Code plugin

When developers are in Dev Mode, Figma is integrated with tools that developers need to code a design. This includes a Visual Studio Code (VS Code) plugin.

This feature allows developers to seamlessly code with the design right next to their code screen. Selecting any design element from the Figma design will reveal the code of the element, which developers could simply copy and paste into their entire code.

AI Integration in Figma

AI Integration in Figma

In 2023, Artificial Intelligence (AI) is the latest buzz. And as many companies begin to integrate AI into their platforms, Figma is not one to fall behind.

As announced during the Figma Config 2023, Figma acquired Diagram–a company known for building many AI-powered design tool plugins and extensions in Figma. This acquisition leads to the integration of AI into the platform and promises many exciting features that designers could look forward to, including:

  • AI for idea generation  - AI may soon be a handy tool for generating and synthesizing concepts for your design, removing the need for lengthy notes that take up your time.
  • AI for design efficiency - In future updates, AI might soon aid with accelerating your design process by helping you generate components through simple prompts in your design based on its understanding of the content of your existing design.  
  • AI for development - For developers, AI is being looked into helping them create production-ready code that not only increases production efficiency but also provides better production codes.

Expand Your Expertise with Specialized Figma Products

Now that Figma has made significant updates to its platform, you might wonder how else you could elevate your design process in Figma. That’s where UI kits and Design Systems like Designership’sShipfaster UI - Figma Design System and Outline Wireframe Kit come in handy.

Leverage Figma’s updated features and use design elements within both of these kits that allow you to work faster and better. From thousands of responsive components to hundreds of media assets, icons, colors, and more - these products are sure to level up your designs, all while enhancing your work efficiency.

In Designership, we’re committed to helping you reach your career goals to give you a boost in the industry, which is why our products are continuously updated to keep up with the latest trends and best practices of the industry.

Subscribe to our newsletter and other channels to be updated on our products, courses, articles, and more!

Michael Wong
Founder of Designership & z0 Studio

Mizko, also known as Michael Wong, brings a 14-year track record as a Founder, Educator, Investor, and Designer. His career evolved from lead designer to freelancer, and ultimately to the owner of a successful agency, generating over $10M in revenue from Product (UX/UI) Design, Web Design, and No-code Development. His leadership at the agency contributed to the strategy and design for over 50 high-growth startups, aiding them in raising a combined total of over $400M+ in venture capital.

Notable projects include: Autotrader (Acquired. by eBay), PhoneWagon (Acquired by CallRails), Spaceship ($1B in managed funds), Archistar ($15M+ raised) and many more.

You can learn more about me on:
Did you like this article?
Spread the word!
sunsun
moonmoon
Michael Wong
Writer
Contributor
Catch the latest updates
Subscribe to our newsletter and stay in the loop.
Thank you!
Oops! Something went wrong while submitting the form.
Table of content
socialsocial
Blogs

The design pulse

Tips, trends, and thought pieces on UX/UI design.
What's New

New website, course and product updates - April 2024

A lot happened this month. Take a look at what's coming.
Michael Wong
Apr 17, 2024
·
7 min read
UX Design

Using Quantitative and Qualitative Research in UX Design

What's the difference between qualitative and quantitative methods in UX research? Learn how to choose the best approach to enhance your user experience design in 2024.
Michael Wong
Feb 23, 2024
·
7 min read
UX Design

A Complete Guide to Primary and Secondary Research in UX Design

Unlock the secrets of UX success with our in-depth guide on primary and secondary research methods. Discover tools, strategies, and examples to elevate your user experience design projects. Perfect for beginners and seasoned professionals alike.
Michael Wong
Feb 19, 2024
·
7 min read
UI Design

10 Best Free Fonts for UI Design (2024 Edition)

UI Design Fonts don't have to be expensive to make your design stand out — some of the best ones are free. Find them here.
Michael Wong
Jan 30, 2024
·
10 min read
UX Design

The Ultimate Guide to UX/UI Design in 2024

Dive into the future of UX/UI design with our comprehensive guide for 2024. Discover cutting-edge trends, tools, and techniques that will shape the industry and empower you to create stunning, user-friendly designs.
Michael Wong
Jan 25, 2024
·
7 min read
UX Research

16 Best UX Research Tools in 2024: Gather Faster & Better Insights

Discover the 16 best UX research tools in 2024. From analytics to user testing, our guide helps you choose the right tools to elevate your user experience research and design.
Michael Wong
Jan 9, 2024
·
7 min read
UX Research

15 Most Effective UX Research Methods: Pros and Cons

Uncover the diverse world of UX research methods. From user interviews to usability testing, learn how different techniques can enrich your UX design process for optimal results.
Michael Wong
Jan 5, 2024
·
7 min read
Figma

The Ultimate Guide to Figma for Beginners (Updated 2024)

Unlock the full potential of Figma with our ultimate guide. Dive into the world of UI design and discover how Figma's powerful tools can transform your design process.
Michael Wong
Dec 15, 2023
·
7 min read
UX Research

The Ultimate Guide to UX Research (Updated 2024)

Master the art of UX research with our ultimate guide. Explore methodologies, utilize the best tools, and adopt industry best practices for impactful user experience research.
Michael Wong
Dec 8, 2023
·
15 min read

Join our newsletter

Get the latest updates, exclusive offers, and more straight to your inbox!
Please insert valid email
WELCOMESHIP5
Copy
Oops! Something went wrong while submitting the form.