Style Reptile: Figma to CSS Extractor

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