EightShapes
Published in

EightShapes

Crafting Component API, Together

How to unify anatomy and props across code and design tools

What to include in component API drafts

Component anatomy aligned across Figma layers and code markup
Component anatomy aligned across Figma layers and code markup

1. Anatomy

CODE MARKUP
-----------
<Card metadata="" title="">
<CardMedia> (extends <Image>)
<CardDescription>
(slot) </CardDescription>
<CardActionsArea>
(slot to add Button, IconButton, or TextLink) </CardActionsArea>
</Card>
FIGMA LAYERS
------------
Card
]-[ .Card (as Base Figma component)
CardImage (extends Image as subcomponent)
[-] CardContent
]-[ TitleArea
Subtitle
Title
Body
]-[ Actions
Button
Button
Component properties aligned in Figma Variants and code props
Component properties aligned in Figma Variants and code props

2. Properties

Figma only:- State
- default
- hover? (recommend: include)
- focus? (recommend: include)
- error
- errorHover? (recommend: omit)
- disabled
- readOnly
Both Figma & code:- required (false - default, true)
- inlineLabel (false - default, true)
- helperTextPlacement (right, bottom - default)
Code only:- ariaLabel
- disabled (in Figma, use States)
- error (in Figma, use States)
- errorEvent
- errorText (in Figma, update text shown when in State=Error)
- helperText (in Figma, show/hide and update text)
- id
- label (use .Label element)
- readOnly (false - default, true) (in Figma, use States)
- width

3. Layout

Width
- Desktop: 1440px
- Desktop/Tablet: 1024px
- Tablet: 768px
- Mobile: 368px

When to fit API into a design system workflow

Feature development workflow for visual style and UI components across designers and developers
Feature development workflow for visual style and UI components across designers and developers

For small teams: an activity within task(s)

For simpler workflows where one designer does all design tasks, embed the API moment in the Code task
For simpler workflows where one designer does all design tasks, embed the API moment in the Code task

For many makers and/or outputs: a dedicated, formal task

For many participants producing many outputs, consider a quick but dedicated API task
For many participants producing many outputs, consider a quick but dedicated API task

Starting from what exists: evaluate during planning

Incorporating API analysis as an early planning activity
Incorporating API analysis as an early planning activity
Incorporating Figma API planning to synthesize disparate inputs prior to migrating from Sketch
Incorporating Figma API planning to synthesize disparate inputs prior to migrating from Sketch

Where to draft an API

A Card component API draft proposal, as prepared by a developer for team review in Google Docs
A Card component API draft proposal, as prepared by a developer for team review in Google Docs
API Draft Template made in the Asana task management app for a from-Sketch migration
API Draft Template made in the Asana task management app for a from-Sketch migration

Epilogue: How crafting API changes behaviors

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nathan Curtis

Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.