Print Style Guide

About this plugin

Generate a comprehensive, updateable style guide from local styles and variablesPrint Style Guide turns the variables and styles already in your file into a proper style guide page — organised, documented, and ready to hand to anyone.Pick the variable collections and styles you want and the plugin builds a page containing its variable and styles, grouped by your own naming structure.Variables — Values are shown per mode with your mode names as labels. Aliased variables show what they point to, and can be hyperlinked straight to their source in the generated style guide. Scopes, code syntax and publishing state are all included.Colour styles — hex by default, and optionally RGB and HSL. Gradients print as full CSS, including any per-stop variable bindings. Other fills also generally supported.Text styles — properties from font and size through to leading trim, list spacing and hanging punctuation can be listedEffect styles — shadows, blurs, noise, texture and glass supportGrid styles — pattern, count, alignment, track size, offset, gutter and colour, with a live preview of the grid.OptionsPrint additional colour codes (RGB and HSL alongside hex)Print full variable and style propertiesGenerate navigation menus that jump to each groupHyperlink bound variables to their sourceBuilt to stay usefulRe-run the plugin any time and the page updates in place. Sections keep their position, so an order you have arranged by hand survives.The page is assembled from a small kit of components that ships alongside it. Edit the page header, group header, button or property row and the whole guide updates instantly — it is your style guide, not a locked export.UpgradePrinting variables is free, with no limits on collections or modes.Printing colour, text, effect and grid styles is a one-off upgrade.Data and PrivacyYour last selection is saved to `figma.clientStorage` so the plugin remembers your previously used options. This is local to your Figma client and scoped to this plugin. No file content, names, values or user information are stored.Notes❣️ Generating style guides for multiple variable collections and modes may take longer to process. If you have a slower computer and/or have a lot of variable modes and collections, please be patient while the plugin runs.---♥️ If you have any feedback or suggestions please leave a comment or email me at [email protected].