Do Not Publish Your Designs on the Web with Figma Sites…

…Unless you want to fail all the WCAGs, create litigation risk, close off opportunities in Europe, engage in reputational harm, and oh yeah, throw up barriers to your customers and users.

What am I talking about? Figma announced Figma Sites, letting you publish your Figma designs directly to the web. Here’s the video demonstration from this morning:

Or you can read the blog post announcing it, which opens with this:

Today, we’re launching Figma Sites, an all-in-one tool for you to design and build custom, responsive websites. Here, we share how you can go from design to production in the most efficient—and expressive—ways.

That’s impressive! It’s like Dreamweaver has been resurrected from 1997, except now with mouse parallax!

Tell Me More

That opening was brusque, yeah. The announcement was this morning and I have gaming tonight, so how could I have possibly spent enough time evaluating all the inputs, outputs, and potentials of a product that I have only just heard about? Easy — I looked at the demo sites Figma linked from the post.

If you think this is the part where I do a detailed WCAG review and also wade into bugs and barriers and general failures that are outside WCAG, you’d be wrong. I have no interest in giving Figma free labor. Instead, I am going to do the most basic possible test that anybody at Figma could have done.

Config.new

The Figma post describes Config.new as “Balancing functionality and interactivity.” I popped open Config.new and found that it also balances 210 WCAG violations according to the free axe plug-in.

ARC Toolkit found 203.

Equal Access Accessibility Checker found 219.

Practice-Type.com

The Figma post describes the Practice type specimen site as “Pushing the limits of expression.” I popped open Practice-type.com and found that it also pushes 107 WCAG violations according to the free axe plug-in.

ARC Toolkit found 84.

Equal Access Accessibility Checker found 48.

I’ve added this as of 12 May since it my social media posts (on Masto, on BlueSky) about it, and follow-on conversations, seem to land with those who care about HTML, those who care about accessibility, those who care about CSS, those who care about typography, and those who have never used typewriters.

Wrap-up

Listen, I don’t mean to be the party-pooper here. I just happen to be really good at it. I am demonstrably better at it than the Figma team was at running even the barest WCAG checks against their flagship demos for its Figma Sites product launch.

I am also better at being embarrassed at my behavior.

Updates

1. I understand there is a Discord where you can leave feedback (discord.gg/figma-sites), which is not at all ironic.
2. As folks poke the code, they noted things like a lack of links, instead relying on event handlers alone (check plugin-value-scrum.figma.site and look for //a[@href] using XPath).
3. Figma offers a page, Improve the accessibility of your site, which it seems was ignored for the demo sites.
4. That page says you can set <p>, <h#>, landmarks (with no guidance), and offers a link to NNG for alt text instructions.
5. This statement on that same page is both sad and also fails to mention links seem to be unavailable as well:
   • Note: Some tags—like button—are not yet available in Figma Sites.
6. Figma forgets that true interactivity — buttons and links, not parallax and spinning objects — is the core feature of the web.
7. With GAAD coming up, it will be ironic when Figma pushes out a performative GAAD post claiming to care about accessibility.
8. Ashlee Boyer used JS to query how many nodes of what type and found a sad assortment of code.
9. Using XPath you can do the same with the two sample sites I feature above. For example, the first site has 101 cases of role-less <div>s with aria-label. Try it with //div[@aria-label][not(@role)].
10. Eric’s post mimics my opening line because great, frustrated minds think alike!
11. Remember that automated WCAG checkers can only catch maybe 30% of WCAG violations, and my own testing showed closer to 15% in practice. Doing math, where 210 issues is only 15%, that suggests the first sample site could have 1,400 WCAG violations.
12. Ashlee asked a question in the Figma Sites Discord and got this response and a follow-up:
    • we’re very committed to building a product that can produce accessible content. We are at the start of the journey here with this public beta and integrated ally tools are one of the many critical features we’re missing. We opt’d to get the tool in the hands of users sooner rather than later so they could help shape the product.
    • what do you think we should do during this beta period? Do you think adding a notice (maybe in the publish flow) that the output isn’t fully accessible would help?
13. A broken beta product with issues I wouldn’t even allow in an MVP and for which I have no interest in doing free labor and which seems to have drunk the React Kool-Aid.
14. Kelly Choyce-Dwan poked at one of the sites in A quick look at accessibility in Figma Sites.
15. Tony Alicea made a reaction video in Figma’s New Horrific DIV Generator and has an appropriate reaction to Figma choosing a <div>-first model.
16. Kevin Powell posts a 17 second video clip showing how backward links are implemented and touches on it in his live stream (11:57 to 22:29) and points out trailing letters in <span>s.
17. Schalk Neethling also made a reaction-ish video, Figma Sites Div Soup – Big Nope – Frontend Engineering Explained to demonstrate the awful code output.
18. Mat Marquis looks at Figma’s LLM announcement alongside this and points out the ongoing de-skilling of the work to make replacing the workers easier. This launch clearly wasn’t for users, maybe not so much for customers, but definitely for investors.
19. Kevin Powell broke out the Figma section from his live stream and posted it alone as Figma Sites is worse than you might have thought.
20. Figma has a feedback forum! You can see some folks have asked about the problematic code under [Config 2025] Figma Sites is here — let’s hear what you think!. So far 5 of 33 comments raise accessibility, and they are new members (so likely to be ignored). Emily Lawes raises 10 examples (anchor link may not work depending on paging) that I look forward to Figma addressing.
21. Pavel Samsonov has written Figma Dreamweaver, which includes links to LinkedIn convos I couldn’t be bothered to link.
22. I accidentally found that Figma Sites, instead of using even a now-outdated drop-caps technique, opted to just… use background-colored underscores to create space. You know, like using a typewriter to do a paste-up in 1974 (to be even more outdated).
23. For reasons unclear to me (and Kevin Powell), Figma makes the last character of larger type live in its own <span>. I used to dev tools to style it for literary fun.
24. It wasn’t the idea that failed: it was the execution frames this against a longer trend of visual layout tools.
25. Joe is a bit more judgmental in his post title than I: The true path to garbage code: Figma Sites (I agree)
26. I kind of love that Sarah Fossheim put the Figma Sites code output screen shots behind content warnings.
27. I understand this might come up at Beyond Tellerand and hope to link any videos here later.
28. Shop Talk Show talks about Figma Sites, but if you’re an accessibility practitioner I encourage you to stop listening before it gets into CSS carousels.

The original 600 word post is growing as I drop bullets & links here. Oh well. I blame Figma.