What We're Working On: Pitch (and our thoughts on Figma)

We’ve all used PowerPoint. Whether it was back in grade school or something we use every day at work, we've all been lead to believe it’s a necessary evil. Yes, Powerpoint has expanded its feature set over the years but they haven't made much headway solving the fundamental issues. Templates are a beast. Versioning is a nightmare. The features you need are buried under the ones you don’t—and don’t even get me started on how to generate a chart.

The thing about necessary evils though, is they’re often not that necessary.

All of this is why we were stoked to work with the team at Pitch who are building the “presentation tool for the Slack generation.” With intuitive features like real-time collaboration, live data integrations, asset libraries and third-party integrations (such as for stock photos), Pitch’s goal is to show the world that Keynote, MS PowerPoint and Google Slides aren’t necessary evils.

Pitch is here to show how behind the times and needlessly complicated presentation software is.

Pitch is putting those tools on notice. Just as Slack showed how antiquated other workplace communication platforms were, Pitch is here to show how behind the times and needlessly complicated presentation software is.

Until we can unveil more of the work we’ve been doing to help Pitch take down its presentation tool opponents, we thought we'd share what we've learned while dabbling with new tools to build these new products. In the case of designing Pitch, we got to try out the new kid on the block: Figma.

The design team at Pitch had already adopted Figma as their go-to design tool which presented us with a unique learning opportunity and opened our eyes to a debate we didn't know we wanted in on—Figma or Sketch?

Making molehills out of mountains

But first, a bit of background. Here at Metalab, we love Sketch. It’s been a game-changer for our product design toolkit since the Photoshop days. We also think the “if you don’t use this design tool, you’re cancelled” fights are very tired. There’s needless drama over which tool is best for the job. We believe the best tool is the one that best meets the needs of your team.

Okay, back to the project. Pitch's team had been using Figma since their inception, so we decided together that it was a good opportunity for our team to learn and expand our toolkit further. We’d heard good things about Figma but we had some reservations:

Our lack of experience with Figma might influence our ability to deliver our expertise as effectively as possible.
It lacked certain features that had become central to us as Sketch devotees.
While there would be benefits to 24/7 client team access to our design files, we know every designer knows the anxiety that comes with premature file sharing.

Nevertheless, we dove in. Was it challenging to balance internal and external review processes and manage client team expectations? Yes. Were we surprised by how much this new-kid-on-the-block tool surpassed our expectations? Yes. Here’s what we discovered.

Figma or Sketch?

On Collaboration

So long, Abstract file syncing. Native cloud collaboration means Figma is to designers what Google Docs is to everyone else. Design repositories finally become a thing of the past. The collaborative functionality of Figma also makes working with remote teams in the same file virtually seamless. Prototyping mode kills the need for the cumbersome Abstract + Sketch duo when it comes to presenting work. And when feedback can be shared directly in the working file, it saves time triaging InVision comments or clicking back and forth between screens. For both remote teams and client collaboration, Figma enhanced our ability to work smarter, not harder—together.

On features and functionality

Initially, Figma’s lack of plugins was a major drawback. We’d come to rely on Sketch Plugins in our daily workflow, so could we really live without Stark, Copy to All, Symbol Swapper and our own internally developed plugins? Luckily, Figma recently launched its own set of plugins, so we didn’t have to get too far outside our comfort zone. And while both Sketch Cloud and Sketch for Teams have attempted to meet the growing demand for collaboration-first functionality, it simply wasn’t built with collaboration as a cornerstone.

On pricing

TL;DR: there isn’t a huge difference in cost, per person, between either product. However, when you account for not needing Abstract to achieve what Figma provides out of the box, you’re essentially getting two products for the price of one. And because Figma is cloud-based, you can access your account from any machine, whereas Sketch is only accessible via licensed machines which in 2019 feels very...dated.

The verdict? It’s player’s choice.

From a learning curve perspective, Figma ended up being quite intuitive, worked in a similar manner to the tools our team already knows how to use, and the team found the documentation helpful for learning the more advanced features. Now that we know Figma well, we’re able to get others up to speed more quickly.

Ultimately, the right tool for the job is whichever tool both the client and internal teams are most comfortable with. Some of us still prefer Sketch for various reasons, while others are Figma converts. If this post has done nothing more than pique your interest in giving this new tool a go, we’ll consider it a win.

Moving from Sketch to Figma: A few tips

Files

Figma files are stored in the cloud and can be accessed within Figma’s file browser. By default, files you create can be found within the Drafts folder. Paid Figma plans offer the ability to organize and share files by Team and Project. Each file allows users to collaborate simultaneously and also offers automatic version history that can be easily accessed. But with all your files in the cloud, you might be asking: “Are my files stuck within Figma forever?” Nope! Figma offers the ability to export (and import) .fig files for safekeeping on your company’s archive.

💡Handy Tip: Figma allows you to import Sketch files. Simply drag your Sketch file into Figma’s file browser.

Frames

When ramping up on Figma, Frames felt hard to understand but after a while we came to appreciate them. Frames can be thought of as Figma’s souped-up version of a Sketch Artboard. They are used to contain content and have the option to clip content that lies outside of its boundaries. Frames can be nested within each other, offer the ability to scroll within a prototype and allow you to create a custom layout grid. By default, when a Frame is resized, the content within it adapts. The way an object adapts is referred to as its Constraints. Selecting an object within a Frame will reveal the Constraints panel, which allows you to choose how your content adapts to its parent.

💡Handy Tip: Want to resize your Frame without adjusting your content? Hold down the Command key while resizing.

Styles

Styles in Figma can be defined for Grid, Color, Text, and Effects. Styles are accessed from the icon made of four circles and each is treated separately. For instance, in Sketch you could define a style that includes text settings as well as color, but in Figma you would create and set text styles and color separately.

💡Handy Tip: You can add a group name before your style name to automatically group styles together. For example, naming your h1 style “Headings/h1” would allow you to group all headings together within your text styles.

Components

We’ve all come to rely on Sketch Symbols and the efficiency they add to our workflow. Figma offers a similar feature, Components. Unlike Sketch’s symbol page, master components can live anywhere within your file. Rather than relying on an overrides panel, instances of a component are adjusted in-line. Need to edit text? Simply click into the text field of the component and edit the content.

💡Handy Tip: Like Sketch, Figma allows for slash-separated naming, which will automatically group your components (e.g. “Atoms/Buttons/Primary Button”).

Libraries

Figma’s Team Libraries allow you to publish components that can be shared between projects and individual files. When publishing a library you can choose which specific components will be shared. Libraries can be linked and accessed from the Assets tab, which lives next to the Layers tab.

💡Handy Tip: If you’re working on a library component and want to ensure it doesn’t get published by accident, name it with a period at the beginning and it will be ignored.

Keyboard Shortcuts

Most keyboard shortcuts are similar when moving from Sketch to Figma, but there are minor differences. Custom shortcuts are not yet supported within Figma, but you can still create custom shortcuts from within the Keyboard settings in macOS System Preferences.