With Styleguides, your team can manage text styles, colors, spacing system, and components separately from a project. If you have a UI kit, design system, pattern library, or brand styleguide you're working on, you can set it up in Zeplin and even create child styleguides that inherit from the parent one.
Defining Parent and Child Styleguides
A parent styleguide is a styleguide that contains some common elements across multiple platforms (iOS, Android, or Web). Because a parent styleguide will contain some universal elements, there is now a platform-less type you can select called “Base”. A parent styleguide with a “Base” type might include things like brand colors, icons, and text styles—things that are standardized across all platforms.
You can then set up child styleguides with platform-specific details that inherit from the parent styleguide. For example, if you have specific components or text styles used for your iOS apps, they would be defined in the iOS child styleguide.
Alternatively, you can always create platform-specific parent styleguides that are linked to other platform-specific child styleguides; it's really up to your team and your design system setup.
Creating child styleguides results in a tree structure under your Workspace's “Styleguides” tab, which displays the relationship between all of your styleguides.
If necessary, you can delete a parent styleguide, and the child ones will remain intact. You can also assign different parents to your styleguides and re-configure your tree structure at any time.
You can have multiple projects linked to the same child styleguide. Parent styleguides can have multiple child styleguides as well. Note that a project can only be linked to one styleguide at a time, but it will inherit resources from both the linked styleguide and its parents.
☝️ It's not possible to download assets from a base-typed styleguide since Zeplin generates all the assets & resources based on the platform setting. You can download assets from the linked project or the child styleguide, which is platform-specific.
Defining Local Styleguides for projects
In your projects, the local styleguide will contain more granular information about the specific app/project that you're working on. For example, if you're using a slightly different color shade for that particular iOS project, it would be included in the local styleguide, and you will be able to see how it fits into the overall brand styleguide colors once the project is linked to a styleguide.
