You can now copy variables from Figma and import them into ACSS, but you must follow certain rules—mainly, the Figma variable names should match those used in ACSS.
Remember to download the base ACSS file from Figma in your Lemon Squeezy account “Fancy (Figma free) or Fancy (Figma Pro)”. This file includes all the variables with their calculations and functions.
Color Palette
Simply name them the same as in ACSS. Fancy Figma will recognize the following names:
primary, secondary, tertiary, base, neutral, accent, action, danger, info, shade, success, warning
The plugin will recognize color variations as well, such as primary-ultra-light.
Alternative Colors “alt”
If you’re working with dark mode, you can create the alt versions of your colors, for example:
- primary-alt
- primary-ultra-light-alt
- primary-light-alt
If you have the PRO version of Figma, you don’t need to create alt variables—you can use modes. Fancy Figma will take the first mode as the default color and the second as the alternate color.
Semantic Colors
Semantic colors are variables that are assigned to an existing variable from the color palette. These are the variables that can be exported to ACSS:
Typography
ACSS automatically calculates heading and text sizes using a base value and a scale factor. Thanks to Fancy Figma’s variable calculations feature, this can also be done in Figma.
The variables for headings and text should be the following:
Headings and Text with the Free Version of Figma
If you’re using the Free version of Figma, don’t worry—you can create a separate set of variables for the mobile version. It’s recommended to use the same scale factor for both desktop and mobile.
For the mobile version, the variable names should match the base or desktop version, just add -m at the end of the variable name:
Option 2 with the Free Version of Figma
If you don’t want to create another set of variables with -m at the end, you can manually calculate the variables and add the minmax(min, max) function in the variable’s description to export these values to ACSS.
With this option, you’ll lose the automatic scaling calculations, but if you prefer to define sizes manually, it’s a great alternative.
Headings and Text with the PRO Version of Figma
If you have the PRO version of Figma, everything gets easier—you can create a mode for the mobile version. Fancy Figma will treat the first mode as the desktop version and the second mode as the mobile version.
Override Heading and Text Sizes
ACSS allows you to override the default heading and text sizes if you don’t want to follow the automatic scale.
In Figma, if you want to override the size, simply remove the calc function from the variable description and manually enter the variable value. Fancy Figma will detect that there’s no calculation and will override the value in the ACSS settings.
This works for both the Free and PRO versions of Figma.
Font weight
text and heading font-weight are also supported
Spacing
Spacing in ACSS is also calculated automatically, but unlike headings and text, spacing values generated cannot be overridden. That’s why Fancy Figma will only export the scale, base, and multiplier variables.
Spacing values for mobile works the same way as with text variables.
Borders
With Fancy Figma, you can also export border styles and border radius values.
Border Radius
ACSS handles border radius automatically and the generated values cannot be overridden. That’s why Fancy Figma will only export the base value and the scale. The variable names should be as follows:
Border Styles
Border styles should use the following names, and the color variables should be assigned to existing color variables:
Container width (Website Dimensions)
ACSS automatically generates widths using the content-width variable. The generated values cannot be overridden. Fancy Figma will export content-width and content-width-mobile.
Padding and Gaps
Padding and gaps are variables that are assigned to an existing variable from the space. These are the variables that can be exported to ACSS:
