Layer detail enhancements for a better developer handoff experience

I’m a front-end engineer at Abstract, and today, I’d like to share a new feature I built to make surfing your Abstract data easier. This new Inspect functionality lets you hop to a symbol master (where the symbol lives) from a symbol instance (where a symbol is being used), bringing your design systems libraries right up close to your final designs.

The way designers think about symbols in design systems runs parallel to how modern web development frameworks think about components. Symbols are reusable and generic units like buttons, forms, or cards that are used across multiple designs in different ways. The symbol master will have template inputs that let a designer change parameters like color, copy, or sizing, depending on what a symbol instance needs.

It can be really useful for a designer or a developer receiving a design handoff to quickly access a symbol master. A web developer’s flow also involves building generic template components with multiple variable parameters. Access to the symbol master gives more context, making it easier to build such a component.

For designers who may be less familiar with the design system (perhaps because they’re new to the organization), this feature also makes it easier to track down which symbols are being used.

How it works

This navigation will appear as long as your symbol master lives in your Abstract organization alongside the instances. Start by hopping into Inspect to get the rundown on the component’s measurements and parameters. When you select a symbol in the layers sidebar on the left, the properties panel becomes a button.

As the symbol master loads in, the name will update to the symbol master’s name. This is consistent with Sketch’s interface. By clicking on it, you’ll hop straight to the symbol master, and be able to inspect it free from any distractions.

Here, you’ll also see the related components in the design system and other artboards in the symbol master’s file. You can find anything you need as a developer to create a fully fledged component. You can even dig deeper into nested symbols, as far as you want to peruse.

When you’re done, you can go back to your original instance with one click, using the Back to Instance button.

Here’s a quick video I recorded, if you want to check it out in action.

This feature really takes advantage of Abstract’s version control, ensuring that you’ll always see the latest version of the symbol you’re looking to implement. If your symbol master gets edited in the same branch as the symbol instances, the app will jump right to the accurate commit of the symbol master that the instance was referring to. I hope this update makes your developer handoff experience smoother!

Thanks to Tim Van Damme and Payam Rajabi for the design work on this feature.

‍

See other product releases in our Public Collection: