Proper customization of Figma Component and Theme libraries?

[WillCKyle]

Hi, I'm asking because there doesn't seem to be documentation in the Figma files about how they should be used. I figured out how to publish the components and styles to libraries for use in other files, which is great!

1. How should I use custom styling in the components outside of colors, eg border radius? I'm wondering if I should simply make tweaks in the local version of the components file and publish the changes to my personal version of the library?

2. How should I switch components to light or dark mode based on context? It looks like they use the light theme by default, and reference color tokens which can be switched for equivalent tokens in the dark mode. But this token-by-token change is tedious. Do I really need to publish a custom dark-mode version of each component to my local components library?

[loreina]

Hi @WillCKyle,

We have a Design Guidelines page on our docs site that's got some info on getting started with our libraries, though it's been mostly catered towards internal designers. If there's any guidance you'd like to see, send some suggestions our way and we can add it in our next iteration.

1. All the tokens that we manage in a theme are in the Paste Default Theme or Paste Dark Theme. Unfortunately, border radius isn't one of them. What you suggested by duplicating the library and making those tweaks would be a good alternative.

2. You can try Figma's native swap feature to swap between default and dark libraries to avoid the token-by-token change. If you're looking for the component instances to be imported in dark mode by default, you may have to publish a dark theme component library as we currently have the Paste Components library setup to be use Paste Default Theme.

Super happy to hear that you're using our Figma libraries! Would love to know more about what you're using it for and your experience thus far, and let us know if you have any other questions.