Figma Design Kit

Bring essential Web Awesome components and utilities into your Figma designs with the official Web Awesome Design Kit.

A new version of the design kit is in the works. Newer additions to Web Awesome, like <wa-toast> and <wa-date-picker>, aren't included in the currently available kit.

To see what we're adding and track progress, follow the issue on GitHub.

Using the Design Kit

Link to This Section

Grab the design kit to design mock-ups and prototypes with the same look and options you'll find in Web Awesome.

Import

Open the file from your device's file explorer, or import the file in Figma's file browser. Follow the prompts in Figma to import the file into your Drafts or Project.

Make Something Awesome

How you use the design kit depends on your Figma plan.

Starter Professional & Above

With the design kit open, simply copy and paste components from the design kit into your own files.

To share the design kit with your Figma team, publish the library. While viewing the design kit, open the dropdown next to the file name and press Publish library.

To use the design kit in a Figma file, go to the Assets panel and open Libraries. Find the design kit and select Add to file.

Start slinging components and design something awesome!

What's Included

Link to This Section

Gaps between design and development? No, thank you. We've leveraged a number of Figma features to bridge those gaps and ensure as much parity with Web Awesome as we can muster, including:

Figma Feature	Gap Bridged
Variables	Match Web Awesome's design tokens and bring the same look and feel of the Default theme into your Figma designs
Variable modes	Choose which of Web Awesome's free color palettes to use in your designs and switch between built-in Light and Dark modes
Text styles	Style body text, headings, labels, and more to match the typography in Web Awesome's native styles and text utilities
Effect styles	Easily apply premade shadows to elements based on Web Awesome's shadow tokens
Components	Enjoy the same composability we love about web components, powered-up with many of the same component properties you'll find in Web Awesome

Limitations

Link to This Section

Figma doesn't yet support many of the CSS features we rely on in Web Awesome. As such, there will be discrepancies in the variables, styles, and properties used in the design kit and those used in Web Awesome components. Here are some notable limitations:

CSS Feature	Workaround
calc()	We use calc() extensively in our font size, space, border width, border radius, and shadow scales. In Figma, we've omitted each --wa-[property]-scale token, and rather than scaling variables based on a single multiplier, we use static pixel values.
color-mix()	We use color-mix() throughout themes to add transparency to other theme colors. In Figma, we can't use other variables with opacity, so we instead use comparable static color values with an opacity percentage to achieve a similar effect.
em units	We use em units for relative font sizes and component sizing. In Figma, we've omitted tokens such as --wa-font-size-smaller and --wa-font-size-larger in favor of setting an explicit font size variable as appropriate. For other relatively sized tokens such as --wa-form-control-padding-*, --wa-form-control-height, and --wa-form-control-toggle-size, we've added Figma variables for each practical size (S, M, and L) which use equivalent static values based on a 16px root font size.
unitless line-height	We use unitless values for our --wa-line-height-* tokens. Because Figma doesn't support unitless line heights nor storing percentages as variables, we specify the equivalent percentage value for each applicable text style.

Updating the Design Kit

Link to This Section

You can freely customize the design kit and publish any of your customizations to the rest of your team. However, downloaded Figma files have one unfortunate limitation: they won't automatically receive updates when we make changes to the original file.

When you're ready to update, any customizations you make will need to be re-implemented in the latest version of the file. But, there's good news: swapping your old library for the new one in any design file where you're using the kit is a piece of cake. 🍰

Update to the Latest Design Kit Version

Link to This Section

1. Download and import the latest version of the design kit
2. Re-implement customizations to any variables, styles, or components as needed
3. Publish the latest version of the design kit as a new library

Swap in the New Library

Link to This Section

Swap in the new library in any design file using the design kit:

1. Go to the Assets panel and open Libraries.
2. In the Manage libraries dialog, select This file, find and select the old library
3. Press Swap library
4. In the next view, select the new library from the dropdown at the top
5. Press Swap library again to replace all components and styles from the old library

You can keep both libraries published as long as needed. Once everyone's set up their files with the new library, you can unpublish or delete the old library.

Version History

Link to This Section

2.0.0

Link to This Section

• Adds components for Breadcrumb, Breadcrumb Item, Carousel, Color Picker, Copy Button, Details, Dialog, Drawer, Dropdown, Popover, Progress Bar, Progress Ring, Radio Group, Rating, Skeleton, Tab Group, Tab, Tooltip, Tree, and Tree Item
• Adds Text Node component to better emulate Web Awesome's slot capabilities with Figma's Instance Swap properties
• Adds Focus Offset, Hover color, and Active color variables
• Adds Focus Ring effect style
• Adds Arrow Padding Offset and Arrow Size Diagonal variables for sizing and positioning tooltip arrows
• Removes Typography component in favor of pairing Text Node with the existing Text Styles, which significantly reduces redundancy
• Updates Checkbox, Input, Radio, Select, Slider, Switch, and Textarea with Focus and Disabled properties and with Instance Swap properties for label, start, end, and hint slots
• Updates Button with Focus, Disabled, Hover, and Active states
• Separates Button and Icon Button as separate components for performance

1.0.0 🚀

Link to This Section

• Adds initial variables and variable modes
• Adds text styles for Body, Heading, Strong, Label, Value, and Hint text
• Adds effect styles for shadows
• Adds components for Typography, Layout, Avatar, Badge, Button, Callout, Card, Checkbox, Divider, Icon, Input, Radio, Select, Slider, Switch, Tag, and Textarea