Changelog.

Join 100's of designers & devs getting the weekly changelog
You're subscribed!
Oops! Something went wrong while submitting the form.
Diff

Been waiting to post this changelog for quite some time—and we're freaking pumped! Contrast automatically tells you the difference between your code and Figma designs. It's like a spell-checker for UI.

It's fast, accurate, and will have you building pixel-perfect UI in seconds. No opening DevTools, guessing & checking, and getting bombarded with design bugs. All of that is now gone.

You can get started by following these instructions or watch the video of Diff in action.

Storybook Addon Gallery

Storybook just released their new and improved Addon gallery! They have more than 200+ amazing plugins to help supercharge your Storybook (including ours!).

You can check out the new gallery here and read more about why we built our Addon here.

December 18th, 2020
Tokens

Do the tokens you use in your codebase match what's in Figma? Heck, do you use tokens that can't be represented in designs (i.e. spacing)?

Contrast has got you covered. Starting today, you can add your Color, Spacing, Radii, and Shadow tokens. You'll now see the actual variables you use in your codebase when inspecting designs.

This update will get you building UI at insane speeds without the headaches. If you use other design-tokens you'd like to see, let us know :)

December 2nd, 2020
Storybook

Sorry for going a little dark there but we've been cranking away on something huge...

Storybook 📔📕📖📗📙📚📘

We ourselves are deep users and lovers of the Figma + Storybook combo. But over the years, we've noticed just how disconnected our code is from the designs—causing so much wasted time, inconsistencies, and frustration. So we bridged that gap and created a connection between the two.

Connect code <> designs

As UI engineers, we endlessly click around designs and immediately wonder: is this component built already? What's it called? Where can I find it? Is this something new I need to build?

This constant questioning sucks. It makes building off designs slow, tedious, and annoying.

Contrast now solves this. You can connect Figma components to your Storybook Stories in seconds—letting you see your coded components embedded directly in the designs. Finally, you have all the docs, info, and context you need to build UI blazingly fast.

UI Utopia

Building frontend requires a masterclass in tab-hopping. Jumping from one screen to the next, losing your place, and transforming into a rabid-rabbit (say that 5x fast). But with our new Storybook Addon, you can transform your Storybook into a UI Utopia. Contrast embeds your handoff tool in the same screen as your Storybook Stories—side-by-side. Shed those bunny ears and enter the world's best UI playground.

Improvements & fixes
  • Support for Figma variants!
  • Performance improvements to Syncing, Re-syncing, and our overall app
  • Fixed a re-sync bug
  • Fixed a real-time observing bug
  • Slight improvements to Linear integration
  • Fixed a bug with Master components coming from Figma

November 20th, 2020
Plugin History

This week we added a History tab in the plugin—showing your previous syncs to Contrast within a Figma file. Each row says how many frames you uploaded, to which project, and a link to open it within Contrast. We added this to give you and your team more visibility and confidence when working with our tool :)

Improvements & fixes
  • Made some major improvements to the performance of the Figma plugin. It now opens ~10X faster than before
  • Fixed an issue with certain masks not working when inspecting
  • Made some slight improvements to our Linear integration
  • Improved our "syncing" state when trying to resync projects within Contrast
  • Fixed an issue with deleting frames

October 16th, 2020
Linear integration

We're so excited to release some massive upgrades to our Linear integration. We use and love Linear internally (you can read about our process here) but we wanted to supercharge our workflow even further when using Contrast + Linear together.

Now, you can link pages or frames in Contrast to Linear issues—in seconds. Issues are automatically populated with an image of the frame, helpful metadata, and a direct link back to the frame in Contrast. You can also view all your linked issues and their statuses next to your designs.

We're so excited to launch this and we hope this makes Linear even better for you and your team. Learn more about how to set-up the integration here.

Grid View

This week, we've introduced a whole new view in Contrast. If you don't want to pan around the Canvas, you can now view all your frames in an organized grid. When you click a frame, you'll view it in isolation and can quickly paginate to the next.

Quick tip: you can switch views in Contrast using keyboard shortcuts. Press G then G to switch to Grid view. Press G then C to switch back to Canvas. And press G then S to open the sidebar.

Improvements & fixes
  • You can now delete frames and pages within Contrast
  • We made the dashboard more responsive for smaller resolutions
  • Improved the performance in the Canvas
  • Fixed an issue of not showing opacity in colors
  • Fixed a bug where we weren't showing Master component metadata

