Specs (formerly, EightShapes Specs)

About this plugin

Documentation | Submit requests and defects | Slack community

Automate production of page and component design specifications (“specs”) of selected components, instances and frames. The output is useful for design-dev handoff, auditing in progress design work, and critiquing with teammates.

Features available for free without payment include:

1. Anatomy with marked layers and annotated dependencies, instance props and other unvarying attributes
2. Props that compare attributes across variants to highlight differences and boolean prop layer visibility
3. Layout and spacing of layers with autolayout, describing attributes and annotating artwork

Additional features available via an in-app upgrade include:

1. Figma variables detection & display
2. Modes section for variables that change across modes
3. Two way comparisons of all variant combinations across two properties
4. Tokens Studio tokens detection & display
5. Annotation of all anatomy elements and layout configurations detected across all compared variants, not just the selected variant
6. Custom spec formatting using color variables, spacing variables and text styles
7. Specs of nested components automated, easing how to find and spec relevant components
8. Tabular Anatomy display, including dev resources
9. Multi-column layouts (2, 3 and 4 columns) for many sections
10. Color format as hex or hsla
11. Dark mode spec formatting

For billing support, contact Figma at [email protected]. Since plugin upgrade is supported by the Figma Payment platform, the plugin author cannot help with billing inquiries and team and organization licensing is not available.

To get help, request a feature, report a defect or troubleshoot, visit the EightShapes Specs public Slack. You can also request a feature or submit a defect on the project's Github Issues page.

To learn more, get a copy of the EightShapes Specs community file and read the Medium articles The EightShapes Specs Figma Plugin and Component Specifications.

Made by @nathanacurtis of Directed Edges LLC.