As a graphic designer, I’ve been working on Adobe Photoshop and Illustrator for more than 8 years and I thought those apps were the best design tools and I wasn’t really willing to change. Then last year, I was on a research about topics on UI/UX, then I came across Figma.
At first I was skeptical about trying out Figma because I was thinking it won’t keep up to what Ps and Ai already have to offer. But, what really caught my attention was the real-time designer collaboration feature where multiple designers can work on a single file at the same time! That alone fascinated me to try it out. Now I’m on my 6th month of using Figma for my designs and still going.
What is Figma?
Figma is a collaborative design tool very similar to Sketch and Adobe Experience Design. It was co-founded by Dylan Field way back in 2013. His idea was to create a design app much like Google Docs but focused on design rather than text.
Compared to Sketch, Adobe Ps, Ai, and XD, Figma is a web-based app, meaning you could only run it if you are connected to the internet. Primarily, you could run it inside one of your browser’s tabs and it has a stand-alone downloadable app too but it’s just the same as the one in the browser, you still need the internet to run it (kind of a bummer).
Figma’s Interface
At first glance, Figma really looks a lot like Sketch, but it incorporates a simpler and flatter look. The icons are well-thought-of and intuitive. The tools and panels are all organized well with the file tabs and toolbar on top, the groups, layers and frames on the left side and design properties, prototype and code panels on the right. I like it that I could easily navigate between tools and panels.
The design tools are straight-forward but not as in-depth as Ps or Illustrator. They are only what you really need to create mockups and designs, most preferably on UI/UX design so that you can focus more on the work and not on digging around and fighting your tools. Since this is a vector-based design app, photo manipulation on this app is somewhat limited, so I still need Photoshop for that heavy image manipulation.
How Figma differs from the rest: Real-Time Designer Collaboration!
I have mentioned real-time designer collaboration in the previous paragraphs. This is where Figma really shines. Designers could work on the same file at the same time, meaning you could easily see what the other designer is doing. This eliminates the need to create a copy of a file to give to another designer to work on. Viewers can also comment on a part of a design much like Google Docs.
I’m working on a free version of Figma so it allows only 2 designers or editors to work on a file but can have an unlimited amount of viewers whereas the paid version allows for unlimited designers.
Figma’s real-time collaboration feature can help make your design team grow to become one lean-mean designing machine capable of dishing out designs faster than what Ps and Ai can ever hope to do.
Figma for UI/UX Design
For me, Figma is created to address the needs of UI/UX designers. It has a wide range of tools necessary to craft beautiful UI mockups.
One of the things I also like about Figma is that it has the Frames tool which is very similar to how Ai’s Artboards work but it acts like a mask group that crops out any object outside its boundaries. Frames also make it possible to work on multiple pages or mockups on any given time. You can copy a design from a frame then put on to another without the hassle of switching and loading of documents. The best part of this is that Figma doesn’t even slow down even when working on multiple frames well unless you have huge amounts of layers. But one thing I noticed is that Figma reduces the size of your imported images once they go beyond 3000px in either height or width.
Figma also allows users to select frames, groups and layers and export them directly into either SVG, PNG or JPG. The Export function also has the options to enlarge an object up to 4 times.
The Layout Grids and Rulers makes it easier to set up grids such as the Bootstrap grid system and neatly align objects and frames.
Another feature of the app is the Components and Instances function which is great as it allows designers to create reusable Instances of UI elements and keep everything a lot more manageable and consistent. For example, when you update the Master Component, all the instances and sub-components are updated automatically. For me, this is a very useful function because you can easily apply a client’s revisions across a multitude of frames.
Figma also helps web-developers using CSS, they can easily copy the style codes for a certain style from Figma’s Code generator, that’s less hassle figuring out how to interpret a mockup into development.
Figma is vector-based which means, you can stretch out your designs as large as the app can permit and pixelation is never a problem (provided the raster images you use are big enough too).
Another feature I would like to mention is the Constraints. This feature uses anchor points (top and/or bottom, left and/or right, scale, etc.) in a frame to which a design object would stick despite whatever size the frame is. You could design a 1920px by 3600px frame, anchor the objects inside it, then resize it to tablet size, phone or a smaller desktop screen pretty easily with a few adjustments here and there. Plus you don’t need to worry about the exact sizes of frames, Figma has them already as presets.
A Web-based App, Say No to Storage Issues.
Unlike Sketch, Ps or Ai which saves your file in your computer, Figma saves them in an online database. I have noticed that no matter how big the file sizes for your files are, the app just loads them easily and their database storage is pretty huge. That’s pretty impressive for me.
Want to share a file without having to collaborate with another user? Just export the whole file in Figma as an offline .fig file and pass it on.
Sketch users can switch to Figma easily
What if you’re a Sketch user and want to work on your files in Figma? Don’t fret, not only does Figma look like Sketch, but Figma can also import Sketch files effortlessly. Now you can continue your work there and have your design team work on the same file with the benefit of real-time collaboration! But just a note, Figma doesn’t import Sketch’s presets like the built-in patterns and textures.
And there’s just another little problem, there’s no way to import whatever you’re working on in Figma into Sketch, it’s not available at the moment. I really hope they find a way for that to happen.
The Verdict: Why choose Figma
It depends on the designer as to what app he/she wants to use provided they can meet the client’s demands on time. But as for me, this app offers that opportunity to help your design and development teams move towards a more unified and confusion-free work process, further getting rid of the rift between both sides.
In terms of fast and efficient designing with real-time collaboration to create an awesome design team, Figma is the go-to design app.
