Hitting Warp Speed With Figma

A little over a year ago we switched to Figma for designing and iterating our sites. Let’s rephrase: a little over a year ago our design process got a long overdue kick in the a-hem, and we haven’t looked back since.

A Requiem For Photoshop

Just kidding. Adobe products are still the gold standard of design software — and we definitely still have our heads in the Creative Cloud — but when it comes to designing interfaces, especially for large-scale builds, Adobe loses a little of its luster.

Designing user experiences and interfaces in Photoshop was a lot like Hansel’s heroic scene in Zoolander where he said "We’ve got 30 years worth of files right here in this computer that are gonna bring you down!" except all of the files were .psds and all we were bringing down was our development team. We had documents for every screen/viewport size, for every page, for every project. Style guides alleviated some of the headaches, but custom web builds have plenty of nuances*.

(*Design calls them nuances. We’re not convinced it’s a typo when dev calls them nuisances.)

While the dev team was busy sifting through dozens of files, design was busy creating dozens of files. Reusing elements and layouts was a pain, and the CC library wasn’t around yet to try and ease that pain. Just like the minds behind products like Sketch, InVision, and Figma had questioned the design process, we were putting our heads together at Altos in search of a solution.

We switched over to Figma in early 2017 and since then we’ve noticed Adobe has implemented things like Photoshop artboards and introduced their own experience design software. XD is lightweight and designer-friendly. Major props to Adobe for a quality product. Kudos to Figma, however, for doing it first.

‍

The 5 Minute Difference

When it comes to designing in this new era of lightning fast software, there really isn’t any time to waste. Speaking of wasting, how often has an Adobe product quit "unexpectedly" on you? P.S. Adobe, we actually do expect it. It’s okay, they beckon, all is not lost! Photoshop’s background autosave feature can be set to save every 5 minutes! All may not be lost, but 5 minutes of lost work is a lot like spilling a little milk from your cereal; still the same Lucky Charms, but you did lose a marshmallow.

Figma saves with every single change. Repeat: Every. Single. Change. Not to mention that documentation about the change can be added or edited at any time. There is no such thing as lost work, and Version History means we can swan dive back into any part of the design process. Keeping all of your marshmallows: this is the 5 minute difference.

Break Free With Constraints, Components

Break free with constraints? That sounds a little backwards, doesn’t it? Not nearly as backwards as designing in Photoshop sounds to us these days. Constraints are element restrictions that make resizing and restructuring interfaces and web pages 11X faster*. Why resize every element for various screens sizes when you can set some constraints and resize the frame that contains all of them at once? Exactly.

(*Very Scientific Data: We turned our productivity up to 11, because it’s 1 faster than 10.)

Now let’s talk about Components. Actually, let’s rave about them. Figma’s Components have made making design changes less intimidating, faster, and all-around easier. Designers love to switch things up. It’s what makes this profession so exciting. We get inspired, then we create something new. Repeat. By setting different elements to be Components, reused elements throughout different layouts can all be changed simultaneously by only altering the parent instance. Maybe you’ve heard of components, or maybe you just overheard the collective sigh of relief from the entire design industry when they were first introduced.

Are We Talking Teams?

Yes Drake, we are, and what a time to be alive it is. One of our favorite features of Figma, and the reason we chose it in the first place, is its collaborative capability. Multiple people from any team in our office can be working in the same file at the same time, making changes, making suggestions to specific elements via the robust Comments feature, and making their own difference in the project.

Design/dev handoffs have been simplified by, well, let’s just stick with the 11X faster theme. Style guides are still the end-all for making a designer happy, but now developers can see the margins, padding, and any number of other styles of nuanced elements without having to consult with a designer.

‍

Presenting With Prototypes

While we think there is some room for improvement here, there’s no doubt in our minds that our presentations have become much more impressive by using Figma’s built-in prototyping and presentation link generator. Being able to "use" a concept helps our clients understand the product we’re building for them way before it’s time for a client test. We’re ready for more robust animations within these prototypes, and with Figma’s recent Haiku integration, the wow-factor during presentations is finally within reach.

Figma Is Our Future

As other products have come out and highlighted features that give them a competitive advantage, we’ve stuck with Figma. So far, when we’ve seen other products release a new feature, Figma either already had it or released their own version shortly thereafter. The support at Figma is as boundless as the opportunities that it presents.

For now, we’d like to see more robust prototyping and animating, a global color system of sorts, and some sort of photo editing integration. We’re confident that the Figma ecosystem will continue to introduce features like these.

It hasn't disappointed us yet.

Update: 06/22/2018

Figma 3.0 is here! In the new release the Figma team has addressed most of the features we wanted to see implemented. There is now built-in styles functionality, additional prototyping features, and a new organization tier catering to large organizations. While we weren't the only ones to make such requests, this is a primary example of the strength of the Figma community and the constant evolutionary trajectory of the tool.