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

© Copyright 2023 • EightShapes LLC Design decisions – colors,
typography, properties, space, shape – are valuable

© Copyright 2023 • EightShapes LLC Inspecting designs – even
with Figma’s emerging Dev mode – is a like a hunting for treasure on a beach without a map

© Copyright 2023 • EightShapes LLC Collaborators value design decisions
organized well as a simple package

© Copyright 2023 • EightShapes LLC 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 Name : ESDS Icon asset / Info 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 Name : ESDS Icon asset / Alert-error 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} Property type : Boolean Default : false Associated layers : Action area Content area {Title} {Details} Show less {Label} {Label} Property type : Boolean Default : false Associated layers : Content area Dismissable {Title} {Details} Show less {Label} {Label} Property type : Boolean Default : false Associated layers : Dismiss Icon Details? {Title} {Details} Show less {Label} {Label} Property type : Boolean 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 Alignment : Top left V ertical resizing : Hug 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 Alignment : Top left V ertical resizing : Hug Horizontal resizing : Fill 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/half-x 8 Padding : ESDS Space padding/1x 16 ]-[ Item spacing: ESDS Space item-spacing/1x 16 ]-[ Item spacing: ESDS Space item-spacing/three-quarter-x 12 ]-[ Item spacing: ESDS Space item-spacing/one-and-a-half-x 24 {Title} {Details} Show less {Label} {Label} Comfortable ESDSV Alert Item spacing: ESDS Space item-spacing/half-x 10 Padding : ESDS Space padding/1x 20 ]-[ Item spacing: ESDS Space item-spacing/1x 20 ]-[ Item spacing: ESDS Space item-spacing/three-quarter-x 15 ]-[ Item spacing: ESDS Space item-spacing/one-and-a-half-x 30 {Title} {Details} Show less {Label} {Label} Compact ESDSV Alert Item spacing: ESDS Space item-spacing/half-x 6 Padding : ESDS Space padding/1x 12 ]-[ Item spacing: ESDS Space item-spacing/1x 12 ]-[ Item spacing: ESDS Space item-spacing/three-quarter-x 9 ]-[ Item spacing: ESDS Space item-spacing/one-and-a-half-x 18 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 Border radius : ESDS Shape border radius/module 16 {Title} {Details} Show less {Label} {Label} Squared ESDSV Alert Border radius : ESDS Shape border radius/module 0 ESDS Color {Title} {Details} Show less {Label} {Label} L ight ESDSV Alert Background color : ESDS Color Alert/Basic/Background #F0F1F1 Border color : ESDS Color Alert/Basic/Element #A6ACB0 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

© Copyright 2023 • EightShapes LLC 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)

© Copyright 2023 • EightShapes LLC Decisions {Title} {Details} Show
less {Label} {Label} {Title} {Details} Show less {Label} {Label} 8 16 16 16 16 ESDSV Alert Direction : Horizontal Alignment : Top left Vertical 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} Error ESDSV Alert Background color : ESDS Color Alert/Error/Background #FCF0EF Border color : ESDS Color Alert/Error/Element #D90936 Decorative Icon Name : ESDS Icon asset / Alert-error Color : Error Decision Decision Decision Decision Decision Decision Decision Decision Decision Decision

© Copyright 2023 • EightShapes LLC Inspection only reveals decisions,
specs illustrate more like differences In Figma dev mode In specification

