Figma Forms

Tips for communicating better the information in Figma files to developers

View the original post

This article explains how to organize and communicate the information in your Figma files for better collaboration with developers.

Since I began working as a product designer, I have had to deal with complex products. I do not know why, but designing complex products and finding solutions to a wide variety of situations has always been exciting for me.

In addition to resolving many high-level problems, there is one challenge that has never been easy. I have to communicate much information with many details to the developers in the design handoff.

Since complex products have many functionalities and I need to cover many flows and solve many edge cases, I am always interested in explaining the solutions well and creating better collaboration with the developers to ensure smooth delivery and reduce friction.

Comic of the designer said to the developer, “The implementation looks great”
Illustrations Open Peeps by Pablo Stanley

In my previous post (A complete guide to executing a great design to development handoff), I discussed the handoff process in general, and in this post, I wish to share some detailed tips I use to communicate the information contained within the Figma files.

You probably already know some of these tips if you are an experienced designer, but it would be beneficial if junior designers were to possess this knowledge.

In this post, I have shared tips that are also relevant for designers who create products with a low level of complexity, web designers, or UI designers

It is important to keep in mind that there are different methods and needs in each product team and each company, so choose only those tips that will serve you at work.

Additionally, the tips in this post can also be used with other design tools such as Sketch and Adobe XD.

Why is it important to communicate better within the Figma file?

We use various tools as product designers during the design process, such as pen and paper, whiteboard tools, prototyping tools, and design thinking workshops. Nonetheless, our primary tool and the tool that we control best is a design tool that allows us to build the screens, such as Figma (or Sketch, Adobe XD, etc…).

Thus, it is important to communicate information effectively inside the Figma files to the developers and explain the edge cases and different flows to the developers.

In most cases, it is not sufficient to send the files to the developers; you need to mention important information close to the screens so they can understand it at the right time.

In the following, I have compiled a list of the tips, and I have also included some images so you can better comprehend them:

1. Make sure developers know how to use Figma

What to do
You should check to make sure they can understand the information stored inside the files and that they are familiar with the tool.

It is not sufficient to send them the link to the files and say, “Here is the information.”

In the past, I remember a case where the developers didn’t implement my design correctly. When I asked them about it, I realized that they did not understand how to use the tool, so they didn’t know how to consult the information.

For what it helps
It will give you confidence that the developer will use the information you provide, and the implementation will be as close to your design as possible.

Pro tip
It would be best to clarify with them whether they know how to use the tool and the consoled information within the file.

If you notice that they do not know how to use the app, you may create some presentations to teach them.

Comic of the designer ask the developer, “Have you ever used Figma inspector?” and the developer responds, “No, what is Figma inspector?”
Illustrations Open Peeps by Pablo Stanley

2. Add a cover thumbnail to the Figma file

What to do
In Figma, you can add a cover to the first page, which will appear on the homepage. You can include important information in the cover thumbnail file, such as:

  • User story number (automatically gathered from Jira).
  • User story phrase.
  • The designer that assigns to the task.
  • In what state is the file currently (in design, ready for development, implemented).
  • The date on which the work began.

For each team, the information can differ, so add the information you feel is most important for your case. (You can use the template I posted to the Figma community.)

For what it helps
The developer will be able to understand what the file contains before they open it. It is common in a case they don’t have a direct link or if they accidentally return to the home page by mistake

Thanks to my friend Howie, who showed me this tip 👍.

An example of a cover image from Figma
An example of a cover thumbnail from Figma

3. Organize the page tree

What to do
Organize the pages in a clear and understandable way and give them significant names, such as a playground, archive, to be developed, components, etc. Additionally, it can be helpful to add some emojis and in some cases, provide additional information, such as dates.

For what it helps
The information provided will assist the developers in finding the information they need. By giving the page a name such as “Ready to develop”, the developer will understand that this is the page on which they should focus.

Thanks to my friend Giacomo, who showed me this tip 👍.

Example of an organized page tree versus an unorganized page tree
Example of an organized page tree versus an unorganized page tree

4. Below the screens, write important information

What to do
There is an option in Figma to write comments and communicate information using the comments tool, but I would like to mention another method: write a comment below the screen. If you’re going to say essential details to the developers for a specific artboard, write it below.

