The latest Figma Config 2022 news!

News
May 14, 2022
3 min
figma design with text new figma 2022 on light purple background
Key points

New Features to Improve Design

The web design tool Figma has just announced new features that will boost your mockups and designs in the coming days!

1. Dark mode 🌘

Dark and Light mode are finally available on Figma! A highly anticipated feature that will certainly improve design comfort. Here’s how to activate dark mode on Figma.

We show you how to activate dark mode on Figma.

capture d'écran du nouveau dark mode figma 2022
Dark mode | Figma 2022

2. Improved Auto Layout

Combined with Constraints, Figma's auto layout was already a breakthrough feature, allowing for responsive and manageable mockup designs. However, this feature was fairly complex and required more time for development. Figma has now enhanced this feature, making it:

More intuitive: Auto layout can now be applied with a simple click on your graphic elements.

More powerful: Manage auto layout settings directly on the Canvas.

More complete: Advanced auto layout options allow you to define negative spacing and even set absolute positions for complex elements.

  • More intuitive: Auto layout can now be applied with a simple click on your graphic elements.
  • More powerful: Manage auto layout settings directly on the Canvas.
  • More complete: Advanced auto layout options allow you to define negative spacing and even set absolute positions for complex elements.
capture d'écran de la nouvelle fonctionnalité auto layout figma 2022
Auto layout | Figma 2022

3. Component Properties

Create variants for each type of component and adjust them on your mockup. For example, assign different styles to the same button by adjusting its properties:

  • Primary / Secondary button
  • Button size
  • Icon configuration
  • Default / active / inactive button
  • on light / dark backgrounds
  • etc.

These properties will greatly simplify your design systems!

capture d'écran de la fonctionnalité propriété variants 2022 sur figma
Component | Figma 2022

4. Simplified Design System with Typography Variants

In your wireframes and web mockups, you use different font sizes and styles for Headings H1, H2, H3, Rich Text, etc.

The Variable Fonts feature now lets you create font variants, or different formats depending on usage. Once variants are created, you can assign them anywhere in your design with a click.

Just like a component, you can modify and adjust each variant from your design system to dynamically update your mockups.

fonctionnalité de variant pour les polices sur figma
Typeface variant | Figma 2022

5. Smoother Animations

Transitions are now smoother and more natural—guaranteed “Wow” effect for your prototypes!

6. Individual Lines

Previously, adding lines to a Figma element was done automatically on all sides. Now, you can add a line to only one or several selected sides. No more need to draw a line beneath a button for customization; now you can manage it directly with a personalized line!

capture d'écran de la nouvelle fonctionnalité ligne individuelles figma 2022
Individual Lines | Figma 2022

7. Outline Mode Update of Figma

Outlines in Figma now show all elements on the canvas, which is especially useful when visuals overlap. No more searching for a component among the layers; simply press Shift + O to activate/deactivate Outline Mode.

capture d'écran de la nouvelle fonctionnalité contour sur Figma 2022
Outline Mode | Figma 2022

8. International Keyboard Shortcuts (Beta)

Design faster no matter your keyboard! Figma expands its shortcut features internationally with this first Beta version for German, Japanese, and French keyboards.

9. Favorite Files

Easily access all your favorite Figma files, now accessible from the left navigation bar on your dashboard.

nouvelle fonctionnalité favoris sur figma 2022
Favorites | Figma 2022

10. Desktop Figma Application

Now available for everyone, you can retrieve, pin, and drag tabs onto your desktop to personalize and organize your workspace.

New Features to Enhance Collaboration on Figma and FigJam

Figma is a collaborative design tool, and these new 2022 features push the boundaries of collaborative design even further!

11. New FigJam Widgets

Power up your FigJam with the new widgets! FigJam now integrates directly with tools like Jira, Asana, and Github, allowing you to update projects live from the FigJam designer.

Additional widgets are also available to aid creation and collaboration on FigJam, such as the new “Voice Memo” feature, which lets you leave a voice message directly in FigJam.

catpure d'écran des nouveaux Widget Figjam 2022
Widgets | FigJam 2022

12. Plugin to Generate FigJam Widgets from Figma

Generate a FigJam widget that you’ve designed on Figma with a single click using this new plugin!

capture d'écran de l'icone digidop avec le widget générateur de figma
Widget FigJam Generator | Figma 2022

13. Observation Mode Evolution with Spotlight Mode

Spotlight Mode is an enhanced version of Figma’s Observation Mode, allowing you to follow another person’s view on the designer. When collaborating on the Figma designer, you can activate Spotlight Mode to request other users to follow your view. All participants will see your presentation live and interactively, with the option to add real-time comments.

capture d'écran du nouveau mode spotlight 2022 sur figma
Spotlight Mode | Figma 2022

14. Feedback Approval

Approve or reject design changes or feedback. An additional feature to enhance collaboration capabilities on Figma.

15. Password Protection for Shared Files

You can now add a password to all your shared files. This feature, available with Figma’s PRO version, restricts access only to users with the file password, in addition to the shared link.

capture d'écran de la fonctionnalité 2022 de mots de passe sur un fichier partagé figma
Password Protection | Figma 2022

Upcoming Features…

Some of these features are still in Beta but will be fully released in the coming weeks! New web accessibility features are also on the way...

Thomas Labonne
Thomas Labonne
Co-founder

Suggested articles

Webflow Localization, Credial's Use Case
Documentation
Webflow

Webflow Localization: Practical Guide & Credial's Use Case

Webflow Localization: Practical Guide & Credial's Use Case
Visuel showcasing digidop.fr switching to digidop.com
News
Digidop

Digidop.fr is now Digidop.com

Digidop.fr is now Digidop.com
Photo of the Digidop team with the Digidop Logo 2024
News
Digidop

A Look Back at an Exceptional 2024 and Vision 2025

A Look Back at an Exceptional 2024 and Vision 2025

Want to turn your website into your most valuable asset?

Contact us today