Figma Config 2023: Strengthening Designer-Developer Coordination with Key Updates
1. Dev Mode
Dev Mode simplifies the design-to-development process by allowing for a speedier and more fluid transition. Designers can mark a project as “Ready for Dev,” allowing developers to get the information they require without the burden of version updates and overly communicative environments. This feature alleviates the irritation of developers who must navigate design files that lack critical implementation details.
Dev Mode functions primarily as a browser inspector, bringing design ideas such as pixels, layers, and groups closer to developer concepts such as code, icons, and tokens.
Kris Rasmussen, Figma’s Chief Technology Officer, noted that the launch of Dev Mode originates from a year-long conversation with the community about how to improve the design tool’s usability for developers. Figma hopes to enhance cooperation and understanding between designers and developers by offering a dedicated workplace, making the platform more accessible and adaptable.
Dev Mode, which is now in beta, is free to all users until 2023. This allows Figma to gather feedback and further optimise the experience to better suit the demands of developers.
With this version, Figma moves closer to being a full-fledged design and development platform, assuring a smooth and fast workflow for both designers and developers.
2. Make contact with your tools and codebase
Figma’s Dev Mode connects your design file to the tools and code components you need, avoiding inefficiencies caused by switching between tools. Jira, Linear, and GitHub plugins offer seamless project management, keeping designers and developers in sync. Storybook adds context to the design by referencing the codebase. AWS Amplify Studio, Google Relay, and Anima codegen plugins allow you to customise code output according to your process.
Design tokens, which represent UI data, are now accessible for easier access in Dev Mode. You may also attach relevant links to canvas objects for documentation or plugin references. The Dev Mode in Figma accelerates the product development process, enabling a unified and effective workflow.
3. Keep track of what needs to go into production
The artefacts from each step, such as design files and code, have stayed separate as the borders between design and development phases have grown less defined. Navigating design files, choosing individual components and their characteristics, and monitoring changes, on the other hand, have proven difficult.
Figma, thankfully, overcomes these concerns by allowing designers to mark areas as “ready for development” and share them with developers without the need for separate pages or files. With the addition of diff functionality, developers can simply compare changes across multiple versions of a frame, ensuring they are up to date with the most recent changes. The upgrade to Figma seeks to improve cooperation and expedite the design-to-development process.
4. Extend your workflow
You may use the VS Code addon to access Dev Mode functionality straight from your code editor. This connection enables you to examine designs, get alerts and comments, and remain up to date on changes without switching between environments. Furthermore, the VS Code addon provides code autocompletion based on the design you’re evaluating, allowing you to work more efficiently and quickly. Figma’s seamless integration enables developers to integrate design and coding duties within their preferred coding environment, increasing productivity and assuring a smoother workflow.
5. Variable
The significant update to Config introduces variables, which revolutionise design processes by increasing efficiency and simplifying. Variables act as containers for colour, numeric, text, and boolean values, allowing for their reuse throughout the design. By centralising and easily managing important design properties, this new tool enables designers to create a uniform and unified visual language.
Designers can save time and ensure consistency by changing these shared values in one location. The addition of variables to Config is a huge step forward, streamlining workflows and encouraging a more efficient design experience.
6. Advanced prototyping
Using variables, conditions, and expressions, you may increase the dynamism and interactivity of your designs, allowing you to create prototypes that respond realistically to user interaction.
Variables in prototyping include numbers, text, colours, and booleans, allowing you to manipulate values across your prototype for increased dynamic interactions. Variables provide flexibility, whether tracking button clicks or recording toggle switch states.
Conditions add logic to your prototypes by allowing for various actions or outcomes based on variable values. By enforcing constraints such as “navigate to a different screen if the button is clicked more than 5 times,” prototypes become more contextually aware.You can use expressions to do computations and modifications on variables. With a button click, you may increment counts or generate new colours based on user input.
7. Diagram is bought by Figma!
Figma has purchased Diagram in a strategic move to strengthen its AI capabilities. This acquisition demonstrates Figma’s commitment to expanding its investment in artificial intelligence. Figma hopes to introduce AI capabilities to every facet of its platform by partnering with Diagram.
This is an important step towards aligning Figma with the changing landscape of the technology industry. With the purchase, Figma is ready to launch a number of AI-powered features in the near future, capitalising on AI’s growing prominence and promise in the design and collaboration arena.
