A new Photoshop plug-in is helping to bridge the gap between design and code — Inspect by Invision is a new tool that gathers design data like font names, exact color combinations, measurements, and more, simplifying the collaboration between the designer and the developer.
Invision, a suite of team collaboration tools, released the Inspect Photoshop plug-in earlier this month to simplify the handoff between designers and developers for website and app development. Invision exports a Photoshop file’s data and creates a shareable link. With that link, developers can access the design’s specifics or even copy and paste that information as CSS code.
Ryan Scheuermann, an engineering manager for Inspect, explained that without the new plug-in, most designers would create notes in a file to make it possible for developers to replicate the design in code, explaining graphic sizes and locations, fonts and colors all manually. The new collaboration tool means developers don’t necessarily have to pay for a Photoshop subscription to open up a PSD file — and designers can streamline the collaboration process with a simple sync, increasing productivity and eliminating guesswork.
“The biggest goal for Inspect is to be the single source of truth for the design and collaboration on a project, allowing the entire team to forget about logins and tools and focus on collaboration. We support the team’s workflow from concept to code,” Scheuermann said.
Inside Photoshop, designers can use Photoshop’s art board feature that allows them to create multiple designs on separate pages inside the same design file. The plug-in then adds a sync option with Invision, which will generate a shareable link to send specifics to other team members.
Inside that link, Inspect displays the design file. Clicking on each element — or on the layers on the left navigation panel — will display that object’s data on the right, from exact size and position to fonts and colors. The layer’s CSS data is also included, and individual graphics can be downloaded from Inspect as PNG files.
Invision is a collaboration software company made up of 250 people that all work remotely — using their own collaboration tools to work. Along with the Photoshop plug-in, the company offers a similar option for Sketch. Invision’s suite of collaboration tools range from private cloud file storage to free team-oriented plug-ins much like the Photoshop option. The company says the collaboration tools are used by a range of creative teams from freelancers and small businesses to Fortune 500 companies. Teams from Yahoo, GE, Expedia, Slack, Cisco, Kohl’s, and more utilize Invision’s collaboration tools.
Invision — and the Inspect plug-in — are available to use on one design file at a time for free, with subscriptions for collaborating on multiple projects starting at $15 a month.
