lcorrales / zeplin-master-symbol-name-extension

Zeplin Extension for displaying symbol names from Sketch Libraries

Zeplin Master Symbol Name Extension

Display the original Master Symbol names of components from UI libs.

Example:

Sample output:

Component:
  05 Button / 5.1 Button / 5.1 + Medium (Default)

Note: This extension was written with Sketch in mind, but should be compatible with other design tools.

The Problem

An application developer has no way of knowing how the Zeplin design relates to existing UI libs used accross the company.

Use Case

At Wix we have in-house UI libs, e.g. wix-style-react, which are comprised of large sets of Sketch symbols and their corresponding implementation as React Components.

A common workflow at Wix is as follows:

• A designer uses Sketch symbols from a UI lib to design application screens
• Sketch file is then exported to Zeplin
• A developer gets a link to Zeplin as part of the development task

This extension maps the Zeplin layers to symbol names, giving the developer a quick reference to the UI lib.

Development

Master Symbol Name extension is developed using zem, Zeplin Extension Manager. zem is a command line tool that lets you quickly create and test extensions.

To learn more about zem, see documentation.