Figma Config 2023: The future of design unveiled

The Digidop team was lucky enough to take part in Figma Config 2023, in both Paris and Bordeaux, in the company of the Friends of Figma. Between discovering new features, gaining insight into the exciting challenges of the future of design and sharing experiences with the community, these events were rich in learning.

Here's a look back at some of the highlights and the lessons we've learned from them!

1 New Figma features

1.1 Dev Mode: a bridge between Design and Development

Figma has announced the arrival of Dev Mode, a space dedicated to developers. This mode is a real bridge between design and development, making the interaction between the two more fluid and productive than ever. Here's an overview of the main features:

1. Simplified inspection: easily obtain precise information on margins, paddings, styles, components, etc. by inspecting design elements in Figma. Find out more about dev mode navigation
2. Code extracts: Copy CSS, iOS and Android code directly from Figma. Even customize the appearance of plugin code. Get full control over how code is generated from mockups. Find out more about code snippets
3. Powerful plugins : Automate your development tasks with dedicated plugins. Generate code, export resources easily, and seamlessly integrate popular tools such as Jira, GitHub and Storybook. Using plugins
4. Design System : Perfect synchronization between your components and your Figma code. Ensure that all team members are working with the same elements and avoid inconsistencies. More about Figma
5. Progress status : quickly identify frames ready for development with the new tagging system. Designers can easily mark sections ready for the next step, enabling better collaboration between teams. Find out more about status sections
6. Change comparison: Easily view and compare changes made to a file by examining different frame versions. Identify changes and evolutions with precision. Find out more about comparison options

1.2 Variables

The introduction of Variables marks a major step forward in the customization and flexibility of design projects. It makes designers' work much easier, enabling them to create scalable, reusable design systems. Designers can now exploit color, number, text and Boolean variable variants to store reusable values and then define themes.

Yes, Dark & Light mode can now be extended to your projects with a simple drag & drop!

Find out more about Figma variables

1.3 Advanced Prototyping & Auto Layout

Figma also announced several other enhancements, including updates to Auto Layout and advances in prototyping. A new font selection tool and an overhaul of the file browser were also unveiled, making the user experience even more intuitive and enjoyable. Highlights include

• Define variable actions: define variable types to make prototyping more efficient
• Integrate mathematical functions: assign numerical values to a prototype, using mathematical operations (addition, multiplication, division, etc.).
• Multiple actions and conditional logic: trigger several actions on a specific variable with conditional scenarios: if ... then ...

1.4 Figma extension for VS Code

The Figma extension for VS Code (Visual Studio Code) offers the perfect intermediary between design and development. Browse design files, collaborate in real time, get design-based code suggestions and link code files to design components, all without leaving your development environment.

Find out more about the Figma for VS Code extension

1.5 "On top" features

• Notion of "Max Min": define maximum widths and heights with Max or Min Width and Max or Min Height.
• New auto-layout functionality : responsive auto-layout and relocated Auto Gap functionality
• Font selector: FINALLY! A font preview is now available from the selector. No need to test them all to get a preview.
• File Browser: improved browser for faster file browsing

1.6 Getting to grips with new features

Figma is making playground files available to the whole community to help them learn all these new features. Immerse yourself in these new features and learn how to use them step by step:

• Dev mode
• Auto layout
• Advanced prototyping
• Variables

2. Figma's future challenges

2.1 AI integration

Figma presented an overview of the integration of AI into its tools. We firmly believe that this fusion between AI and design opens the way to a new era of creativity and efficiency.

2.2 Figma: an all-in-one tool (Framer + Webflow)

With theacquisition of Diagram, Figma seems to be positioning itself to become an undisputed design leader, bringing together various tools under one roof. It really feels like Figma is trying to position itself to one day take control of the visual development space. And it looks like they could have a significant advantage over other visual development tools, because :

1. Figma already has a large community
2. A tool increasingly integrated into companies and schools worldwide
3. Historically a design tool
4. Collabroation is simple and intuitive on Figma

The presentation we attended at Figma Config even seemed to be a very similar introduction to the Webflow approach: "HTML & CSS in a visual interface, without writing code".

What do you think?

2.3 Design Ops: Present and Future

TheDesign Ops approach is now a reality and the future of design. With Figma, we see a unique opportunity to develop consulting services, offering new working methods and advice on digital marketing.

Digidop at Figma Config meetings in Paris and Bordeaux

Finally, we had the privilege of being present at Figma Config events in Paris and Bordeaux. Many thanks to @fof_pariss for making this possible!

An enriching experience, rich in encounters. It's an incredible opportunity to be part of this vibrant community.

Conclusion

There's no doubt that the future of design is here, and with Figma, and we're delighted to be at the forefront of this revolution. Thank you Figma, and see you next year for Config 2024!

Discover what's new in Config 2024