0

I have received a component library. I have to use its CSS for the relevant components in our webb-app. I go to "checkbox". I right-click on it and choose "copy as CSS". The CSS for all the states of a checkbox is then copied. But it is just the CSS declarations with their properties and values. The CSS selectors are missing. Is there any way to also get the CSS selectors from Sigma?

Eyvind Almqvist
  • 150
  • 11
  • But why would you like to do that? As far as I know Figma uses randomly generated hashes as classes for elements. – Jax-p Aug 19 '22 at 08:47
  • Here is an example of what I mean. I want the whole CSS code including the selectors: input[type=checkbox] { visibility: hidden; } In this example I would only get this code from Figma: visibility: hidden; – Eyvind Almqvist Aug 19 '22 at 09:06
  • So I should write the CSS selector myself? input[type=checkbox] { ? I am a beginner with Figma by the way. – Eyvind Almqvist Aug 19 '22 at 09:07

1 Answers1

1

As far as my experience, I usually type selector manually because most elements have a different class name or id than what's in the design. If you want it to work automatically, I think you can use plugin to convert from Figma to HTML. You can find them here https://www.figma.com/community/search?resource_type=plugins&sort_by=popular&query=figma+to+html&editor_type=all

Su'udi Khoirul Anam
  • 74
  • 3
  • I have also heard that most designers do this manually, but it seems difficult. I right-click on "checkbox" in our component library and choose "copy as CSS". I then get a file with over 600 lines of code. How can I write all these CSS selectors manually? Here is a small part of the file : /* State=State7 */ /* Auto layout */ display: flex; flex-direction: row; align-items: flex-start; padding: 0px 4px 0px 0px; gap: 12px; position: absolute; width: 101px; height: 24px; left: 20px; top: 404px; /* Checkbox */ width: 24px; height: 24px; – Eyvind Almqvist Aug 20 '22 at 11:55
  • I mean how can I find out which CSS selector to write for which declaration? – Eyvind Almqvist Aug 20 '22 at 11:57