Since the launch of the beta, fellow developers from all around submitted many extensions to be published — we wanted to mention a couple that are open source, in case you need a few examples to get you going. As demonstrated on the screenshot, this extension would scan through all the layers in a screen and print a list of issues, based on a rule set. Zeplin extensions are JavaScript modules that generate code snippets from various design elements. This monorepo consists of stylesheet extensions and a package that extracts CSS-like style properties from design elements (layers, colors, text styles) exposed to extensions by Zeplin: Zeplin is a connected space for product teams where they can share designs, generate specs, assets and code snippets, tailored for iOS, Android and Web. Today, we’re very excited announce that we’re taking our first step into making Zeplin more extensible. *cough*. Zeplin extensions are JavaScript modules that generate code snippets from various design elements. To name a few: See Extension documentation for all the functions and their details.

Learn more.

We can’t wait to hear what you all think—ping us with any suggestions/questions at extensions@zeplin.io. To learn more about zem and the publish command, see documentation. Zeplin is a connected space for product teams where they can share designs, generate specs, assets and code snippets, tailored for iOS, Android and Web. Use Git or checkout with SVN using the web URL.

Explore the documentation and start working on your Zeplin extensions today. Learn more.

All the way from a simple extension that counts the characters in a text layer for your copywriter, to a full-fledged extension that generates code snippets from layers, colors, text styles; extensions can examine pretty much all the data you see in Zeplin. That said, it’s just impossible for a team to stay up-to-date with all the intricacies of every new technology out there. Discover how Zeplin can help your team. For more information, see our Privacy Statement. You’ll be notified via email shortly, once the extension is listed.

Zeplin extensions are JavaScript modules that generate code snippets from various design elements. It's a full-fledged extension example, generating React Native JavaScript snippets from colors, text styles and layers. Here is our blog post explaining the feature in detail: https://blog.zeplin.io/introducing-zeplin-extensions-7c5d55544b9a. Select the platform you’re designing for and let Zeplin—pun intended—take care of the rest, generating accurate tailored specs, assets and code snippets.

During the Design Tools Hackathon 2018 in Tel Aviv, the Wix team published Master Symbol Name, an extension that makes use of this new functionality. All the way from a simple extension that counts the characters in a text layer for your copywriter, to a full-fledged extension that generates code snippets from layers, colors, text styles; extensions can examine pretty much all the data you see in Zeplin. In fact, all the built-in code snippets currently in Zeplin are implemented as extensions, using the same infrastructure. In the example above, Zeplin invokes the layer function of the extension, passing the selected layer object as a parameter. Introducing Zeplin 2.0 — Components and a ton more goodies, Dev Journal — Automate notarizing macOS apps, How POLITICO connected their design system with engineering using Zeplin, Stay in the loop with the Microsoft Teams integration, How WestJet improved their workflow with Zeplin and Adobe XD, Revamping the Zeplin workspace, Round 2 — Sections for projects.

Introducing Zeplin 2.0 — Components and a ton more goodies, Dev Journal — Automate notarizing macOS apps, How POLITICO connected their design system with engineering using Zeplin, Stay in the loop with the Microsoft Teams integration, How WestJet improved their workflow with Zeplin and Adobe XD, Revamping the Zeplin workspace, Round 2 — Sections for projects. You can execute functions with sample data and observe the results, without running the extension inside Zeplin. We’ve also prepared a tutorial to guide you through your first extension, dive in! We also prepared a short tutorial to guide you through.

Everyone in the team can access the latest design resources, get notified of changes without you having to ping them. Official stylesheet extensions used in Zeplin are open source, collected under a monorepo, generating CSS, Less, SCSS, Sass, Stylus snippets from colors, text styles and layers. When you think about it, Zeplin’s journey started thanks to Sketch being extensible as well!

We believe designers and developers should always work together to build products that delight users all the way from idea to production. Official stylesheet extensions in Zeplin, generating CSS, Less, SCSS, Sass, Stylus snippets are now open source! If you have any suggestions/questions on extensions, or if you’d like to learn more about the public API, ping us at extensions@zeplin.io — we’d love to hear what you’re building.

Shortly after the beta launch, we released a command line tool to easily create and test Zeplin extensions, called zem. Publishing extensions.

Learn more. Similar to generating snippets from screens, we’re also introducing a similar function which is triggered when a component is selected, within the project Styleguide. Learn more, We use analytics cookies to understand how you use our websites so we can make them better, e.g. Styled Components is a pretty popular open source project that lets you use the best bits of ES6 and CSS to style your apps without stress. download the GitHub extension for Visual Studio, Update docs with shared styleguide related changes. Explore the repository to learn more about structuring complex extensions, used by hundreds of thousands of developers every day.