🙌 Hey there! Welcome to the second edition of Delve-In, where we aim to demystify the most innovative tech and startup marvels, equipping you with the knowledge you need to navigate this exciting landscape. Get ready to delve deep and discover new perspectives in this issue of Delve-In!
Config 2023: Figma's Bold Leap Forward in Design-Development Integration
Figma, the design platform for team collaboration, held their annual Config conference on June 21st. In a series of groundbreaking announcements, Figma unveiled a vision for uniting product design and development within a shared digital space.
In the past few years, Figma has become indispensable for designers creating websites, mobile apps and more. But until now, Figma lacked robust features for interactive prototyping and developer collaboration compared to tools like Axure and Zeplin.
Config 2023 changes everything.
If you have not watched the Config product launch video, hang tight. Continue reading to learn about new features including Dev Mode, advanced prototyping, and the implications of these updates
1. Dev Mode: A Welcoming Space for Developers
Figma has always fostered a seamless collaboration environment for designers. With tools such as commenting, link sharing, and multiplayer mode, design teamwork is quite intuitive. However, until now, the bridge connecting designers and developers was shaky at best.
Before Config 2023, the tool for developers to collaborate with design team was limited to the Inspect panel, which provides limited information for developers to work with a given design.
Here's where Dev Mode steps in. Making developers feel at home, Figma introduces Dev Mode as an independent workspace. It's designed to streamline their journey from understanding to translating designs into code, connecting with essential tools like Jira, GitHub, and Storybook, and keeping track of what needs to go into production. Notably, Dev Mode allows developers to inspect files in VS Code, a popular coding platform.
So, how does Dev Mode facilitate this?
1. Consistency Across Design and Code
In something like Figma, being consistent is difficult for designers. But in code, being consistent is the default — exceptions are hard for developers! For example, if our app uses a letter-spacing of 1.2 for all the body text, and your Figma design uses a letter-spacing of 1.25, is that important? Or is that a mistake? There's a fundamental mismatch that just ends up being painful all around.
— comment from a Y Combinator Hacker News thread discussing Dev Mode
To mitigate inconsistencies that may arise, Dev Mode uses tokens in Figma, encouraging designers to create a more uniform design system. This approach minimizes unwarranted exceptions and fosters the use of standardized styles, variables, and components across design files.
2. Structured Handoff
Once something is agreed upon, the ability to change things without notice is really bad, especially if you're expected to follow the design as it has "final say". You go an implement something on Monday based on designs and show it to stakeholders on Tuesday. They compare with the Figma board and flogg you because it looks nothing like it. Ugh!
— comment from a Y Combinator Hacker News thread discussing Dev Mode
The process of handing over designs to developers can be messy. Figma aims to clean this up by introducing section statuses. This feature allows designers to label statuses clearly, helping developers stay in the loop with design changes.
3. Further, Dev Mode is stocked with developer-centric tools, such as:
Design Inspection: Allows developers to access design details like measurements, specs, and styles without inadvertently modifying the design.
Code Generation: Directly translates design elements into code snippets for various platforms like HTML, CSS, iOS, and Android. Developers can further customize these snippets using plugins.
Plugins: Dev Mode plugins facilitate a seamless handoff from designers to developers, aiding in tasks like code snippet generation and asset exports.
Sounds interesting? You can learn more about Dev Mode here.
2. Advanced Prototyping: Elevating Simulation to the Next Level
Prototyping is a core component in the designer's toolkit, enabling them to fully depict how a design interacts in real-life scenarios.
Before Config 2023, Figma was well-endowed with design features, but its prototyping capabilities were relatively fundamental, aimed at user flows and simple interactions. In Figma, designers utilized Interactions in the Prototype feature to effectively showcase how a design should flow in a real-world context, typically by creating and linking multiple static wireframes.
In contrast, Axure, a UX design tool, is specifically designed for building fully interactive prototypes complete with complex interactions, conditional logic, animations, and data-driven page flows. This level of detail allows designers to simulate a comprehensive digital experience.
With Config 2023, Figma enhanced its prototyping capabilities by introducing Variables, Conditions, and Expressions. These additions now allow designers to achieve in Figma what was previously only possible in a tool like Axure. Moreover, these new features nudge designers towards understanding the language of code, thus fostering a better alignment between design and development teams.
So what are these new features and how do they work?
1. Variables
Variables provide designers with a way to store and manage object states and properties. By altering these variable values, designers can manipulate the appearance, content, or visibility of objects.
This functionality is particularly useful for data-driven interactions, such as number or volume controls, which can now be implemented without the need for multiple frames. Additionally, variables can be utilized to switch layers, demonstrating different screen modes like dark/light themes or responsive layouts.
Example: Number Control
Suppose we set a number variable named itemCount, which we increment by one each time the plus button is clicked.
This approach allows number control to be demonstrated within a single frame 👇
2. Conditionals
Conditions give designers the ability to incorporate if/else logic to verify conditions before performing actions.
In prototyping, conditionals are rules that define whether a specific action should be triggered. With this feature, designers can set up triggers based on variables, device types, object properties, or other factors. If a condition evaluates to true, a particular action will occur; if false, a different action is initiated.
Combined with variables, conditions enable designers to prototype complex, dynamic experiences that mirror the ones achievable with Axure. Consequently, product teams can get a much richer sense of how a design will function when built, without having to delve into code.
To get hands-on with Advanced Prototyping, Figma offers this Advanced Prototyping Playground, a resource to familiarize yourself with the new features.
So, what are the implications of these updates for Figma as a product?
At Config 2023, Figma's CEO, Dylan Field, laid down a bold new vision for the platform:
Our vision is to build a new kind of design tool—one that is designed for the entire product development team.
This new vision is ambitious, and it marks a distinct shift. Figma aims to transition from being merely a design tool to a comprehensive, team-oriented software suite. A critical step towards this goal is the introduction of Dev Mode and Advanced Prototyping. These features embody Figma's commitment to unifying the sometimes divergent worlds of designers and developers. The Dev Mode provides a dedicated workspace for developers within the design environment, while the Advanced Prototyping infuses the design tools with code-related functionalities such as variables, expressions, and conditional logic.
Despite these significant leaps forward, however, Figma still has strides to make in meeting the divergent needs of both designers and developers fully.
I understand that (Dev Mode) is attractive for Figma because it broadens their market and allows them to sell developer-specific plans, but honestly, what I need is not so much tools for myself, but for Figma to nudge my designers to make things more easily consumable by engineers.
The mixed reviews of the Dev Mode reveals a common issue: the ongoing gap between designers and developers, which can impede effective collaboration.
Addressing this issue will require Figma to make a substantial investment in balancing diverse needs. This means Figma should:
🧑💻 Engage developers: Actively seek and incorporate feedback from developers, the primary users of these new features.
📚 Educate designers: Foster a learning environment where designers can grasp how to structure components, name symbols, use variables, and design interactions that are developer-friendly.
🧑🏫 Guide with software: Implement systematized in-app prompts that guide designers towards design specifications that seamlessly integrate with coding practices.
A Win-Win-Win: How do Figma's Updates Benefit Devs, Designers and Product Teams?
As we transition from Figma's current state to its envisioned future, the Dev Mode and Advanced Prototyping features represent vital first steps. They present the promise of a more integrated and collaborative environment among designers, developers, and product managers.
💻 For Developers:
The new features make early and active involvement in the design process more feasible. Dev Mode lets developers interact with design concepts and prototypes right from the start, influencing design decisions and ensuring a more seamless handoff. The shared workspace also promotes real-time collaboration between developers and designers, fostering a synergy that might have been lacking before.
🎨 For Designers:
Advanced Prototyping nudges designers to learn more of the language of coding. The addition of variables, conditionals, and related elements encourages designers to create more scalable and consistent design systems. As designers produce more developer-friendly designs, the divide between the two roles can potentially lessen, leading to an overall improvement in team synergy.
🌟 For Product Managers (PMs):
The recent Figma updates offer a unique opportunity to rethink workflows and leverage the shared workspace. PMs can strategize and reevaluate the process by which developers review and give feedback on designs, potentially streamlining processes and enhancing both efficiency and accountability. Moreover, PMs can encourage a robust feedback mechanism, promoting bidirectional communication that ultimately enriches the product development process.
That's a wrap for this edition of Delve-In! Our exploration of Figma's latest updates has highlighted their potential to transform product development. For designers, developers, and PMs, these tools can foster greater collaboration, streamline communication, and ultimately enhance product success. We encourage you to leverage these insights in your work. Don't hesitate to join the conversation with your feedback. Stay tuned for our next issue, where we'll continue to unpack the latest in technology. Keep innovating!
🥷 Who’s behind the scenes?
Thanks for reading this week’s Delve-In by P@CMU! The editors behind this work is Head of Newsletter at P@CMU Alina Fang.
We're thrilled to co-curate future content with you! Your thoughts and feedback on our content are invaluable to us. Don't hesitate to share your opinions and send us some positive energy via the channels provided below.
Join our Slack channel to stay in the loop with upcoming events, discover incredible resources and opportunities, unleash your curiosity with product-related queries, and experience so much more! Don't miss out on the excitement – join us today 🙌
