Mickey and Dan VS. Figma

Our Product Owner came to us the other day, and said: “Guys, I need a whole feature (and it is not a small one) done by the end of the next week. Here are the specs.” We both looked at each other and said: “Damn.”.

We recently booked our tickets to Nordic.design conference in Stockholm, and, merely 15 minutes earlier, we received an email about the speakers on the conference, and one of those people was Noah Levin of Figma. So, we gave it a thought, and decided, let’s try to use Figma in this process. At least for some crude wireframing, and we’ll refine it later in Sketch.

Setting everything up

Initially, we tried to use Sketch + Freehand, but due to some server errors or something, we never made it work. This was the first of Figma’s surprises. I simply created a project, and invited Mickey to it, and that was it. Simple as that. Soon, we were typing each other some messages right on the artboard, and hysterically laughing at the cursor movement. I’ve never experienced anything similar with a design tool. We both haven’t.

Integration

Now, this is a bit which kind of worried me at the beginning, but we quickly found a workaround. Instinctively, the first thing you do when trying a new software is to check out if you can seamlessly shift from one to another. Since we were working with an established product with all the style guidelines imaginable, we naturally wanted to keep as much as possible.

First I tried simple Cmd+C & Cmd+V from Sketch to Figma, just to test it out. It worked but it took me a bit to realize that Figma generates an image out of vectors from Sketch. A quick Google search revealed that you can simply copy SVG code from Sketch and paste it in Figma, and you get your vectors where you need them, complete with all the grouping and everything.

Integrating it with invision is a bit of a hassle, since it is not automated as it is with Sketch. Since all of our project files are in InVision, and all of our devs are using it daily, we decided to the refinements in Sketch. Turns out we didn’t have to.

The Actual Work

Now, when it comes to pushing pixels around, Sketch is still the king. With all the options, plugins, symbols etc, it delivers consistent design much more easily than any other software. When you add the integrations to the list, it is pretty clear why it is the most used UI design software at the moment. But the thing Sketch lacks is collaboration. And that’s the second of the surprises of Figma.

As you know, when two devs work on the same code, they shouldn’t edit the same line (I guess). My previous experience with Git taught me that when one guy works on something, the other guy doesn’t. That was the case of my reluctance to work on the same elements with Mickey. But I tried to give it a shot, and check this out: I was rotating the object at the same time Mickey was moving it and changing its color.

Boy was I surprised. He then moved an icon from one place to another, and I moved the selection indicator below the icon. It was like he removed the steak from the barbecue, and I put a plate underneath!

This savory taste of collaboration didn’t go away. Turns out that Figma has the right combination of Illustrator and Sketch based keyboard shortcuts. You know when you try to pick a color pressing i in Sketch and it doesn’t work? Exactly. Pressing i in Figma brings the color picker.

This enabled us to do the wireframes in a very short amount of time.

Now it is important to note that this short amount of time is one afternoon. That talks a lot about Figma’s learning curve.

Returning to Sketch

Since I talked about integration with InVision, it was mandatory to return to Sketch to upload the results. Now, here we had a bit of a hassle, since copy-paste doesn’t work exactly as wanted. We exported the SVG fom Figma and simply drag-n-dropped it into Sketch. You can also use SVG Import for this, and simply copying the element from Figma and pasting it into the plugin window.

Conclusion

It might take a while to fully integrate Figma into our workflow, but for now, it definitely takes the cake when it comes to design collaboration. We can devise, revise, iterate, compare, modify and critique each other’s work like never before.

Figma, we wish you all the best!