When my team made the switch from Sketch to Figma, it was my job to make us a functional library with everything we could possibly need. This is how I did it.
My team at NetApp finally did it. We made the jump to Figma. I’m not a Figma zealot (yet), but we’re loving it so far.
Previously, we had some members of our team using Macs and some using Windows, so we were using a combination of Sketch and Axure. My teammate using Axure decided that he was tired of making the repetitive sorts of changes that it required over and over, so he switched to Figma for a few reasons. 1: they don’t make Sketch for Windows, and 2: it solved some of the major complaints that he had about Axure, especially relating to how components work.
When this teammate went out on family leave for 6 weeks, I was charged with picking up some of his designs, and thus jumped headfirst into the world of Figma.
Relative to Sketch, I was impressed at the extensive ability to modify instances of components without needing to detach them from the master. Colors, fonts, styles, visibility and more could all be overridden and still maintain the link. Pretty cool.
After a few months, we got wind that some other design groups in the company were making the switch and were asked if we would like to jump onboard for some licenses. The decision to do so was pretty easy.
This page isn’t about how great Figma is though, so let’s jump into what this is really about: how I created the best, most useful and functional design library possible for my team.
A key part of having an efficient design team is creating a complete library of styles and components available to drop into designs. I had previously created and managed our Sketch library, so I recognized that I was the one who would need to facilitate the creation of the same for Figma.
I wanted to push Figma to its absolute limits and take advantage of every feature that it offered to reduce some of the tediousness that can often plague UI design.
I split the task into two different categories and tackled both of them in one sprint:
Figma has a few really awesome features that I intended to take advantage of. Ordered by usefulness, these were:
Now that I knew what my goals were, it was just a matter of buckling down and doing the work. When I started out, I wasn’t super familiar with Figma, but this certainly did teach me what I needed to know.
I found it most effective to complete items in this order, since each successive step would use the output of the previous:
I had the benefit of some existing Sketch libraries to copy things from, but it really turned out to be more efficient to to recreate things from scratch in the way that they're supposed to work in Figma and duplicate them from there before applying the styling needed for different states.
Some cool and useful things I was able to incorporate:
Overall, this was a great way to learn how to use Figma. I got some pretty glowing feedback from the design team, and they've found it useful so far. A few bugs have been discovered, but Figma makes it easy for anyone to go in and fix them. I would consider this a success up to this point.
