Website Design

Figma: A love-hate relationship

Miki Isaincu

Miki Isaincu

During my time as lead designer at Graffino, I spent a lot of time trying to find the best tools that would enable us to deliver more consistent designs, tools that would also bridge the gap between design and development.

There’s no surprise that we settled on Figma, and after some time, I decided to share our experience with the world.

Distance measurements in Figma are painful, and I bet I’m not the only one who thinks this way. If you’re a designer or developer and you’ve used it before, you know what I’m talking about. Chances are you’re in the same love-hate relationship with Figma as I am.

Most of the time, the instrument of choice in crafting my designs was the iconic Adobe Photoshop. Great overall app, with everything you ever needed at your disposal, from image adjustments, manipulations and hardcore color grading to all the shapes destined to form those container-class divs on pages across the — little less than infinite — web. Adobe Photoshop used to be the greatest until various other side software started to come up on the market.

Then, as any designer probably would, I started trying them to see how they fit in with my workflow and what they could bring new to the table.

Sketch was good for a while. I liked the plugins it came with and loved that it doesn’t overwhelm you with useless features nobody asked for. But the bad sides, and there are two from my point of view, are that it’s not as fast as I would like it to be and that you can’t correctly preview your work.

Adobe XD is fast and straightforward, but it lacks many of the basic features a software like this really needs. The collaborative part isn’t that great either.

InVision Studio has the most potential at first glance, with plenty of integrations and features, but when it comes to performance, it’s downright horrible, so I dropped it.

The last but not the least is Figma. There were some compromises I had to make in the beginning, but it looked like the UI software I needed. Great UX, good performance, assets, collaboration and many other features I needed, Figma had. The most important of them all are the collaborative features for the designer-developer relation.

The awesome side of Figma

Image
Welcome to the awesome side.

Now on to the good stuff. The app improved my workflow speed a lot and added the possibility to keep all the projects I was working on in the same place. Flawless feature. Also, the option to share the project with my developer co-workers is amazing.

I love the way you can make project versions using Figma’s history feature and come back later if you change your mind about something or just need to grab some design element from a past version of your project.

I also like that you can import and edit your SVG icons or vector art directly into Figma. It’s a great time saver because it doesn’t send you back and forth to Illustrator to do that.

The fact that you can upload your components into a shared library so that the entire team can use them with a simple search through the library without ever leaving the app was another big plus for Figma. It’s also a very useful feature for design systems, allowing you to keep all your assets into a single place. It makes it easy to find them as well, thus boosting your workflow and improving your effectiveness.

My absolute favorite thing about Figma is their newest addition to the software. The plugins support. This feature opened lots of opportunities to further increase my workflow speed and add various other ‘fancy’ elements to the game without ever leaving the app.

Some of my favorite plugins

Content Reel is a plugin which helps you fill all your designs with mock data. Lorem ipsum, fake numbers, addresses, anything, they’re all one click away.

Blobs generates random vectorial blobs, and allows you to adjust their complexity.

When it comes to inserting maps in the design, Mapsicle is the most efficient plugin out there. It’s buggy at times but it allows easy customization of those maps.

Isometric allows you to put almost any element from your design into a perspective view without quitting Figma.

Arc is a plugin which allows you to bend any text into a curve or a circle, though sometimes it doesn’t work very well.

Figma’s plugin library comes with many other nice — and some great — plugins right now and I hope we’ll get to see more awesome stuff in there soon.

The dark side of Figma

Image
Welcome to the dark side.

As nothing is perfect, Figma does have a dark side. Beyond the many features that I love, there are moments when using Figma is such an awful experience.

While Figma improved my workflow speed, as I mentioned above, setting it up to begin with is no easy job. It’s not even close to what you can do in other softs. And counting its other flaws, it can even become disruptive for your workflow.

The first annoying thing about Figma are its alignment methods. The shortcuts for the alignments are awesome, but once you group your elements, you can say goodbye to art-board alignment. So, you need to make sure you align your elements to the art-board before grouping them or you’re in for a nasty experience.

Measuring distances can sometimes be a hard thing to do if you don’t group your layers the way Figma wants you to do it. You need to draw rectangles to your desired paddings to make sure you’ve got proper spacing between elements.

A simple thing like copying pixel values from the width or height inputs to another layer is… trickier than it sounds. If you want for example your grid to be as high as the art-board, you have to copy and paste the height value input three times before it works the way it’s supposed to.

Prototyping… it’s there. But it’s a lot less than what you’d expect from it. The development team managed to make the feature a bit more advanced, but compared to Adobe XD and other design tools, Figma’s prototyping features and animations are a bit silly. Hope we’ll see better control and a more natural feel to the animations soon enough.

The conclusion

Image
Fireworks anyone?

Figma has its ups and downs, but overall, its future looks bright. The community is growing with each passing day, improving the user experience by building plugins, sharing designs on the community beta and much more.

There’s no doubt I will continue to use Figma for my actual and future UI projects here at Graffino, as it’s still the best option for me at the moment. I only hope that the development team at Figma will fix the issues I talked about in this post and will better this software until it’s a little closer to that perfection we’re all looking for.

You deserve a beautiful website.

Let us design and build it for you!