Figma for Developers — 3 Lessons I Should Have Known Sooner
Figma is well-known as a powerful UI design tool with a friendly and easy-to-use interface. This tool can defeat all opponents thanks to its "real-time" outstanding functionality that helps the collaboration become more efficient and smooth.
However, many junior developers are still struggling while working with Figma. In this blog, I would like to point out three main reasons that lead to our daily coding troubles while working with Figma:
- Lack of skills to use Figma as a developer
- Not take prototype seriously
- Lack of communication
So, let's get started with my first note.
1. Skills shortage:
Figma is browser-based, so developers can easily use it and access essential features without installing anything.
Nevertheless, young developers often have little experience playing around with design tools, which is why they miss critical information in the mock-up.
My Case #1: During my internship, my dev team had the chance to participate in a great project we had to work on with Figma. Looking at the mock-up, I thought this project was unchallenging, even though at that time, all I knew about this tool was how to measure, space, export, and code inspect. "That's enough to start working!" I said.
Not as expected, my working flow was not clean, and it took me hours to figure out the needed information. In the reviewing meeting, our designer was not happy because of numerous bugs related to UI aspects. I should have started my programming process by going through the mock-up to understand the project's concept. Moreover, it could be the chance to know the design structure, including other significant information such as components, variants, and their elements' interactions.
2. Overlook of the prototype
Figma is an excellent tool for prototyping that shows the interactive flows directly in the design. Unfortunately, some new developers to Figma don't know about this feature.
My Case #2: Continuing with the project in case #1, our designer was unhappy with the result because we had already built animation and interaction wrong. I did not know about the prototyping feature of Figma. And instead of asking the designer about those interactions, I tried to build the animation the way I thought it should be.
Prototyping is a straightforward way the designer uses to show developers their ideas. Hence, that was a big flaw when we missed it. Yet, we should keep in mind that prototypes are not always perfect. Going through the design and prototyping, I'd instead contact designers if anything is unclear.
3. Lack of Communication
As known as a multiplayer design tool, Figma allows people to participate in the project without interrupting the person doing the work. By having the link, everyone can view the current status of a design, and they can also communicate with other team members.
My Case #3: The comment function takes collaboration to the next level. Even so, our dev team did not realize its advantages. On this project, we needed a member to talk to the design team and wait for their feedback. It also took time and hard for us to understand and implement the ideas. Using comments, we could have given and received feedback from our designer.
I have to admit that real-time collaboration is excellent, and it improves communication among project teams. Indeed, using the comment function, we don't need an extra workforce to send our opinions and wait for the answer. Only one thing bothers me until now about how the commenting work: It's hard to know what comments I — as a member of developer teams, should be keeping track of and which I can ignore.
Conclusion
Collaboration is a strong word that presents the smooth workflow among teams. In fact, developers and designers have different backgrounds and skill sets; therefore, it's never easy to understand and listen to one another.
Technically speaking, it is crucial to have close contact with the design team. Communicating with the design team can prevent the mistakes that causing by misunderstanding the design concept. In the modern era, I believe we all young people are willing to open up to each other for the project's success. Overall, we are talking about how to enhance communication to push up the process and avoid misunderstandings. Figma has all features to close up the relationship between the dev and design teams.
This blog is based on the experience I gathered and drew upon from my internship. Notwithstanding, I am applying my learnings for the upcoming projects to earn for new lessons. Try my tips above and tell me your opinions.
Thank you!