© Copyright 2023 • EightShapes LLC {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 Name : ESDS Icon asset / Info {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 Name : ESDS Icon asset / Check Color : Success {Title} {Details} Error ESDS Alert Background color : ESDS Alert/Error/Background Light Border color : ESDS Alert/Error/Light Decorative Icon Name : ESDS Icon asset / Alert-error 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

© Copyright 2023 • EightShapes LLC 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

© Copyright 2023 • EightShapes LLC Specs unify work across
frameworks Plan Design Specification Code Code Code Code IOS android Release Release Release Release Figma asset Design docs REACT angular

frameworks Plan Design Specification Code Code Code Code IOS android Release Release Release Release Figma asset Design docs REACT angular The “handoffs”

frameworks Plan Design Specification Code Code Code Code IOS android Release Release Release Release Figma asset Design docs REACT angular Designer 2 Designer 3 Developer 1 Developer 2 Developer 3 Developer 4 Designer 1

© Copyright 2023 • EightShapes LLC 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 Name : ESDS Icon asset / Info {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 {Title} {Details} Properties Type 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} Informational ESDSV Alert Background color : ESDS Color Alert/Info/Background #EDF0FB Border color : ESDS Color Alert/Info/Element #0E68D4 Decorative Icon Name : ESDS Icon asset / Info 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

© Copyright 2023 • EightShapes LLC 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 Vertical resizing : Hug Horizontal resizing : Fixed A List item 100+ A List item 100+ state-layer Direction : Horizontal Alignment : Middle left Vertical resizing : Fixed Horizontal resizing : Fill 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 Direction : Vertical Alignment : Middle left Vertical resizing : Hug Horizontal resizing : Hug A List item 100+ A Content Direction : Vertical 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

© Copyright 2023 • EightShapes LLC 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

© Copyright 2023 • EightShapes LLC Anatomy What does it
include? What attributes do they have? What does each depend on? What properties are configured?

© Copyright 2023 • EightShapes LLC Properties How do attributes
vary per prop option? What’s shown or hidden when? What’s default versus alternative?

© Copyright 2023 • EightShapes LLC Layout and spacing How
are elements inset? How are elements spaced? How do elements wrap? How are elements aligned? How do elements resize?

© Copyright 2023 • EightShapes LLC 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

© Copyright 2023 • EightShapes LLC Specs component template {Component
name} Anatomy 1 {Layer name} Depends on : {Dependency} {Name} : {Value} {Name} : {Value} 2 {Layer name} {Name} : {Style/token} {Name} : {Style/token} {Name} : {Value} 3 {Layer name} {Name} : {Value} {Name} : {Style/token} {Name} : {Style/token} 4 {Layer name} Depends on : {Dependency} {Name} : {Value} {Name} : {Value} # # # # # # # # # # # # Properties {Variant property name} {Property value} (default) {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Property value} {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Property value} {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Boolean property name} Property type : Boolean 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} {Breakpoint or Device} {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} {Element name, such as Call to action button} {Type, such as Visual element} {Alternate text, such as Button or Icon name} {Element name, such as Call to action button} {Type, such as Visual element} {Alternate text, such as Button or Icon name} {Element name, such as Call to action button} {Type, such as Visual element} {Alternate text, such as Button or Icon name} {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} 00 {Value} $esds-... $esds-... {Figma style} {Description} Aa {Value} $esds-... $esds-... {Figma style} {Description} {Value} $esds-... $esds-... {Figma style} {Description} {Value} $esds-... $esds-... {Figma style} {Description} {Value} $esds-... $esds-... {Figma style} {Description} {Subsection title} Token Alias Figma style Value 00 {Value} $esds-... $esds-... {Figma style} 00 {Value} $esds-... $esds-... {Figma style} 00 {Value} $esds-... $esds-... {Figma style} 00 {Value} $esds-... $esds-... {Figma style} {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} 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}

© Copyright 2023 • EightShapes LLC 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. # # # # # # # # Depends on : {Dependency} {Name} : {Style/token} {Name} : {Value}

© Copyright 2023 • EightShapes LLC Specs can be expensive.
Senior designer, on my team: 2 hours? Junior designer, new to the field: 8 hours?

© Copyright 2023 • EightShapes LLC 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

© Copyright 2023 • EightShapes LLC What can you automate
from a well-built Figma component? {Component name} Anatomy 1 {Layer name} Depends on : {Dependency} {Name} : {Value} {Name} : {Value} 2 {Layer name} {Name} : {Style/token} {Name} : {Style/token} {Name} : {Value} 3 {Layer name} {Name} : {Value} {Name} : {Style/token} {Name} : {Style/token} 4 {Layer name} Depends on : {Dependency} {Name} : {Value} {Name} : {Value} # # # # # # # # # # # # Properties {Variant property name} {Property value} (default) {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Property value} {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Property value} {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Boolean property name} Property type : Boolean 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} {Breakpoint or Device} {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} {Element name, such as Call to action button} {Type, such as Visual element} {Alternate text, such as Button or Icon name} {Element name, such as Call to action button} {Type, such as Visual element} {Alternate text, such as Button or Icon name} {Element name, such as Call to action button} {Type, such as Visual element} {Alternate text, such as Button or Icon name} {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} 00 {Value} $esds-... $esds-... {Figma style} {Description} Aa {Value} $esds-... $esds-... {Figma style} {Description} {Value} $esds-... $esds-... {Figma style} {Description} {Value} $esds-... $esds-... {Figma style} {Description} {Value} $esds-... $esds-... {Figma style} {Description} {Subsection title} Token Alias Figma style Value 00 {Value} $esds-... $esds-... {Figma style} 00 {Value} $esds-... $esds-... {Figma style} 00 {Value} $esds-... $esds-... {Figma style} 00 {Value} $esds-... $esds-... {Figma style} {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 @ {Description( @ {Description( @ {Description} Enhancements @ {Description( @ {Description( @ {Description} Fixes @ {Description( @ {Description( @ {Description} Version #.#.# • MMM DD, YYYY New features @ {Description( @ {Description( @ {Description} Enhancements @ {Description( @ {Description( @ {Description} Fixes @ {Description( @ {Description( @ {Description}

© Copyright 2023 • EightShapes LLC 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 color : M3/sys/light/on-surface-variant Text style : M3/label/medium Week day, Day 4 Height : 40 Text color : M3/sys/light/on-surface 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 Depends on : icon-button Icon : Icons/navigate_before Configuration : standard State : enabled icon-button 8 Depends on : icon-button Icon : Icons/navigate_next Configuration : standard 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 color : M3/sys/light/on-surface-variant Text style : M3/label/medium Week day, Day 4 Height : 40 Text color : M3/sys/light/on-surface Text style : M3/headline/large Edit icon 5 Depends on : icon-button Icon : Icons/mode_edit_24px Configuration : standard State : enabled Weekday column header 6 Depends on : Building blocks/Menu button State : Enabled Previous month button 7 Depends on : icon-button Icon : Icons/navigate_before Configuration : standard State : enabled Next month button 8 Depends on : icon-button Icon : Icons/navigate_next Configuration : standard 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

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 Name : ESDS Icon asset / Info Color : Secondary Title Text color : ESDS Color Text/Primary Details Text color : ESDS Color Text/Primary {Title} {Details} Informational ESDS Alert Background color : ESDS Alert/Info/Background Light Border color : ESDS Alert/Info/Light ESDS Icon Name : ESDS Icon asset / Info Color : Info Title Text color : ESDS Text/Primary Light Details Text color : ESDS Text/Primary Light {Title} {Details} Success ESDS Alert Background color : ESDS Alert/Success/Background L Border color : ESDS Alert/Success/Light ESDS Icon Name : ESDS Icon asset / Check Color : Success Title Text color : ESDS Text/Primary Light Details Text color : ESDS Text/Primary Light {Title} {Details} {Title} {Details} © Copyright 2023 • EightShapes LLC

© Copyright 2023 • EightShapes LLC 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 color : pattern.card-pricing.sub-title-color #6B7280 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 color : pattern.card-pricing.sub-title-color #6B7280 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 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. 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 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. 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 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. 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. 56 56 56 56 Pricing Card Direction : Vertical A lignment : Top center Vertical resizing : Hug Horizontal resizing : Hug 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. 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. 32 32 Price + Content + Button Direction : Vertical A lignment : Top left Vertical resizing : Hug Horizontal resizing : Hug 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 In this short life of ours 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 In this short life of ours 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 Direction : Vertical A lignment : Top left Vertical resizing : Hug Horizontal resizing : F ill Community file av ailable in F igma Community

© Copyright 2023 • EightShapes LLC Detect Figma Styles Text
Text color : ESDS Text/Primary Light 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 Text color : ESDS Color Text/Primary 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

Designing and Automating Component Specifications

Designing and Automating Component Specifications

More Decks by Nathan Curtis

Other Decks in Design

Featured

Transcript