October 9th, 2020
Real-time v.2

We use an amazing tool called Room Service that allows you to view your teammates cursors and observe their movements within Contrast. They recently created an amazing v.2 of their tool, which we just upgraded too. You should see performance improvements and an overall better experience when it comes to real-time actions in Contrast thanks to them :)

The changelog might seem a tad lighter this week because we're working on some larger but exciting projects that aren't quite ready for prime-time yet.

Improvements & fixes
  • Improved the performance of our dashboard
  • Fixed a Figma component bug that was displaying incorrect spacing
  • Fixed a bug that was not letting users click on certain elements within a mask
  • Fixed a bug that wasn't displaying text-transforms in the CSS panel

October 2nd, 2020
Mirroring V.2

Excited to push our second version of Mirroring to Contrast. If you make a change in Figma, you can resync directly from Contrast without having to return to the plugin. You can also open the original file in Figma from Contrast.

Zoom

We made some big improvements to how you zoom within the canvas:

  • Input the zoom % directly into the input field
  • We improved the speed of zooming in and out to mirror it more closely with Figma
  • If you use Cmd + or Cmd - we automatically zoom in with even numbers i.e. 50%, 100%, 200% etc.

Improvements & fixes
  • We now display your Saved Style name from Figma when inspecting borders
  • Projects in the Figma plugin dropdown are sorted by newest first
  • Made some performance improvements to processing and syncing frames from Figma
  • Fixed a bug when searching for comments
  • Improved the image resolution of the frame thumbnails in the dashboard sidebar
  • Fixed a bug when uploading certain components to Contrast
  • Removed scrollbar gutters on all our dropdowns
  • Fixed our dark-mode tooltip text color
  • Fixed a positioning issue if your Frames in Figma aren't clipping the content

September 25th, 2020
Saved styles and components

When you sync frames from Figma to Contrast, we now automatically pull in your saved styles and components. When you're inspecting, you can now view:

  • Saved style names for colors, text, and shadows
  • Component name, thumbnail image, and the name of the library it comes from

Improvements & fixes
  • Improved the performance of our Figma plugin
  • If you upload a Figma file, we know mirror your Page name order in the dropdown
  • Improved our zoom in/out sensitivity
  • We no longer show hidden frames in Contrast
  • Inbox comments are now sorted by newest first
  • You can now select masks when inspecting
  • Revamped and redesigned our tooltips
  • If you are already logged in when opening a shared project, we no longer flash the login screen
  • You can no longer sync from Figma without there being frames present

September 18th, 2020
We launched!

This week we officially opened the doors to Contrast! You can read our announcement here. Huzzah!

We've already been getting some amazing feedback from you and we would love to hear even more! If you have any ideas, feedback, or issues -- please let us know anytime at support@contrast.app or DM us on Twitter.

Figma plugin

Made some big ol updates to our Figma plugin this week:

  • You can now sync Figma files, pages, or frames to Contrast using the file URL in Figma. Simply open the share modal in Figma → copy the link → paste it into the Contrast plugin → and voila — your file will sync with Contrast. So simple, so beautiful, so clean.
  • We also made some major UX improvements to the plugin. Added borders to all the input fields, cleaned up the copy, added new onboard states, and a whole lot more!

Onboard flow

Tightly coupled with the Figma plugin updates, we made some big changes to our onboard flow. We removed some steps, added a few new ones, and most importantly—decreased the amount of time it takes for you to really get going.

Improvements & fixes
  • Fixed a few visual design issues with our commenting
  • Updated our user-avatars look and feel
  • Fixed an issue with our command center
  • Improved the keyboard pagination when you're in "Presenter" mode in the canvas
  • Improved how our icons are rendered and displayed

September 11th, 2020
Help Center

Need help with Contrast? We've got you covered. In the bottom-left hand corner of Contrast, you'll see a question mark. Click it and you'll be able to go to our Help Center here or directly chat with someone on our team. If you have any questions, feedback, or issues, please hit us up!

UX Debt

As a team who deeply cares about the UX and visual design of our product, we've spent a long time cleaning up areas that weren't looking or feeling quite right. Spacing, sizing, colors—we've updated everything to make Contrast more consistent and beautiful for you!

