Zeplin extensions are JavaScript modules that generate code snippets from various design elements. All code snippets you interact with in Zeplin are generated using extensions and they're curated at extensions.zeplin.io.
If you're interested in developing your own Zeplin extension, this documentation covers the basics of building one along with a tutorial and discusses their capabilities.
Ping us at extensions@zeplin.io if you'd like us to publish your extension at extensions.zeplin.io or if you have any questions—we'd love to hear what you're building!
If you just want to try out extensions and ended up here by mistake, head to extensions.zeplin.io to browse them.
☝️ Friendly reminder: This documentation will likely change as we polish things during the beta.
Extensions are JavaScript modules that implement various functions to generate code snippets from models.
In the example above, Zeplin invokes the layer function of the extension, passing the selected layer object as a parameter. Returned value is then displayed. Code highlighting is performed by Zeplin, extensions only communicate the preferred language.
Extensions contain at least two files:
JSON document that defines everything you need to know about an extension.
- Defines basic information like the name, description and author.
- Defines the location of the module file.
- Defines options.
See manifest documentation for details.
JavaScript document that implements functions that correspond to different actions, to name a few:
styleguideColors: Generates snippets from Styleguide colors.layer: Generates snippets from layers.
See Extension documentation for all the functions and their details.
We've prepared a tutorial to guide you through your first Zeplin extension, dive in!
Quickly jump to a particular model to learn more about it.
Check back in a few days for example extensions. The plan is to open source our existing extensions, like React Native and Attributed Strings, to provide full-fledged examples used by thousands of developers everyday.