Zeplin extensions are JavaScript modules that generate code snippets from various design elements. All the built-in code snippets currently in Zeplin are implemented as extensions, using the same infrastructure. Here is our blog post explaining the feature in detail: https://blog.zeplin.io/introducing-zeplin-extensions-7c5d55544b9a
Adding an extension
You can explore all the extensions built by developers from the community and the Zeplin crew here: https://extensions.zeplin.io/
To add one of those extensions to your project or styleguide, select the project or styleguide you need the extension in, click on the settings icon on the right panel under âExtensionsâ, and press the âAdd to Zeplinâ button.Â
âď¸Make sure the extension you are selecting is available for your project type. You can see the supported project types from the extension's details page.
Managing extensions
You can see the list of extensions in your project under the âExtensionsâ window, from the right panel of your project's Dashboard or styleguide.
From this window, you can change the preferences for each extension, enable/disable them or remove it completely. To enable an extension, make sure you check the box next to it.Â
Recommended extensions
- Web: HTML, CSS, SCSS, Sass, Less
- iOS: Swift, Objective-C, Attributed Strings
- Android: XML
- React Native: React Native, React Native Styled Components
- Flutter: Flutter, Flutter Extended, Flutter Gen
- Xamarin: Xamarin.Forms
Related articles: