Skip to main content

Surface color doubts

General Feedback

Hello there! First of all amazing work on heroUI v3!

We are working with designers that are using the Figma v3 toolkit (

https://www.figma.com/community/file/1546526812159103429

) and we noticed that the design system on figma is still using surface[1|2|3] colors while the website documentation refers to a single surface color (

https://v3.heroui.com/docs/handbook/colors#base-colors

). We are trying to understand which one is correct, any info about that? can we still use surface variants?

We have noticed that the new Surface component provides 4 variants (default, secondary, …) but these are not matching any figma defined variable, any clarification on that?

Thanks in advance

Posted by NicolaCastellani ·
2 comments

Log in to comment and vote

Comments2

  • Andres Gonzalez

    •

    Nov 7, 2025

    Hi @NicolaCastellani, the latest version of Figma v3 have the surfaces updated, make sure to be using the last one, we were in alpha and iterating quickly. Now in beta, upcoming changes shouldn’t break the structure :)

    If you made customizations to the Figma file and library, you can update it by duplicating the latest version of the community file whenever a new release is published. From there, you can re-apply your customizations (like tokens, colors, paddings, etc) to match your team’s style. Once that’s ready, you can go into your Figma files and use Swap library to replace the old version with your updated one.

    We know this process can feel a bit manual, so we will create a Figma plugin to help customize and sync your design system to your own style

    • NicolaCastellani

      •

      Nov 7, 2025

      @Andres Gonzalez thanks for the fast reply, I’ve checked and probably we were using a previous version. Looking forward for the Figma plugin so!

      If there’s anything I can help you with (feedbacks/suggestions) do not hesitate to contact me, have a nice day