.png)
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 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.
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 :)
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.
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.
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.
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 :)
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.
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.
.png)
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.
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.
We made some big improvements to how you zoom within the canvas:
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:
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.
Made some big ol updates to our Figma plugin this week:
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.
.png)
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!
.png)
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!
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.
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:
.png)
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:
Another week and another major push towards making Contrast the fastest handoff tool there is. This week we:
.png)
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.
.png)
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.
.png)
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.