Improvements & fixes
  • Improved the export speed of assets
  • Added the ability to edit your project's name, description, and color
  • Added a progress bar to the top of the page when your canvas is loading
  • Fixed a bug where avatar images weren't showing in the dashboard
  • Fixed a gradient fill bug
  • Fixed a comment positioning bug

September 4th, 2020
Export

Oh, you want that cute little svg? Sorry, the designer hasn't marked it as "exportable." Psych. Forget that garbage because now you can export any selection you make in Contrast. Click anything, press Export, choose your resolution, format (PNG, SVG, PDF, and JPG), and you're done. So simple, so elegant, so beautiful—chefs kiss.

We are pumped about this feature. Exporting seems like something that would be so simple but can cause so much wasted time and frustration. Well, no longer.

Performance

Hasn't performance been a section in your changelog for the past 3 weeks?? Yes, it has. We want you to be building frontend at lightning speed and if our tool is slowing you down, then we're not doing our job.

This week, we've made some MAJOR improvements to performance including:

  • Syncing speeds are out of this world. Even if you upload massive files with tons of frames and pages—we've got you covered.
  • The frames in your canvas should now load at an insane clip. We love this and so will you.

Improvements & fixes
  • We added chat support! Talk to us anytime—we'd love to hear your thoughts :)
  • Fixed a bug that was occurring when you renamed a frame.
  • Fixed a bug happening when viewing frames in Preview Mode.
  • Made some improvements to our zooming increments
  • Fixed a bug when users added a new project through the dashboard

August 21st, 2020
Major redesigns

After gathering feedback, we've redesigned a few key sections of Contrast. These changes make it faster and easier to navigate, search, and inspect designs within Contrast. You'll now see a fresh coat of paint and reconfigured:

  • Dashboard Sidebar - The sidebar that shows your teams, inbox, shared files, and search is always present and visible—making it easier to navigate and know where you are
  • Canvas Navbar - We've expanded the navbar in the canvas to full-width, increased it's height, and made the buttons larger—giving you a bigger target to switch modes and views
  • Updated Inspector - We've simplified our inspector to further reduce visual noise and help you focus on what's important. The accordions and icons have been removed, leaving a flat and clean view of the CSS
  • Updated Page Switcher - We've moved the page switcher within the canvas to the navbar—making sure you can always change pages, no matter where you are

Performance

Another week and another major push towards making Contrast the fastest handoff tool there is. This week we:

  • Drastically improved the time it takes for Figma files, pages, or frames to mirror to Contrast
  • Made major performance enhancements to our Canvas loading times
  • Added skeleton states and progress bars for when frames are loading in a project

Improvements & fixes
  • The first project in your dashboard is automatically selected
  • Press the "Enter" key to go into a project from your dashboard
  • Fixed a user avatar and Slack bug
  • Fixed a bug, which was preventing some saved styles and component previews coming from Figma

August 14th, 2020
First changelog

Hey everyone—and by everyone, I mean hi mom. Today is an exciting day, the first day of Contrast's changelog! Hooray!

Here you'll find a new post once a week, showcasing any and all updates we've made to the product. If you'd like to stay up-to-date, subscribe to our newsletter! And with that, onto what's new.

Command Center

It's 2020. If your product doesn't have a command line, then your team is clearly not susceptible to trends. BUT, we are. And thus, we have added a command line. The thing is...this trend rules.

Kris has been tidying this puppy up and it is slick. Anywhere in the product, simply press ⌘K and our magical-modal shall appear, allowing you to take action without leaving your keyboard. We're excited to continue adding new commands and functionality to this.

Speed

Normally, performance would probably be dropped in the "other" category, however, we're not doing that today. Jono has been tirelessly fiddling with AWS, APIs, and other technical terms starting with the letter "A."

And he crushed. Contrast is fast—and only getting faster. We personally hate slow things (unless we're talking food and then low-and-slow is *chefs-kiss) so we're constantly putting a ton of effort into making Contrast quick. We hope you enjoy.

Improvements & fixes
  • Sort projects by Recently updated, alphabetically, and by created date
  • Click Shift+2 to "zoom to fit" onto a screen inside Contrast. Super helpful if you're v far away and want to get to a screen quickly.
  • Paginate through your projects using the up and down arrow keys on your keyboard
  • When you click on a comment from the sidebar, it won't alter the zoom % you're currently at
  • Fixed a backend bug that was hindering performance of the canvas mount

August 7th, 2020