Exploring the Figma Config 2023 Updates: Elevating Product Design at Doctolib
In the fast-paced world of design, being at the forefront of cutting-edge tools and technologies is an imperative for success. As a Product Designer at Doctolib, I thrive on embracing the latest advancements in the industry to drive innovation and deliver exceptional user experiences. One such tool that has significantly impacted the workflow of designers world-wide is Figma. Its collaborative nature and powerful features have revolutionized the way we work, enabling seamless collaboration, efficient iteration, and enhanced productivity. Now, with the latest features released at Figma Config 2023, we are poised to elevate our design processes even further. In this article, I will dive deep into some of the exciting new features and improvements which were released this year, exploring how they will shape and improve our ways of working at Doctolib.
Dev mode, Enhancing Collaboration and Streamlining Design Handoff:
Efficient design handoff processes play a pivotal role in facilitating seamless collaboration between designers and developers. With the introduction of Dev Mode in Figma Config 2023, a powerful new feature has emerged. Dev Mode now supports SwiftUI, developers can set their preferred language and unit for code snippets under the Code settings in the Inspect panel.
At Doctolib, our design team currently relies on a plethora of components in our handy 🧰 Toolbox, designed to facilitate a seamless design-to-development handoff. These components include a Title & Header Section with distinct “levels” like 🚧 Vision, 🧑💻 Dev Ongoing, and 🚀 Live, allowing effective communication with developers, product managers, and even fellow designers, indicating our progress in the design process. Additionally, we employ Hand Off Cards, complete with various tags and detailed explanations, along with links to our Design System Guidelines and Storybook references, further enhancing the efficiency and effectiveness of our design handoff process.
Config 2023’s latest releases have empowered our design team to effortlessly communicate with developers about which content is “Ready for Development,” with pages named exactly that, conveniently located in the left side panel. By leveraging robust integrations with Jira, Storybook, and GitHub, designers can seamlessly integrate their Figma designs with component code and developer documentation. Furthermore, developers can now incorporate Figma into their workflow through Figma’s Visual Studio Code plugin. They can navigate and inspect design files, collaborate with designers by seeing and responding to comments in real time, get code suggestions based on designs, link code files to design components, and track design changes — all without leaving Figma. These advancements significantly reduce the likelihood of misinterpretation, expediting the implementation process and fostering faster product iterations.
Supporting User-Centricity and Empathy with Advanced Prototyping
At Doctolib, user centricity is at the heart of our design philosophy, and we recognize its pivotal role in differentiating between good and bad design. By understanding and sharing our users’ feelings, we foster a unique approach that sets us apart from design teams solely driven by aesthetic preferences and subjective opinions.
Prototyping is an essential part of our design process at Doctolib, enabling us to validate designs, interactions, and user flows before diving into development. In the past, our design team has created complex prototyping “pasta pictures” (see example image below) for user testing, aiming to create the most realistic flows for optimal results. Figma Config 2023 brings exciting updates to its prototyping capabilities, making it even more powerful and user-friendly.
With the introduction of variables in prototyping, you can now create high-fidelity prototypes using fewer frames, eliminating the need for complex and confusing connections. Designers can now update text content with string variables, adjust object dimensions, corner radius, or auto layout properties with number variables, and toggle layer visibility using boolean variables. And now with the utilization of string variables in Figma, we can simplify the process of localizing prototypes for our multilingual product. Designers can now empower their prototyping skills with advanced features such as expressions and multiple actions and conditionals, which allows you to take your prototypes to new heights.
And now, with the convenience of the new Prototype inline preview, designers can instantly preview prototypes directly from the canvas without switching to Preview or Play mode.
With the adoption of these advanced prototyping features, we unlock the ability to create remarkably realistic prototypes at an accelerated pace. This empowers us to refine our designs with precision, align them seamlessly with user needs, and cultivate a profoundly user-centric and empathetic approach to product development.
These few Figma Config 2023 updates, without diving too deep on Variables, are set to revolutionize our ways of working at Doctolib, further enhancing our design processes and productivity. From improved collaboration with developers to advanced prototyping, Figma continues to empower us to create exceptional user experiences. As Product Designers, embracing these updates will allow us to remain at the forefront of design innovation and drive the continued success of our products at Doctolib. So, let’s embrace these exciting changes and explore the endless possibilities they bring to our design endeavors.
Happy Figma’ing y’all
The purpose of the article is to present and share the work done by Doctolib’s tech & product team. The information contained in this article is provided for information purpose only (on an “as is” basis with no guarantees of completeness or accuracy) and does not constitute any legal advice, nor has a legal value. Therefore, it could not contradict in any manner whatsoever with any legal binding terms applicable to your relation with Doctolib.
