Style Reptile: Figma to CSS Extractor

About this plugin

Style Reptile: Figma to CSS ExtractorThis plugin generates CSS styles from Figma styles and variables in adaptive way: using mobile (m) and desktop (d) values:SpacesTypographySpacesInputCreate a collection named screenCreate a 2 modes in it: m for mobile values and d for desktop valuesAdd spacing variables prefixed with space- of 'Number' type to use as CSS variables in the generation outputRun the pluginOutputAs an output the following will be generated:1. Root variables in the config.css file::root { --space-xxl: 9rem; /* 1rem = 10px to convenient conversion */ --space-xl: 6rem; --space-l: 4rem; --space-m: 3rem; --space-s: 2.5rem; --space-xs: 2rem; --space-xxs: 1.5rem; } @media (min-width: 640px) { :root { --space-xxl: 15rem; --space-xl: 10rem; --space-l: 8rem; --space-m: 6rem; --space-s: 4rem; --space-xs: 3rem; --space-xxs: 2rem; } } 2. Paddings and margins classnames in paddings.css and margins.css:/* All */ .p-xxl { padding: var(--space-xxl); } .p-xl { padding: var(--space-xl); } /* ... */ /* X */ .px-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); } /* ... */ /* Top */ .pt-xxl { padding-top: var(--space-xxl); } /* ... and so on */ p-* / m-* — padding / margin allpx-* / mx-* — padding / margin left and rightpy-* / my-* — padding / margin top and bottompt-* / mt-* — padding / margin toppr-* / mr-* — padding / margin rightpb-* / mb-* — padding / margin bottompl-* / ml-* — padding / margin leftTypographyInputName the text styles by following the pattern m/* for mobile and d/* for desktopRun the pluginOutputAs an output the following will be generated:1. Root variables in the config.css file::root { --text-xxl: normal 400 4rem/1 'Inter'; --text-xl: normal 400 3rem/1 'Inter'; --text-l: normal 400 1.8rem/1.05 'Inter'; --text-m: normal 400 1.3rem/1.2 'Inter'; } @media (min-width: 640px) { :root { --text-xxl: normal 400 9.6rem/1 'Inter'; --text-xl: normal 400 6.4rem/1 'Inter'; --text-l: normal 400 3.6rem/1.05 'Inter'; --text-m: normal 400 2.2rem/1.2 'Inter'; } } 2. Text-style classnames in `typography.css`:.text-xxl { font: var(--text-xxl); } .text-xl { font: var(--text-xl); } .text-l { font: var(--text-l); } .text-m { font: var(--text-m); } Source code and more details can be found here