EightShapes Specs

Designers the world over spend countless hours creating design specs to hand off component and page designs to developers, concentrating on things like “What’s it include?” (Anatomy), “How does it vary?” (Props), and “How do things fit together?” (Layout). It took a seasoned, efficient designer 2-4 hours to produce that for one component. I wrote a plugin that produces that same output in 2-4 seconds. Given that 1,000s of designers toil doing this for 10s/100s of components, I sought to save our industry 1,000,000 hours or more.

Automates production of design system component specs for Anatomy, Properties and Layout and spacing. The plugin annotates attributes like Font size, Text color and Item spacing only when relevant, highlighting to designers, reviewers and developers to which they are handing off where all the relevant design decisions are. The plugin also differentiates between applications of hardcoded values, styles, Figma variables and tokens from Tokens Studio, and arranges outputs in a variety of useful layouts. 

Understanding design intent shouldn’t be a treasure hunt. Don’t give a developer a shovel, point into the distance and say “Dig over here, try that area too, but bother digging in those corners?” If you know where the treasure is, just dig it up and given it to them. 

Good specs are essential because: 

• As systems support many code platforms → Designer/developer connections can weaker Props, motion, accessibility, … → Components become more complicated 
• As teams improve quality and craft → Naming needs a decisive focal point 
• As systems increasingly support theme → Tokens must be mapped well 
• As UI becomes more composable → Components have intricate parts and dependencies 
• As enterprises scale → Systems change must be precisely described

The plugin saves considerable time, reducing an hours-long task to a seconds-long wait.

The plugin automates what system designers do routinely, so that product designers new to component-level systems work and/or page-level specifications can produce commensurate outputs with no prior knowledge.

The plugin decomposes a well-built component design into understandable parts, helping designers value and learn how to apply craft. For example, less seasoned designers at times find layout (in general) and Autolayout (in Figma) bewildering; the plugin’s output reinforces the hierarchical nature and arrangement of UI elements.

The plugin exposes deficiencies and errors in what’s built, enabling designers to iterate quickly and improve asset quality.