Vercel Offers New ‘Figma-Like’ Comments for Web Developers
Vercel’s CTO, Malte Ubl, remembers when Photoshop ruled the pixelated world. He took a few months’ break and when he came back, Sketch had taken over from Photoshop because it was better for designing UI. Shortly after that, Figma flipped the game by introducing collaboration tools to its design software. Google Docs transformed word processing software in the same way, usurping longtime giant Microsoft Word with live collaboration, Ubl said.
Vercel, which provides a frontend stack for web developers, wants to change developer workflows in the same way that Figma and Google Docs transformed their respective tools. Until now, getting feedback on a website required users to screenshot the page and then paste it into Slack or a doc for feedback. The company officially launched a collaboration tool called Comments on Preview Deployments just days before Christmas. It allows team members to comment on a web page after it’s been created.
After two months, the data shows that customers are embracing it, he said. It’s receiving around 5,000 new comment threads per week, with a total number of comments around 64,000 since its December launch.
“We’re not actually, in any way, in the same space as Figma, but we are adding amazing collaboration to this part of the workflow,” Ubl said. “The vast, vast, vast majority of our customers are using it. You have to think of it basically as a transformation of the workflow for web development, similar to [the] transformation when people went from Sketch to Figma.”
Adding Figma-like collaboration to developer workflows has the hallmarks of a trend in the making. Already, The New Stack has reported on StackBlitz’s launch of Codeflow last October. At that time, StackBlitz also announced it would offer a more integrated collaboration experience, after an investment from Figma. CodeSandbox also offers collaboration support in its IDE.
How It Works
Vercel’s offering simply injects a JavaScript file into the web page during preview. The file loads the toolbars, which is basically a shadow document object model (DOM) element. In its shadow, which is hidden from the main page, is where the app runs, Ubl explained.
“That gives you the flexibility of being directly within the application that your data host is in, but you’re not impacting in a negative fashion in anyway, which is something we have to be very conscious about,” Ubl said. “Obviously you don’t want to break the site that you’re helping people comment on.”
It’s very clear what the comment refers to, since it allows users to put in the popup comments right over the site’s element. It can be restricted to just a development team or, as with Google Docs, there’s a “share link” function so developers can gather comments from agencies or customers.
“It’s absolutely in context, and this is now in real time communicated to the person who originally made this pull request … and anyone can can jump in and and make a change as well,” he said.
Comments will also show developers important metadata about the commentator. For instance, it will show the commentator’s device pixel ratio, which browser they used and which operating system it was deployed on — all of which can affect a site’s performance and aesthetics.
Integration with Git Providers
Comments on Preview Deployments also supports Slack integration, so the conversation can continue on a Slack channel. Comments also supports three git providers; GitHub, GitLab and BitBucket. Integration with these providers offers a full feedback loop to easily access previews and data on open/resolved comments.
“You install the Vercel application into your GitHub and then Vercel gets a git, gets a web hook, [it] calls every time any changes [are] made to a pull request,” he said “So every time that happens, it triggers a build on Vercel’s site immediately. And then we post back a comment into the pull request that tells you here’s your previous deployment, where you can see the change that you just made.”
Finally, it supports comments in the command line interface workflow. Deployments created via CLI will generate Preview deployment links with comments enabled.
Even though it’s designed primarily for teams to use privately, Vercel did give it a massive test run by enabling all readers to comment on the beta Next.js documentation site. Vercel built 0ut some comment moderation features for that trial run, but it ended up being unnecessary, Ubl said. Readers submitted thousands of comments, he said.
“It’s really for teams privately using it,” he cautioned.
