A presentation at TorontoJS: JS Lightning Talks: Coding for Design Systems by Amy Lam
Building a new Design System Step 1: Icons Amy Lam Copyright © 2021 HashiCorp
About me 👋 I am a Senior Engineer, Design Systems & Accessibility at HashiCorp. I live in San Francisco, but lurk in TorontoJS! ● ● ● Product-minded developer with a focus on the frontend Fan of Design Systems, User Experience (UX), and Developer Experience (DX) @amyrlam on Twitter
About HashiCorp Our software stack enables the provisioning, securing, connecting, and running of apps and the infrastructure to support them. We unlock the cloud operating model for every business and enable their digital transformation strategies to succeed.
Step 1: Icons Why icons? Icons provided an avenue to bring the Product and Marketing sides of the company together. ● ● ● ● Get folks speaking the same visual language across different products and frontend frameworks Opportunity to make a wide impact, to pave the way for the adoption of the new HashiCorp Design System Shipped Ember component in @hashicorp/ember-flight-icons Shipped framework-agnostic raw SVGs in @hashicorp/flight-icons
Icon design Default: Generic Contained Filled Off
Icon design usage Use the Filled style where contrast against other icons is important
Icon component code
Icon component props ● ● ● ● ● ● @name: Only @name is required @color: Defaults to a fill of “currentColor”, can override with our color design tokens @size: Defaults to 16px square, controls the width and height, other variant is 24px @stretched: Defaults to “false” ○ Stretched is if the SVG should have 100% width and height, e.g. if it should stretch to fill the parent container @isInlineBlock: Defaults to display: inline-block, pass in @isInlineBlock={{false}} to override Can add additional CSS classes as needed
Icon engineering fun facts ● ● ● ● ● We use Node scripts to automate the SVG export from Figma ○ One source of truth that populates icons in @hashicorp/ember-flight-icons and @hashicorp/flight-icons Use Percy.io visual regression testing to check icon display and API variants from each new Figma export Accessibility guidelines Put icon name synonyms in Figma under the description field 🔥 Flight is open source, check it out: ○ github.com/hashicorp/flight ○ flight-hashicorp.vercel.app
👉 live demo 👈
Looking forward Existing loading spinner Portion of the icons animate
Thank You hello@hashicorp.com www.hashicorp.com
Amy is a Senior Engineer on a new Design Systems team at HashiCorp. We are building a new design system to serve HashiCorp’s products (HashiCorp Cloud Platform, Terraform, Vault, Consul, and more) in Ember.js, in addition to documentation and marketing microsites in Next.js. This talk is about the implementation of a new icon set to deliver a consistent visual language across UIs.
for free. You
can too.