← Back
You're Subscribed!
Oops! Something went wrong while submitting the form.

You Should Be Using Contrast

If the title did it's job, you're wondering if that's true, should you really be using Contrast? I am wildly biased but putting that aside, the simple answer is—yes—you should.

What is Contrast?

Contrast is a developer handoff tool (think Zeplin), completely reimagined for Figma. It's the new way to inspect, collaborate, and build components from Figma designs. We built Contrast for ourselves, a team of designers and engineers who collaborate remotely, build components, and love speed. So that's what Contrast is, the fastest way to build frontend from Figma designs.

Now, I won't go into every nitty-gritty detail but I wanted to highlight some of the magic we've brought to life.

Space

This feature rules.

Redlines. Let's be honest—they blow. You lose your place. There are literally redlines EVERYWHERE. They show you dumb spacing. Like do I need to know the distance from the edge of the Artboard to my 24px icon button inside of a modal? No.

So, we made magic. We've taken your designs, and applied the DOM hierarchy to them. Insane.

So, what does this mean for you? Well in short, Space shows you padding and margin in designs. As in—click an element, let's say an input field, and view the padding inside relative to the text AND the margin outside relative to its surroundings.

You'll likely shit-bricks when you use it.

Mirror

Dang, this feature also rules.

I'm a designer and if you're reading this, there is a good chance you're a designer as well. As designers, we constantly make changes—all the time. And if you've ever had to upload designs to other tools (rhymes with Shmeplin and Shminvision), you know how it sucks ass. So, we got rid of that. And we made Mirror.

Through our Figma plugin, you can select entire Files, Pages, or individual Frames in Figma that you want mirrored in Contrast. This means, anytime you tweak your designs or make a change, it automatically mirrors that change in Contrast. Meaning, you'll never need to constantly upload your designs again.

Or, for many of us, never forget to manually upload a design and then find out your teammate just spent the past 3 days working on the out of date design and now you feel like a gigantic asshole idiot and don't know whether to say something or not and everything is ruined.

Seriously, Mirror is huge. Your team will stay organized, efficient, and aligned.

View

As engineers, we like customization. Just ask Jono—he uses VIM and his IDE is clown-town. So, we took that customization-concept and added it to Contrast.

Instead of viewing hundreds of design thumbnails in a tiny grid, squinting to try and find the right one, Contrast allows you to view them all in a Canvas—just like how you view in Figma. But, if you like viewing them in a grid - no problem - you can do that too. Want to see just a sidebar preview of them? Gotcha covered. Or, enter into Presenter mode to view 1 screen at a time. Choose your own destiny—just like those Animorph books from back in the day.

Verify for Storybook (super alpha)

So this is some next-level shit. It's super wild. And it's very much in alpha (pre-beta). Before I start, let me paint you a little picture. You're a frontend engineer. You're tasked with building a new component. What do you do:

  1. You look at the design and memorize the values
  2. Hop to your IDE and plug them in
  3. Go to Storybook, refresh the page, and take a mental note of how it looks
  4. Hop back to the design to see if they match (i.e. take a wild guess)
  5. Repeat a billion times.

This is what all of us do, everyday. And guess what, we're usually wrong. There are so many values to get right but there is simply NO WAY TO know if you are. Then during QA, design catches a bunch of bugs that you now need to fix. UGH.

What's crazy is this is the only area in engineering that isn't binary. There is no—Yes-great job-this looks just like the design—when it comes to building frontend components. It's just a subjective guessing game and constant back-and-forth.

Well that's where Verify comes in. Select the component you're building in Contrast → press Verify → select the same component in Storybook → and voila. We tell you the exact diff between the two. Spacing, colors, typography, shadows, literally any CSS property you can think of. Verify finally brings binary testing to building frontend.

As noted, this is still very much in alpha. If you're an insane early adopter and like to test REALLY NEW stuff, then let me know here.

And so much more...

I don't want to bore you but there are just so many incredible details that make Contrast what it is—a tool you'll truly love to use. Here are just a few other awesome things to note:

  1. Integrated - We have amazing integrations with Slack and Linear. We have plans to add many more so let us know what you use 👍
  2. Real-time - It's 2020 so of course this puppy has real-time collaboration. Join your teammates in the same project and view where they're at. If someone wants to show you around, simply click their avatar and observe their movements as they present.
  3. Keyboard first - Anywhere you are in the product, press command-K to open up the Command Center. Get around without having to touch your mouse.
  4. Themes - We have a Dark theme. We have a Light theme. They're both very attractive.
  5. Commenting - Comment anywhere on the canvas. @mention teammates, quick-add emojis, resolve issues, and add replies.
  6. Inbox - View a unified inbox of all new comments or replies you're following.

$$$

That was a long list. And now you may be thinking, are they doing a Superhuman thing here? Making a premium product and then charging premium prices for it? Yes to the premium product. No to charging a billion dollars for it.

We love good software. We love things that feel premium. Fine leathers. Rich woods. The smell of pine. But when it comes to B2B SaaS software, we don't love paying a trillion doll-hairs for it—and more importantly—we hate the constant worry about how much we'll start paying if we add a new user or want that new feature. So for our own company, we've made it simple.

Use Contrast free forever with 5 projects, unlimited users, and all other features. If you need unlimited projects and priority support, upgrade to our Pro plan for $99/month. No upsells, no seat-model. Just simple. We'll also have an enterprise plan in the future so let me know if SSO + SAML, advanced user permissions, and centralized teams are things you need.


If you've made it this far—congrats. And if you'd like to give Contrast a try, sign up for free here.

Lastly, I genuinely would love to hear your thoughts. DM me on Twitter or email me at brendan@contrast.app with any feedback you may have—both the good and the bad.

And with that—until next time,

Brendan

Co-Founder, Contrast