Low-budget Collaborative Design Tools

Nuri Sanendita
4 min readNov 14, 2017
Image by Edho Pratama

UI/UX Designers are always closely related by using Mac platform. Well, as a non-Mac platform user, being UI/UX designers is pretty heavy problem. Right now, I’m not yet using Mac platform to my daily design activity because of its price…haha. Many design tools are dedicated to Mac platform, with an awesome features, such as collaborative design and also can prototyping like the real apps. Sometimes, it feels unfair for us as a non-Mac designers.

Then one of my project teammates at Nikola (well, I will tell you later about this project) introduced me to Figma. Figma is web-based/online-based collaborative design tools. It isn’t just design tools, it provided with hand-over features for the Front-End Developers, iOS Developers, and Android developers. Like another design tools, it is a vector-based but maybe with limited tools.

So, maybe it’s kinda review from me as user. It can be very subjective, because it’s only based on my experience when I use it for my design work as UI/UX Designer.

Create vector on Figma

Why I need this tool?

Being work in a team, all team members should know what I’ve done, specially for fellow designer. As designers we can work for the design in one file/project just to make and keep it consistent, maybe it would fit for work together with 2–3 designers I think. For “low-budget” designer like me, of course I need this. It’s free for many drafts, and also I can create icon, image, or another vector image for user interface design necessary like Sketch did, and I can collaborate with everybody, ask about their opinion about the design or etc.

Why collaborative design is important to me?

I’m a person who prefer to work in a team or maybe with a partner. Why? because, I need another head to share my opinion, my thought, and delve an idea by discussing with another. By working in a team makes me feel guided. It also happens when I collaborative design, I feel like I’m guided when I create some design, to makes me right on the path, right on schedule. When I design alone, only myself in that file/project, sometimes I have too much imagine and make the design out of the path and it won’t finish on time.

Hand-over mode for Developers
Comments Section

Figma’s Features

Well, I can’t explain for the detail of all the features, maybe only some features that I already used. You can find out all the features in here.

  • Comment section: everybody that invite in the project/drafts can leave a comment. Also the comment section sometimes help me to communicate or negotiate with the developers, and make notify for the design update by leave a comment
  • Components section: you can create component for you user interface elements, like button, icon, text field, etc. So, you can reuse the component for other frame (like artboard)
  • Libraries section: you can save your components into library. Libraries will provide the components can use for all project files that you have.
  • Import Sketch’s file: you can import Sketch’s file and edit or manipulate it, but unfortunately it can’t export file as same as Sketch’s file
  • Prototyping: it’s more like help you how to create the app flow, not so prototype. Because it doesn’t has a transition effect or interaction effect

I hope you enjoy my story about Figma as a collaborative design tools, and also can help another fellow UI/UX Designer that need this kinda tools.

--

--

Nuri Sanendita

Product Designer | Tech Hustler | and... whatever you call 🙈 | nurisanendita.com