Getting started
What is Frames For Figma?
Frames For Figma is a UI kit and the ACSS plugin for Figma, made for designing websites that are built with ACSS in WordPress.
Frames For Figma helps you design websites in Figma that are built with ACSS in WordPress. It has two parts: a UI kit full of ready-made components and templates, and the ACSS plugin for Figma, which sets up your colors, type and spacing as Figma variables. Both use the same names and values as ACSS, so what you design is what gets built.
The two parts
Section titled “The two parts”The UI kit
Section titled “The UI kit”The UI kit is a Figma file with premade components and complete website templates. The components follow Frames, a library of ready-made website components for WordPress that’s built on ACSS. Every component uses variables for its colors, text sizes, spacing and corners, so it fits your design system as soon as you set one up.
Read more in the UI kit overview.
The ACSS plugin for Figma
Section titled “The ACSS plugin for Figma”The plugin creates an ACSS design system in your Figma file as native variables and styles: a color palette, a type scale, spacing, content widths, borders, shadows, background and text colors, buttons and forms. You set a few starting values, like your brand color and base font size, and the plugin works out the rest.
Most variables carry their ACSS code syntax, such as var(--space-m), so developers see the exact CSS variable in Dev Mode. When you’re done, you can export your settings to the ACSS plugin in WordPress.
Read more in the plugin overview.
What are ACSS and Frames?
Section titled “What are ACSS and Frames?”ACSS (Automatic CSS) is a CSS framework for WordPress. You give it a few settings, such as brand colors, a base font size and a spacing scale, and it generates a complete set of CSS variables and classes from them. Learn more in the ACSS docs.
Frames is a library of website components for WordPress page builders, built on ACSS. The UI kit gives you the same kind of components in Figma.
You don’t need to know ACSS to use Frames For Figma. The plugin’s screens follow the ACSS settings, and these docs explain each idea the first time you need it.
How the two parts work together
Section titled “How the two parts work together”The plugin creates the variables, and the kit’s components use them. Change your Primary color in the plugin, click Save, and every component that uses Primary updates.
A typical project looks like this:
- Set up your design system with the plugin: colors, fonts, spacing and the rest.
- Design your pages with the kit’s components and templates, and with the variables and styles from the plugin.
- Export your settings to the ACSS plugin in WordPress, so the website uses the same colors, sizes and spacing as your design.
Who it’s for
Section titled “Who it’s for”- Designers who hand off websites to developers building with ACSS in WordPress.
- Designers who also build, and want their Figma file and their WordPress site to share one set of values.
- Agencies and teams that want designers and developers to use the same names for colors, sizes and spacing.
What you’ll need
Section titled “What you’ll need”- A Figma account with edit access to the file you work in. The plugin creates variables and styles, so it can’t run in a file you can only view. It works in the Figma desktop app and in the browser.
- A Frames For Figma license key. It comes with your purchase. See Activate your license.
- WordPress with ACSS 4, but only if you want to export your settings to a website. You can use the kit and the plugin without it.