.png)
The Digidop team had the opportunity to participate in Figma Config 2023, both in Paris and Bordeaux, alongside the Friends of Figma. With new feature discoveries, insights into exciting future design challenges, and sharing experiences with the community, these events were rich in learning.
Here’s a recap of these highlights and the lessons we’ve drawn from them!
1. New Features of Figma
1.1 Dev Mode: A Gateway Between Design and Development
Figma announced the introduction of Dev Mode, a dedicated space for developers. This mode acts as a true gateway between design and development, making the interaction between the two more seamless and productive than ever before. Here’s an overview of the key features:
- Simplified Inspection: Easily get accurate information about margins, paddings, styles, components, etc., by inspecting design elements in Figma. Learn more about navigating Dev Mode
- Code Snippets: Copy CSS, iOS, and Android code directly from Figma. You can even customize the appearance of plugin code. Gain full control over how code is generated from mockups. Learn more about code snippets
- Powerful Plugins: Automate your development tasks with dedicated plugins. Generate code, easily export resources, and seamlessly integrate popular tools like Jira, GitHub, and Storybook. Using Plugins
- Design System: Perfect synchronization between your components and your Figma code. Ensure all team members are working with the same elements and avoid inconsistencies. Learn more
- Progress Status: Quickly identify frames ready for development with the new tagging system. Designers can easily mark sections that are ready to move to the next stage, enabling better collaboration between teams. Learn more about status sections
- Change Comparison: Easily visualize and compare changes made to a file by reviewing different versions of frames. Precisely identify changes and evolutions. Learn more about comparison options
1.2 Variables
The introduction of Variables marks a significant advancement in the customization and flexibility of design projects. It greatly simplifies the designer's work, enabling the creation of scalable and reusable design systems. Designers can now utilize color, number, text variants, and boolean variables to store reusable values and subsequently define themes.
Yes, Dark & Light mode can now be extended to your projects with a simple drag & drop!
Learn more about Figma variables
1.3 Advanced Prototyping & Auto Layout
Figma also announced several other improvements, including updates to Auto Layout and advancements in prototyping. A new font selection tool and a redesign of the file browser were also unveiled, making the user experience even more intuitive and enjoyable. Key features include:
- Define Variable Actions: Allows you to set variable types to make prototypes more effective.
- Integrate Mathematical Functions: Assign numeric values to a prototype using mathematical operations (addition, multiplication, division, etc.).
- Multiple Actions and Conditional Logic: Trigger multiple actions on a specific variable with conditional scenarios: if ... then ...
1.4 Figma for VS Code Extension
The Figma extension for VS Code (Visual Studio Code) serves as a perfect intermediary between design and development. Navigate through design files, collaborate in real time, receive code suggestions based on designs, and link code files to design components—all without leaving your development environment.
Learn more about the Figma for VS Code extension
1.5 "On Top" Features
- Max Min Concept: Set maximum and minimum widths and heights with Max or Min Width and Max or Min Height.
- New Auto Layout Feature: Responsive auto layouts and a relocated Auto Gap functionality.
- Font Selector: FINALLY! A font preview is now available from the selector. No more need to test every font to get a preview.
- File Browser: Enhanced browser for quicker file searches.
1.6 Getting Started with New Features
Figma provides the entire community with playground files to learn all these new features. Immerse yourself in these new functionalities and learn to use them step by step:
2. Future Challenges for Figma
2.1 AI Integration
Figma presented an overview of AI integration into its tools. We strongly believe that this fusion of AI and design paves the way for a new era of creativity and efficiency.
2.2 Figma: An All-in-One Tool? (Framer + Webflow)
With the acquisition of Diagram, Figma seems poised to become an undisputed design leader, uniting various tools under one roof. It genuinely feels like Figma is trying to position itself to take control of the visual development space someday. And they appear to have a significant advantage over other visual development tools because:
- Figma already has a large community.
- The tool is increasingly integrated into businesses and schools worldwide.
- It is historically a design tool.
- Collaboration is simple and intuitive on Figma.
The presentation we attended at Figma Config even felt like a very similar introduction to Webflow's approach: "HTML & CSS in a visual interface, without writing code."
What do you think?
2.3 Design Ops: The Present and Future
The Design Ops approach is now a reality and the future of design. With Figma, we see a unique opportunity to develop consulting offerings, proposing new ways of working and digital marketing advice.
Digidop at the Figma Config Events in Paris and Bordeaux
Finally, we had the privilege of attending the Figma Config events in Paris and Bordeaux. A big thank you to @fof_pariss for making this possible!
An enriching experience full of connections. It is an incredible chance to be part of this vibrant community.
Conclusion
Without a doubt, the future of design is here, and with Figma, we are thrilled to be at the forefront of this revolution. Thank you, Figma, and see you next year for Config 2024!
Discover the New Features of Config 2024
