Bridging Design and Development: Figma's Latest Innovations
Another year and another successful Config event in the books! With it, Figma has announced many new features, demonstrating its commitment to innovation. But what motivates this drive for innovation? Let’s explore how Figma draws inspiration from engineering concepts to enhance the design workflow.
1. Update Dev Status: Pull Requests for Design Handoff
Do you find yourself stuck in never-ending email threads when trying to clarify design changes? Would you like to streamline this process? Figma’s “Update Dev Status” feature allows you to reopen or provide more context when labeling a section as “Ready for Dev.” This new Figma feature is similar to GitHub’s Pull Requests. With this functionality, developers and designers can easily track changes within Figma, reopen sections for feedback, or add comments directly in Figma, making communication more transparent and centralized.
2. Ready for Dev View: Diffing Your Designs
Speaking of Ready for Dev, the Ready for Dev view itself is another feature that shares functionality with a concept popular in GitHub Pull Requests. Programmers have long used “diffs” as a go-to tool for highlighting changes between code versions. In Figma, this views the visual changes introduced in this version of your designs, highlighting the precise modifications made since the last handoff.
3. Component Playground: Storybook for Design Components
Building reusable design elements is necessary, and Figma’s Component Playground makes exploring them a breeze. It provides a dedicated space to test different design components’ variants, states, and properties, mirroring the functionality of tools like Storybook for coded components. In addition to showing an at-a-glance encapsulation of component properties, this view fosters collaboration, helping teams stay consistent and share mental models, making everyone feel connected.
4. Page Dividers: A Markdown Easter Egg
While not as groundbreaking as the other features, the use of ‘—‘ as a page divider in Figma is a simple yet effective trick. Just type `—` as your page title, and voila! Similarly, in Markdown, you can create a horizontal rule with the same characters. It’s a small detail comparatively, but it aligns with Figma’s intent to create a space more comfortable for devs and other non-designers alike.
These are just a few examples of how Figma’s development team is fostering a sense of community between design and development. By incorporating familiar engineering practices, Figma is breaking down barriers and encouraging collaboration. It empowers product teams to work more effectively and deliver better experiences to their peers and end-users.
Nick Villapiano is the Director of Front-End Development. He is responsible for leading the front-end development practice and managing its practitioners. His background in branding, UX, and project management allows him to maneuver complex spaces beyond just coding and use his wide breadth of skills and concentration in one area.