A useful tool for collaborating with designers, a course on Figma properties

Figma Guidebook for Developers

If you want to collaborate peacefully with a designer? Finding a good fit is a hit or miss affair... 😭 However, you can help your co-workers think this way!

"Of all the developers I've worked with so far, ㅇㅇ is the best to work with~"

And. The reason I say this is because I am that designer!! =) So I know very well what parts of the collaboration process between designers and developers cause communication difficulties.

The easiest and fastest way to achieve seamless collaboration = Using the best collaboration tools

Anyway, the easiest and fastest way to achieve smooth collaboration is to use the best collaboration tool ! Many of you are probably using Zeplin, but unfortunately, there are some features that Zeplin does not have .

To give just a few brief examples, Zeplin does not display workflow (page connection relationships, overall flow order), the type of interaction animation to use for a specific component and detailed properties, responsive properties (horizontal/vertical alignment), etc. So, you would have to have the designer deliver these details in a format other than Zeplin (PPT, Slack, etc.) or ask the designer several times during development.

These issues may be taken lightly as one of the inevitable processes of collaboration. However, among those minor issues, the ones mentioned above can be easily prevented in advance by using a collaboration tool called Figma instead of Zeplin. So, will you learn how to use Figma to prevent them? Or will you continue to experience those small issues repeatedly for the next 1, 5, or 10 years?

One day, while working with developers, I happened to come across a tool called Figma. Simply put, Figma is Photoshop + Zeplin. (I used Photoshop as an example to help you understand, but Figma and Photoshop are completely different tools with different functions.) But this tool called Figma was a whole new world! I don't know how developers feel, but as a designer, using Zeplin was quite inconvenient. Of course, it's better than not using Zeplin at all.

However, if you share the design guide content with Figma, even the content that could not be displayed in Zeplin will be automatically displayed. So, developers no longer need to check other content that they had to receive through PPT, KakaoTalk, etc. in various places in addition to Zeplin. You only need to check Figma.

And you may have had an experience where the design of the actual developed product was different from the design that the designer worked on. There may be various reasons for this, but the two main reasons are as follows.

1. The content required for development work is not sufficiently displayed in Zeplin (design guide).
2. When designers write the missing content directly in text, they accidentally make a mistake in writing something. Or, they are unable to update all updated content in real time.

The first of these is what we talked about earlier - 'contents that could not be displayed in Zeplin'. The second is a problem that can occur when a designer manually writes a guide. For example, content like 'Please move to button B when the confirmation button on page A is pressed' cannot be displayed in Zeplin, so it has to be written as separate text, right? Since it is written by a person manually, it is natural that mistakes will occur. Real-time updates are also impossible. Every time the plan changes, all the related content in various places in the file has to be found one by one and changed manually. However, if you use Figma, the properties of the design elements are 'automatically' and 'real-time' synchronized, so such mistakes do not occur.

And the best part is, it's really easy! There's almost nothing new to learn, and you don't have to install anything new on your laptop. Since it's almost the same as Zeplin, developers only need to briefly look over the usage of features that weren't in Zeplin. You'll be able to get used to it in no time after using it once without having to study anything. And since Figma can be used on the web, you don't have to install any programs on your laptop. Of course, it supports both Windows and Mac.

After reading this far, are you interested in using Figma? If so, the only problem left is convincing the designer. If the designer uses Figma, the design guide content can be delivered to Figma. If the designer is using Photoshop or Illustrator, switching to Figma is 200% and 1000% a good choice. However, if the designer is using Sketch or XD, it is okay to continue using those tools without switching to Figma. Sketch and XD are similar tools to Figma, so they will have features like Zeplin. The only inconvenience is that Sketch is paid and cannot be used on Windows, and XD requires the developer to install the program on their laptop. Sketch and XD are good tools, but the truth is that Figma is the mainstream. Everyone from unicorn startups like Uber and Airbnb to giant companies like Microsoft uses Figma.

Anyway, I'll explain assuming that the designer you work with is using Photoshop and Illustrator. It's not difficult for a designer to learn how to use Figma. The method of use is similar. The problem is that you have to change the format of the design work that you previously worked on with other tools. Although it is compatible with Photoshop, XD, and Illustrator, it is not perfectly compatible, so you have to do some manual work. Unfortunately, if you have the time, I'd like to recommend outsourcing this part. If you want to outsource, you'll need the CEO's approval. Please send the attached PDF file for the CEO to the CEO. Please also send the attached PDF file for the designer or copy and paste the content below to the designer. If you don't want to bother outsourcing, you can just request it from me.

I hope that this tutorial can play a small but helpful role in helping the developer become a key developer at a famous unicorn startup in the future. 🤣

To. Designer

I think you've probably heard a lot about Figma. It's almost the same as using existing mainstream graphic tools like Photoshop or Illustrator. As a designer, I can guarantee that designers who have used Photoshop or Illustrator can quickly learn how to use Figma. There are very detailed instructions on how to use it on the official Figma YouTube channel, so it would be good to watch those videos.

The problem is that since I have already done the design work with another tool, I need to convert those files to Figma files in order to continue working with Figma. It would be quite troublesome and time-consuming to do it myself, so I suggest to the CEO that we outsource the conversion work~! ^^

index

1. Prerequisites and knowledge before using Figma
2. Solving Common Communication Problems When Collaborating with Designers
3. Other things to know

If there is anything you don't understand while reading the lecture materials, please feel free to ask questions at any time! You can contact us through Inflearn or Instagram! @needesign_official