Your system
In the appSee what components are made of.
Grails automatically generates an Anatomy page for each synced component: layout and properties, measurements, binded tokens, and variants.
Closed alpha: request access at no cost during the period.
The Anatomy tab of a component page, drawn as a schematic: the matrix of the component's variants with two of them marked A and B, the token that changes from one to the other, and the selected element's box with the tokens it binds.
Swipe sideways to see the whole screen.
Capabilities
What you can do
Auto-generated measurements
When a component is synced, Grails inspects its structure and generates a custom spec. Your docs are automatically populated with each component's anatomy and measurements so you don't have to start from scratch.
Variants as a matrix
Visualize Component Sets in a familiar way. Select a variant from the grid to view and inspect its properties and measurements.
Compare variants
Select 2 variants from the table to get a summary of what changes between them: anatomy, tokens, props and values.
Inspect at every level
Elements, layout, properties and tokens automatically detailed. A side panel shows a Layout Tree View and an inspector for the selected element´s Props and box model.
Your docs, expanded
Your docs can do more tha just display relationships. Each related entity (token, component, style) opens its own detail panel.
Export
Export an element’s docs as JSON, Markdown, or a PNG sheet.
Everything is related
Connected to
Nothing in a design system stands alone. These are the features this one works with.
See your own design system in Grails.
Request access, connect the Figma plugin and scan a file. Nothing is synced until you start it.
While in Alpha, we are working 1:1 with teams to improve the product. Access during this period is per-request only.