Status of Web Awesome Components/Plugin for Figma

[RichLewis007]

Hi maintainers and community,,

I’m looking into using Web Awesome in Figma alongside Storybook for a design + dev workflow. Here’s what I’ve gathered so far:

There is already an official Font Awesome plugin for Figma (icons), which works well today.

For Web Awesome components, I saw this mentioned as a stretch goal in the Kickstarter/blog updates—a Figma plugin/library of components with themes.

However, I haven’t found a published “Web Awesome Components” Figma Community file or plugin yet, nor clear documentation about availability.

Questions for the maintainers/community:

1. What’s the current status of a Web Awesome Figma plugin or component library? Is it in development, or available privately to backers?

2. Do you have an ETA or public roadmap entry for Figma support?

3. In the meantime, is there a recommended workaround (e.g. using Shoelace’s Figma kits, or manually building tokens to match Web Awesome themes)?

It would be great to know where things stand so we can plan our workflows around Storybook + Figma together.

Thanks!

• Rich

[lindsaym-fa]

Hey, Rich!

1. We have a UI Kit in progress the currently includes a subset of common WA components (listed below) and any of their presentational attributes. The kit uses Figma Variables to match our Default theme with Variable Modes for Light and Dark color schemes. The kit also has Variable Modes for each of our WA Free color palettes (Default, Shoelace, and Bright).

   1. Layout utilities
   2. Avatar
   3. Badge
   4. Button
   5. Callout
   6. Card
   7. Checkbox
   8. Divider
   9. Icon
   10. Input
   11. Radio
   12. Select
   13. Slider
   14. Switch
   15. Tag
   16. Textarea

2. We plan make this in-progress kit available to WA Pro users in the next couple of weeks so that folks can start testing it in their own projects — with the important caveat that we'll be publishing new versions of the file as we make progress. More work is needed to add the remaining components, create an official plugin that supports any of our other themes and custom themes made with our Theme Builder, and integrate with Figma Code Connect that we have not yet mapped out a timeline for.

3. My best recommendation at this time would be to wait for the initial release of our kit if you can since we've already done a ton of work for you. It would be a shame for you to have to duplicate that effort!

[RichLewis007]

That's great! Thanks for the reply, and I'm looking forward to it.

[lindsaym-fa]

Just following-up to say that our Figma design kit (version 2.0.0 as of writing) is available for Pro users to download here: https://webawesome.com/docs/resources/figma

In the future, we'll dedicate development effort to creating a plugin for importing and exporting themes into the design kit. No ETA at this time, but it's on our radar. I'll close this discussion for now, but feel free to reopen or create a new discussion for plugin-specific inquiries. 😄

[RichLewis007]

Thanks for following up!