Designing and Automating Component Specifications

© Copyright 2023 • EightShapes LLC
{Title}
{Details}
Show less
{Label} {Label}
1
2
3 4
5
6
7
8
9
{Title}
{Details}
Show less
{Label} {Label}
{Title}
{Details}
Show less
{Label} {Label}
16
16
Error
ESDSV Alert
Background color : ESDS Color Alert/Error/Background #580018
Border color : ESDS Color Alert/Error/Element #F85558
Decorative Icon
Name : ESDS Icon asset / Alert-error
Color : Error
{Title}
{Details}
Show less
{Label} {Label}
Designing and Automating
Component Specifications
Nathan Curtis

© EightShapes

Detach conference

November 11, 2023

View Slide

Design decisions – colors, typography,
properties, space, shape – are valuable

View Slide

Inspecting designs – even with Figma’s
emerging Dev mode – is a like a hunting
for treasure on a beach without a map

View Slide

Collaborators value design decisions
organized well as a simple package

View Slide

Anatomy
ESDSV Alert
1
Width : ESDS Sizing platform/iOS default width 343
Border weight : 2
Decorative Icon
2
Depends on : ESDS-V Icon
Size : 20x20
]-[
3
]-[
4
]-[
5
Title
6
Text style : Heading/5
Icon button layout container
7
Height : ESDS Sizing icon/small 16
Width : ESDS Sizing icon/small 16
Dismiss Icon
8
Depends on : ESDS-V Icon
Name : ESDS Icon asset / Close
Size : 16x16
Color : Primary
Details
9
Text style : Body/Small
Details drawer
10
Depends on : ESDSV Details drawer
State : Open
Content area
11
Depends on : .Slot
Action area
12
Depends on : ESDSV Alert actions
Actions : Button + Link
{Title}
{Details}
Show less
{Label} {Label}
1
2
3
4
5
6 7
8
9
10
11
12
Properties
Type
{Title}
{Details}
Show less
{Label} {Label}
Basic
ESDSV Alert
Background color : ESDS Color Alert/Basic/Background #F0F1F1
Border color : ESDS Color Alert/Basic/Element #A6ACB0
Decorative Icon
Name : ESDS Icon asset / Info
Color : Secondary
{Title}
{Details}
Show less
{Label} {Label}
Informational
ESDSV Alert
Background color : ESDS Color Alert/Info/Background #EDF0FB
Border color : ESDS Color Alert/Info/Element #0E68D4
Decorative Icon
Color : Info
{Title}
{Details}
Show less
{Label} {Label}
Success
ESDSV Alert
Background color : ESDS Color Alert/Success/Background #E6FDEB
Border color : ESDS Color Alert/Success/Element #097D33
Decorative Icon
Name : ESDS Icon asset / Check
Color : Success
{Title}
{Details}
Show less
{Label} {Label}
Error
ESDSV Alert
Background color : ESDS Color Alert/Error/Background #FCF0EF
Border color : ESDS Color Alert/Error/Element #D90936
Decorative Icon
Color : Error
{Title}
{Details}
Show less
{Label} {Label}
W
arning
ESDSV Alert
Background color : ESDS Color Alert/Warning/Background #FCEFDA
Border color : ESDS Color Alert/Warning/Element #785F07
Decorative Icon
Name : ESDS Icon asset / Alert-Warning
Color : Warning
Details drawer
{Title}
{Details}
Show less
{Label} {Label}
Property type : Boolean
Default : false
Associated layers :
Details drawer
Action area
{Title}
{Details}
Show less
{Label} {Label}
Default : false
Associated layers :
Action area
Content area
{Title}
{Details}
Show less
{Label} {Label}
Default : false
Associated layers :
Content area
Dismissable
{Title}
{Details}
Show less
{Label} {Label}
Default : false
Associated layers :
Dismiss Icon
Details?
{Title}
{Details}
Show less
{Label} {Label}
Default : true
Associated layers :
Details
L
ayout and spacing
{Title}
{Details}
Show less
{Label} {Label}
{Title}
{Details}
Show less
{Label} {Label}
8
16
16
16 16
ESDSV Alert
Direction : Horizontal
Alignment : Top left
V
ertical resizing : Hug
Horizontal resizing : Fixed
Item spacing: ESDS Space item-spacing/half-x 8
Padding : ESDS Space padding/1x 16
{Title}
{Details}
Show less
{Label} {Label}
{Title}
{Details}
Show less
{Label} {Label}
16
16
]-[
Direction : V
ertical
V
Horizontal resizing : Fill
Item spacing: ESDS Space item-spacing/1x 16
{Title}
{Details}
Show less
{Label} {Label}
{Title}
{Details}
Show less
12
12
]-[
Direction : V
ertical
V
Item spacing: ESDS Space item-spacing/three-quarter-x 12
{Title}
{Details}
Show less
{Label} {Label}
{Title}
24
Modes
ESDS Space
{Title}
{Details}
Show less
{Label} {Label}
Cozy
ESDSV Alert
]-[
]-[
]-[
Item spacing: ESDS Space item-spacing/one-and-a-half-x 24
{Title}
{Details}
Show less
{Label} {Label}
Comfortable
ESDSV Alert
]-[
]-[
]-[
{Title}
{Details}
Show less
{Label} {Label}
Compact
ESDSV Alert
]-[
]-[
]-[
ESDS Shape
{Title}
{Details}
Show less
{Label} {Label}
Subtle round
ESDSV Alert
Border radius : ESDS Shape border radius/module 4
{Title}
{Details}
Show less
{Label} {Label}
Round
ESDSV Alert
{Title}
{Details}
Show less
{Label} {Label}
Squared
ESDSV Alert
ESDS Color
{Title}
{Details}
Show less
{Label} {Label}
L
ight
ESDSV Alert
Title
Text color : ESDS Color Text/Primary #0E1114
Details
Text color : ESDS Color Text/Primary #0E1114
{Title}
{Details}
Show less
{Label} {Label}
Dark
ESDSV Alert
Background color : ESDS Color Alert/Basic/Background #0E1114
Border color : ESDS Color Alert/Basic/Element #666E74
Title
Text color : ESDS Color Text/Primary #FFFFFF
Details
Text color : ESDS Color Text/Primary #FFFFFF
Specifications

View Slide

UI Specification
A versioned document that describes
composition, attributes and behaviors of
a UI component, page or other solution.
Produced by

Designer
Produced for

making code

making system docs

making Figma library assets
Developer(s)
Designer(s)
Designer(s)

View Slide

Decisions
{Title}
{Details}
Show less
{Label} {Label}
{Title}
{Details}
Show less
{Label} {Label}
8
16
16
16 16
ESDSV Alert
Vertical resizing : Hug
{Title}
{Details}
Show less
{Label} {Label}
Error
ESDSV Alert
Background color : ESDS Color Alert/Error/Background #FCF0EF
Border color : ESDS Color Alert/Error/Element #D90936
Decorative Icon
Color : Error
Decision
Decision
Decision
Decision
Decision
Decision
Decision
Decision
Decision
Decision

View Slide

Why do specifications matter?

View Slide

Inspection only reveals decisions, specs illustrate more like differences
In Figma dev mode In specification

View Slide

{Title}
{Details}
Show less
{Label} {Label}
{Title}
{Details}
{Title}
{Details}
{Title}
{Details}
{Title}
{Details}
{Title}
{Details}
Properties
Type
Basic (default)
ESDS Alert
Background color : ESDS Alert/Basic/Background White
Border color : ESDS Alert/Basic/Light
Decorative Icon
Color : Secondary
{Title}
{Details}
Informational
ESDS Alert
Background color : ESDS Alert/Info/Background Light
Border color : ESDS Alert/Info/Light
Decorative Icon
Color : Info
{Title}
{Details}
Success
ESDS Alert
Background color : ESDS Alert/Success/Background Light
Border color : ESDS Alert/Success/Light
Decorative Icon
Color : Success
{Title}
{Details}
Error
ESDS Alert
Background color : ESDS Alert/Error/Background Light
Border color : ESDS Alert/Error/Light
Decorative Icon
Color : Error
{Title}
{Details}
Warning
ESDS Alert
Background color : ESDS Alert/Warning/Background Light
Border color : ESDS Alert/Warning/Light
Decorative Icon
Name : ESDS Icon asset / Alert-Warning
Color : Warning
{Title}
{Details}
Designs imply decisions, specs details itemize decisions
ARTWORK VARYING ARTWORK DETAILED SPECIFICATIONS

View Slide

Specs align teammates on naming as a source-of-truth
Figma library
Specification
React code
ESDS Button
Icon
Text
↪️ Text {Label}
Variant Primary
Size Medium
Surface Light
State Initial
Breakpoint Wide
Size
{label}
Small
Label
Text style : Body/Small
{label}
Medium (Default)
Label
Text style : Body/Medium
{label}
Large
Label
Text style : Body/Large

View Slide

Specs unify work across frameworks
Plan
Design
Specification
Code Code Code Code
IOS android
Release Release Release Release
Figma

asset
Design

docs
REACT angular

View Slide

Plan
Design
Specification
Code Code Code Code
IOS android
Figma

asset
Design

docs
REACT angular
The “handoffs”

View Slide

Plan
Design
Specification
Code Code Code Code
IOS android
Figma

asset
Design

docs
REACT angular
Designer 2 Designer 3 Developer 1 Developer 2 Developer 3 Developer 4
Designer 1

View Slide

Specs help manage change as architecture changes
Properties
Type
Basic (default)
ESDS Alert
Background color : ESDS Alert/Basic/Background White
Border color : ESDS Alert/Basic/Light
Decorative Icon
Color : Secondary
{Title}
{Details}
Informational
ESDS Alert
Decorative Icon
Color : Info
{Title}
{Details}
Success
ESDS Alert
Background color : ESDS Alert/Success/Background Light
{Title}
{Details}
Properties
Type
Basic
ESDSV Alert
Decorative Icon
Color : Secondary
{Title}
{Details}
Informational
ESDSV Alert
Background color : ESDS Color Alert/Info/Background #EDF0FB
Border color : ESDS Color Alert/Info/Element #0E68D4
Decorative Icon
Color : Info
{Title}
{Details}
Success
ESDSV Alert
Background color : ESDS Color Alert/Success/Background #E6FDEB
Border color : ESDS Color Alert/Success/Element #097D33
{Title}
{Details}
Color styles
Variables

View Slide

Where do specs go?

View Slide

Material List item
Anatomy
List item 2
1
Width : 360
Building Blocks/state-layer/1. enabled
2
Depends on : Building Blocks/state-layer/1. enabled
state-layer
3
Leading element
4
Building Blocks/Monogram
5
Depends on : Building Blocks/Monogram
Headline
6
Text color : M3/sys/light/on-surface
Text style : M3/body/large
Metadata
7
Text color : M3/sys/light/on-surface-variant
Text align : Right
Text style : M3/label/small
checkboxes
8
Depends on : checkboxes
Type : Selected
State : Enabled
horizontal/full-width
9
Depends on : horizontal/full-width
A List item 100+
1
2
3
4
5
6 7 8
9
Layout and spacing
List item 2
Direction : Vertical
Alignment : Middle center
A List item 100+
A List item 100+
state-layer
Alignment : Middle left
Vertical resizing : Fixed
Item spacing: 16
Padding top: 8
Padding bottom: 8
Padding left: 16
Padding right: 24
A List item 100+
A List item 100+
16 16
8
8
16 24
Leading element
Alignment : Middle left
Horizontal resizing : Hug
A List item 100+
A
Content
https://m3.material.io/components/lists/guidelines
Specifications, generated by EightShapes Specs plugin
Produced by design system team for other teams

to the feature available from the library
use
Produced by system designer for system developers and

designers to the feature going into the library
mak
e
https://mui.com/material-ui/react-list/
https://m3.material.io/components/lists/guidelines
S
pecification ≠ “D
ocs” “G
uidelines”
or

View Slide

What should specs include?
Anatomy

Properties

Layout and spacing

Behavior

Accessibility

Motion

Component tokens

Composed examples

Decision log

Future features

Version history
Usage guidelines

Authoring guidelines

Do / Don’t

(instead, these are for doc sites)
INCLUDE EXCLUDE

View Slide

Anatomy
What does it include?

What attributes do they have?

What does each depend on?

What properties are configured?

View Slide

Properties
How do attributes vary per prop option?

What’s shown or hidden when?

What’s default versus alternative?

View Slide

Layout and spacing
How are elements inset?

How are elements spaced?

How do elements wrap?

How are elements aligned?

How do elements resize?

View Slide

Accessibility

View Slide

Accessibility
https://stephaniewalter.design/blog/a-designers-guide-to-documenting-accessibility-user-interactions/

View Slide

Accessibility

View Slide

Tokens
Semantic tokens
Background
Value Token Alias Figma variable collection : name (mode)
100 #ffffff $esds-color-background-primary-light $esds-color-palette-neutral-white ESDS Color:Background / Primary (Light)
Use for the default surface color in light settings, including the page background.
94 #f0f1f1 $esds-color-background-secondary-light $esds-color-palette-neutral-94 ESDS Color:Background / Secondary (Light)
Use for a contrasting surface color in light settings, such as a card background.
15 #21272a $esds-color-background-primary-dark $esds-color-palette-neutral-15 ESDS Color:Background / Primary (Dark)
Use for the default surface color in dark settings, including the page background.
7 #0e1114 $esds-color-background-secondary-dark $esds-color-palette-neutral-7 ESDS Color:Background / Secondary (Dark)
Use for a contrasting surface color in dark settings, such as a card background.
39 #c03e09 $esds-color-background-brand-orange-light $esds-color-palette-orange-39 ESDS Color:Background / Brand Orange (Light)
Use for a brand surface color in light or dark settings.
39 #c03e09 $esds-color-background-brand-orange-dark $esds-color-palette-orange-39 ESDS Color:Background / Brand Orange (Dark)
Use for a brand surface color in light or dark settings.
Text
Value Token Alias Figma style
7 #0e1114 $esds-color-text-primary-light $esds-color-palette-neutral-7 ESDS Text / Primary Light
100 #ffffff $esds-color-text-primary-dark $esds-color-palette-neutral-white ESDS Text / Primary Dark
55 #f05c28 $esds-color-text-primary-brand-dark $esds-color-palette-orange-55 ESDS Text / Primary Brand Dark
43 #666e74 $esds-color-text-secondary-light $esds-color-palette-neutral-43 ESDS Text / Secondary Light
55 #868e92 $esds-color-text-secondary-dark $esds-color-palette-neutral-55 ESDS Text / Secondary Dark
67 #a6acb0 $esds-color-text-disabled-light $esds-color-palette-neutral-67 ESDS Text / Disabled Light
Variables

Collection: Name (Mode)
STYLES

Name

View Slide

Specs component template
{Component name} Anatomy
1 {Layer name}
Depends on : {Dependency}
{Name} : {Value}
{Name} : {Value}
2 {Layer name}
{Name} : {Style/token}
{Name} : {Value}
3 {Layer name}
{Name} : {Value}
4 {Layer name}
{Name} : {Value}
{Name} : {Value}
#
#
#
#
# #
#
#
#
#
#
#
Properties
{Variant property name}
{Property value} (default)
{Layer name}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Property value}
{Layer name}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Property value}
{Layer name}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Boolean property name}
Default : {true/false}
Associated layers :
{Layer name}
{Layer name}
{Layer name}
Layout and spacing
Spacing
{Layer name}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
16 16
16
16
16
16
Overflow
{Layer name}
{Description}
{Layer name}
{Description}
Touch targets
{Layer name}
{Description} 48
48
Responsive layout
{Breakpoint or Device}
{Description}
{Description}
Accessibility
Screen reading
For when the member is using a screen reader, including how elements should be identified, read, and in what order.
ESDS Text input
Reading :
[ESDS Form label]. [Icon] [value/
placeholder], [role].
Example :
“Cost rate, the internal cost that this
person incurs on your business. Dollar 100,
[role].”
Role : text box
{Layer name}
Reading : {Reading}
Example : {Example}
Role : {Role}
Focus order
##. {Name} {Role}
##. {Name} {Role}
##. {Name} {Role}
##. {Name} {Role} #
#
#
#
#
#
#
#
#
#
#
#
Announced order
##. {Name} {Role}
##. {Name} {Role}
##. {Name} {Role}
##. {Name} {Role} #
#
#
#
#
#
#
#
#
#
#
#
Alternative text
For any non-decorative image and visual elements conveyed only with color, provide alternate text. By default, any element NOT listed below
should be considered decorative and not include alternate text.
Element Type Alternate text
{Element name, such as Call to action button} {Type, such as Visual element} {Alternate text, such as Button or Icon name}
Component tokens
{Subsection title}
Token Alias Figma style Value
00 {Value} $esds-... $esds-... {Figma style}
{Description}
{Description}
Aa {Value} $esds-... $esds-... {Figma style}
{Description}
{Value} $esds-... $esds-... {Figma style}
{Description}
{Description}
{Description}
{Subsection title}
{Subsection title}
Token
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
Version history
Version #.#.# • MMM DD, YYYY
New features
x {Descriptionl
x {Descriptionl
x {Description}
Enhancements
x {Descriptionl
x {Descriptionl
x {Description}
Fixes
x {Descriptionl
x {Descriptionl
x {Description}
New features
x {Descriptionl
x {Descriptionl
x {Description}
Enhancements
x {Descriptionl
x {Descriptionl
x {Description}
Fixes
x {Descriptionl
x {Descriptionl
x {Description}

View Slide

Specs components
16 16 16
16
16
16
Spacer
Use when

Annotating specifications artwork to
denote padding (green) and item
spacing (orange).
Marker
Use when

Marking an element within a component
in specifications artwork.
Attribute
Use when

pecifying a name/value attribute pair in
specifications content.
# # #
#
# # # #
{Name} : {Value}

View Slide


View Slide

Specs can be expensive.

Senior designer, on my team: 2 hours?

Junior designer, new to the field: 8 hours?

View Slide

Specs can be automated with a plugin!

View Slide

primary automation outcom&
unexpected outcome"
bf Immediate production for dev handoff

Ef Rapid, repeated audit of what I build, as I builY
@f Format for teammates to critique what I built

View Slide

What can you automate from a well-built Figma component?
{Component name} Anatomy
1 {Layer name}
{Name} : {Value}
{Name} : {Value}
2 {Layer name}
{Name} : {Value}
3 {Layer name}
{Name} : {Value}
4 {Layer name}
{Name} : {Value}
{Name} : {Value}
#
#
#
#
# #
#
#
#
#
#
#
Properties
{Variant property name}
{Property value} (default)
{Layer name}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Property value}
{Layer name}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Property value}
{Layer name}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Boolean property name}
Default : {true/false}
Associated layers :
{Layer name}
{Layer name}
{Layer name}
Layout and spacing
Spacing
{Layer name}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
16 16
16
16
16
16
Overflow
{Layer name}
{Description}
{Layer name}
{Description}
Touch targets
{Layer name}
{Description} 48
48
Responsive layout
{Description}
{Description}
Accessibility
Screen reading
For when the member is using a screen reader, including how elements should be identified, read, and in what order.
ESDS Text input
Reading :
[ESDS Form label]. [Icon] [value/
placeholder], [role].
Example :
“Cost rate, the internal cost that this
person incurs on your business. Dollar 100,
[role].”
Role : text box
{Layer name}
Reading : {Reading}
Example : {Example}
Role : {Role}
Focus order
##. {Name} {Role}
##. {Name} {Role}
##. {Name} {Role}
##. {Name} {Role} #
#
#
#
#
#
#
#
#
#
#
#
Announced order
##. {Name} {Role}
##. {Name} {Role}
##. {Name} {Role}
##. {Name} {Role} #
#
#
#
#
#
#
#
#
#
#
#
Alternative text
For any non-decorative image and visual elements conveyed only with color, provide alternate text. By default, any element NOT listed below
should be considered decorative and not include alternate text.
Element Type Alternate text
Component tokens
{Subsection title}
{Description}
{Description}
Aa {Value} $esds-... $esds-... {Figma style}
{Description}
{Description}
{Description}
{Description}
{Subsection title}
{Subsection title}
Token
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
Version history
New features
@ {Description(
@ {Description(
@ {Description}
Enhancements
@ {Description(
@ {Description(
@ {Description}
Fixes
@ {Description(
@ {Description(
@ {Description}
New features
@ {Description(
@ {Description(
@ {Description}
Enhancements
@ {Description(
@ {Description(
@ {Description}
Fixes
@ {Description(
@ {Description(
@ {Description}

View Slide

View Slide

from to
2 hours 2-5 seconds

View Slide

60,000 users

20% users
20 component specs
2 hours
480,000 hours
actually use it

(on average?)

saved, per spec

saved

View Slide

Start with automated Fine tune with smaller edits
Anatomy
Modal Date Picker
1
Height : 516
Width : 328
Background color : M3/surfaces/light/surface3
Border radius : 28
Header
2
Border color : M3/sys/light/outline-variant
Supporting text
3
Height : 16
Text style : M3/label/medium
Week day, Day
4
Height : 40
Text style : M3/headline/large
icon-button
5
Depends on : icon-button
Icon : Icons/mode_edit_24px
Configuration : standard
State : enabled
Building blocks/Menu button
6
Depends on : Building blocks/Menu button
State : Enabled
icon-button
7
Icon : Icons/navigate_before
State : enabled
icon-button
8
Icon : Icons/navigate_next
State : enabled
Select date
Mon, Aug 17
August 2023
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Cancel OK
1
2
3
4
5
6 7 8
9
10
11
12 13
14 15
16 17 18
19 20
21 22
23
24
25 26
27
28 29
30
31
32
33 34
35 36
37
38 39
40
41
44
45
46
47 48
51
52 53
54 55
56
58 59
Anatomy
Modal Date Picker
1
Height : 516
Width : 328
Background color : M3/surfaces/light/surface3
Border radius : 28
Header area
2
Border color : M3/sys/light/outline-variant
Supporting text
3
Height : 16
Text style : M3/label/medium
Week day, Day
4
Height : 40
Text style : M3/headline/large
Edit icon
5
Icon : Icons/mode_edit_24px
State : enabled
Weekday column header
6
Depends on : Building blocks/Menu button
State : Enabled
Previous month button
7
Icon : Icons/navigate_before
State : enabled
Next month button
8
Icon : Icons/navigate_next
State : enabled
Select date
Mon, Aug 17
August 2023
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Cancel OK
2
3
4
5
6 7 8
9
10
20
11
12 13

View Slide

Custom styles, modes and layouts
ESDS Alert
Properties
Type
{Title}
{Details}
Basic
ESDS Alert
Background color : ESDS Alert/Basic/Background Light
Border color : ESDS Alert/Basic/Foreground Light
ESDS Icon
Color : Secondary
Title
Text color : ESDS Color Text/Primary
Details
{Title}
{Details}
Informational
ESDS Alert
ESDS Icon
Color : Info
Title
Text color : ESDS Text/Primary Light
Details
{Title}
{Details}
Success
ESDS Alert
Background color : ESDS Alert/Success/Background L
ESDS Icon
Color : Success
Title
Details
{Title}
{Details}
{Title}
{Details}

View Slide

Token Zen Garden demo
Pricing Card
Anatomy
Pricing Card
1
Inner shadow : pattern.card-pricing.shadow 0px 0px 0px 0px #000000
icon
2
Depends on : icon
$99
3
Text color : pattern.card-pricing.title-color #131313
Text style : pattern.pricing-card.typography.price
/mo
4
Text color : pattern.card-pricing.sub-title-color #6B7280
Text style : pattern.pricing-card.typography.frequency
Do not follow the idea of others, but learn to lis...
5
Text style : pattern.pricing-card.typography.description
List
6
Depends on : List/6
Button + Incidental Text
7
Width : 389
Button
8
Depends on : Button
Show Icon R : false
↪ Icon R : 27027:31047
Show Icon L : false
↪ Icon L : 27027:31058
Size : L
Type : Primary
State : N
ormal
N
o credit card req
uired
9
Text align : Center
Text style : pattern.pricing-card.typography.mention
gift
$99/
mo
Do not follow the idea of others,
but learn
to listen to the v
oice within yourself.
check-ci
This dew lik
e life fades away
check-ci
Time speeds swiftly
check-ci
In this short life of ours
check-ci Av
oid inv
olv
ement in superfluous things
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
S
elect Package arrow-ri
N
o credit card required.
1
2
3
4
5
6
7
8
9
Prop
erties
style
gift
$99/
mo
but learn
to listen to the v
check-ci
This dew lik
e life fades away
check-ci
Time speeds swiftly
check-ci
check-ci Av
oid inv
olv
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
S
N
default
Pricing Card
Back
ground color : pattern.card-pricing.default.back
ground-color #FFFFFF
Border radius : pattern.card-pricing.border-radius 0
gift
$69/
mo
but learn
to listen to the v
check-ci
This dew lik
e life fades away
check-ci
Time speeds swiftly
check-ci
check-ci Av
oid inv
olv
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
S
N
muted
Pricing Card
Back
ground color : pattern.card-pricing.muted.back
ground-color #F
9FAF
B
Border radius : 0
S
how Microcop
y S
how Descrip
tion S
how Icon S
how Chip
Layout and sp
acing
gift
$99/
mo
but learn
to listen to the v
check-ci
This dew lik
e life fades away
check-ci
Time speeds swiftly
check-ci
check-ci Av
oid inv
olv
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
S
N
gift
$99/
mo
but learn
to listen to the v
check-ci
This dew lik
e life fades away
check-ci
Time speeds swiftly
check-ci
check-ci Av
oid inv
olv
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
S
N
56
56
56 56
Pricing Card
A
lignment : Top center
gift
$99/
mo
but learn
to listen to the v
check-ci
This dew lik
e life fades away
check-ci
Time speeds swiftly
check-ci
check-ci Av
oid inv
olv
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
S
N
gift
$99/
mo
but learn
to listen to the v
check-ci
This dew lik
e life fades away
check-ci
Time speeds swiftly
check-ci
check-ci Av
oid inv
olv
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
S
N
32
32
Price + Content + Button
A
lignment : Top left
gift
$99/
mo
Do not follow the idea
to listen to the v
oice w
check-ci
This dew lik
e life fades
check-ci
Time speeds swiftly
check-ci
check-ci Av
oid inv
olv
ement in su
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
S
elect Pa
N
o credit ca
$99/
mo
Do not follow the idea
to listen to the v
oice w
check-ci
This dew lik
e life fades
check-ci
Time speeds swiftly
check-ci
check-ci Av
oid inv
olv
ement in su
check-ci
Product F
eature
check-ci A
nd j
ust study the Way
32
Price + Content + F
eatures
A
lignment : Top left
Horizontal resizing : F
ill
Community file av
ailable in F
igma Community

View Slide

Detect Figma

Styles
Text
Text style : ESDS Text/Body medium
Paragraph spacing : 0
Paragraph indent : 8
Text case : Original
Text decoration : None
Letter spacing : 0
Detect Figma

Variables
Text
Font name : Inter Regular
Paragraph spacing : Local Text text-paragraph-spacing
Paragraph indent : Local Text text-paragraph-indent
Text case : Original
Text decoration : None
Letter spacing : 0
Detect Tokens

Studio Tokens
Text
Text color : color-text-primary
Font name : token-studio-font-family
Paragraph spacing : token-studio-paragraph-spacing
Paragraph indent : 8
Text case : token-studio-text-case
Text decoration : token-studio-text-decoration
Letter spacing : token-studio-letter-spacing

View Slide

Plugin output as ChatGPT Input
https://uxplanet.org/from-vision-to-reality-leveraging-chatgpt-4-vision-in-product-design-63ed85a862e5

View Slide

Thanks!
Figma Plugin EightShapes Specs, on Figma Community
Slides bit.ly/8s-detach
Medium bit.ly/8s-systems-on-medium
On X @nathan curtis
a
On LinkedIn @nathancurtis

View Slide

EightShapes Specs Github Issues

View Slide

EightShapes Specs Slack

View Slide

Designing and Automating Component Specifications

Designing and Automating Component Specifications

Nathan Curtis

More Decks by Nathan Curtis

Other Decks in Design

Featured

Transcript