Pricing
Joey Banks
Design Advocate

Using components for a clean handoff

One of the reasons I was so excited to write this handoff guide was because, for many developers, the opportunity to get a glimpse behind the curtain of the design process really hasn't existed before. I think the Design Team at Cash App described it best when they told me that prior to Figma, the traditional developer handoff model wasn't fluid or intuitive and often felt like final screens and assets had to be tossed over a fence for developers to catch. As you might imagine, this invisible, but all-too-real fence left room for ambiguity and often, frustration.

Because Figma is collaborative for both designers and non-designers, I wanted to learn more from the folks at Cash App about how they're using Figma with developers to show designs, communicate intention, and collect feedback.

The design process is often messy, and for someone who's not a designer, coming into a file to view designs or provide feedback can be intimidating. The team at Cash App recognized this and shared a clever solution that goes a step beyond creating organized pages within files. The team used the ability to turn any frame into a component in Figma, including those which compose final design, to their advantage.

For any frame that's ready to be shared with the broader team, designers at Cash App will create a dedicated page within a file, where instances of those design components are placed, ready to view. What works so well about this method is that changes can be made on the original frame, on a less organized page, and the instance, which has been placed in the clean, organized space for developers and non-designers to view automatically updates. It's a nice way to save time and help others navigate through your files.

If you want to further communicate to your team the flow of screens or interactions, Autoflow, a plugin built for Figma by Yitong Zhang from Coinbase, does just that. Running the plugin, with two objects selected on the canvas, automatically generates a line between them, quickly indicating where to move next, from one screen to another.