EnterprisePricingCustomersLog in
Thomas Lowry
Thomas Lowry
Designer Advocate at Figma

Helpful tips for better designer + developer collaboration

We hope those little updates make your 'handshake' with developers go more smoothly! In addition, I wanted to share a collection of tips that have helped me collaborate with engineers in Figma.

Naming styles

When you're creating type, color, and effect styles, give them names that align with color names you're using in code (for example, token or variable names). Developers will then see these names in the code panel in Figma. They'll surface as comments in the CSS view, and as line items in the table view. This can enable developers to implement variables in some cases, rather than hard-coded values (like hex values) that might exist in their system.

Some teams may even take a functional approach to naming their styles. This method can be useful for adding a layer of semantics to the naming scheme. For example, you could name a color based on its hue, but that wouldn't describe its intended use case. Teams who choose instead to implement a functional naming system add a level of abstraction to their naming to ensure proper usage for both the designer and the developer. For example: a drop shadow named $modal-shadow or color named $alert-warning makes it clear which style to use where.

inspect-style-name

Helper components for redlining

Figma has built-in contextual visualizations to display redlines for measurements and distances. Viewers can access them by selecting elements and hovering over other elements that they want to measure the distance between. This can reduce most of the arduous effort associated with manual redlining when creating specification docs for developers.

But sometimes it can be beneficial to add annotations or manual redlines to the canvas when you want to provide additional information. I recommend doing so when you want to:

  • Highlight an area of your design that will be fluid when resizing
  • Indicate margin/padding
  • Annotate a design with with other variables/tokens that you want developers to leverage during implementation.

Some users have created a library of scalable components to aid in this process. Figma power user Anton Lapko has created an awesome redlining kit to get you started.

redlines

Clearly indicate what is ready for development

It's good practice to clearly communicate which parts of your work are ready for implementation. That way, you don't send developers deep sea diving into your designs to figure it out for themselves. There are many paths to communicating the 'ready file' status in Figma. Here are a few ways we've seen teams do it:

handoff-examples
  • Dedicated pages that are ready for development—some teams even use emojis in page names to help quickly distinguish in-progress work from work that is ready to go 🚀.
  • Use sticker components—many teams have created libraries with icon or sticker components that they can place on the canvas to help indicate which screens or mock-ups are ready to build.
  • Cover pages—The first page of your file can be turned into a cover page. Many teams have devised a cover page system to indicate project status (through colors or some sort of badge or label) if their workflow includes handing over an entire file or spec that is ready for development.
  • Dedicated projects—Companies using Figma Organization have the ability to create unlimited teams which can enable an additional level of file structure. This means projects could be used like sub folders. Developers could be invited into a "Ready for development" project within a company-wide team, where any files ready for implementation get moved.

Moving forward collaboratively

When you invite developers into your projects earlier, you create more transparent workflows and ensure no one is left in the dark. Developers can then ask clarifying questions throughout files and flag any potential issues early instead of at the time of implementation.

We hope this recommendation, combined with some of the improvements and tips outlined above, will streamline your process of going from concept to implementation. If you have more tips and tricks that have helped your workflow, please share them on our online Spectrum community!

Try Figma for free.