For instance, you may want to write it below the screen if you want to explain to the developers how they can find the error cases or edge cases associated with a specific flow.

For what it helps
When the developer views the screen, they will see the information, and it will be easier for them to understand what you mean.

Writing important information to the developer below the screen
Writing important information to the developer below the screen

5. Give the screens names and numbers

What to do
Give each of the screens a name that describes it and a number. You can write a three-screen login process, for instance.

  • The user writes the username-01
  • The user writes the password-02
  • The user clicks on the login button-03

For what it helps
It will be clear to the developer what screens they see, and the number will assist them in understanding the flow.

Pro tip
If you would like to number the screens more quickly, you can use the Figma naming feature (cmd + R).

An example of a screen with name and number
An example of a screen with a name and number

6. Build the screens with components

What to do
Your design system or UI kit is great, and you should use their components. Sometimes, we will create a specific solution that is not included in the design system. I encourage you to componentize it as well during the design process.

For what it helps:

  • You will reduce friction between you and the developer, especially for the UI design, since you will need to be sure the component is correct once and not have to test every screen individually.
  • If you or the developers found an error in the file, you can fix it quickly with one change.

7. Use the hand emoji

What to do
Use the hand emoji to indicate where the user clicks on each screen.

For what it helps
It will help the developer understand directly what action the user takes to move from one screen to the next.

Pro tip
If you use Mac, click the keyboard shortcut CTRL + CMD + SPACE, and the emojis keyboard will automatically open.

Thanks to my friend Juanma, who showed me this tip 👍.

An example screens that include the hand icon
An example of screens that include the hand icon

8. Build a screen flow diagram

What to do
By connecting the screens with lines, you can create a flow chart.

For what it helps
It assists the developers in understanding what happened and how the navigation works.

Pro tip
You can use the Overflow app to accomplish this quickly.

An example of screen flow diagram
An example of screen flow diagram

9. Ask the developer to use the comment tool.

What to do
You can ask the developer to add comments inside the file using the comment tool.

For what it helps
It reduces friction between you and the developer. The developer can add all his comments in the file and with one meeting and review them with you. In that way, both sides reduce slack messages or emails and save time.

10. Add the developer as a viewer and inform them

What to do
By clicking the Share button, you can add the developers as viewers to the file, and they will receive an email with the link. Additionally, you can send them the link through Slack.
I recommend that you do it as soon as the file is ready for development.

For what it helps
You will need to do so to share the file with the developer in any case 🙂 but what I would like to emphasize is that it should be part of your workflow. As a result, developers will not have to ask for this, and it will save time for both sides.

The share feature in Figma
The share feature in Figma

11. Clean the file/page from unnecessary information

What to do
Remove all unnecessary information from the file/page and leave only the relevant information.

For what it helps
Because the developers will consult only relevant information, you and they will work more effectively together.

Pro tip
Create an archive page in the Figma file and move all the irrelevant information there. Thus, the file will be cleaner, and the work history will still be there.

12. Explain to the developers how you built the design system and your product design principles

What to do
Organize a meeting and share a presentation about the design system and the principles that guide you during the product design.

For what it helps
Information about the design system and the design principles will be valuable for the dev team. If they know the design system and the design principles, they will understand your design better. After all, they will understand why you are making some decisions.

Pro tip
Record the meeting and share the video with each new developer or a new product team member that begins working on the team. In the future, it will save you meeting time when you want to align new members about the design system and the design principles.

How to find more tips?

Here, I want to point out that knowing these tips and tricks wasn’t magic. Although I was able to study some from my own experience, the most valuable part was learning from other professionals.
Listed below are several resources that can help you study new things independently.

  1. Take notes from the people you work with, observe how they work, and ask them questions.
  2. Watch videos on YouTube and learn from other professionals. (I recommend you subscribe to the Figma channel and Femke.)
  3. Read articles from different designers to learn from them.
  4. Find solutions to the problems you encounter during the process.
  5. Look at the files in the Figma community.
  6. Discover a new Figma plugin when you have the time.
  7. Follow Figma on Twitter, normally their team posts there the latest updates, so you are always up to date.

I hope this article will help you. Feel free to share it with your friends or team members, and if you have any questions, feel free to share them with me.

Tips for communicating better the information in Figma files to developers was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.