Styleguides are treated like projects, and you can see them listed on the export panel while publishing your designs. This way, you can export your colors, text styles, and components directly into your styleguide.
💁♀️ Since child styleguides inherit colors, text styles, and components from the parent styleguide, you only need to export the colors, text styles, and components that are unique to that specific styleguide based on the platform type (Base, Web, iOS or Android). If you have project-level-specific resources, you can include those in your project styleguide instead. You can learn more here: Defining parent and child styleguides
Exporting components
When you export components to a styleguide, they’ll appear under the Individual components page in the Components section. If you export component variants from Figma, Zeplin creates separate pages for each component variant group.
You’ll see all these pages—both individual components and variant-specific ones—listed in the left panel.
💁♀️ You can learn more about component pages here: Organizing components using Pages
When new components or component versions are exported, whether by you or other users, a green "Components updated" tag will appear next to the "Sort by" dropdown. The tag will remain until you sort components by "Last updated".
You can find more details on how to export components from your design tool here:
Exporting colors and text styles
When exporting components to a styleguide, Zeplin detects any colors and text styles defined in your Figma, Sketch, or Adobe XD file. These will appear as suggestions under the “Colors” and “Typography” pages under Foundations of your styleguide. You can then choose to add them all at once or pick the ones you need.
You can also export colors and text styles directly from the plugins in Figma and Sketch. In the Figma plugin, you’ll also have the additional option to export color variables.
Figma:
Sketch:
Adobe XD: