Figma starter template for Automatic.css (ACSS)
A structured Figma template with ACSS variable mapping, a few swappable components, and a Style Guide.
Native Figma variables
Built with native figma variables, collections and variable mode architecture.
ACSS naming convention
All variables follow ACSS-compatible naming convention for direct mapping.
Builder-agnostic
Optimize your Figma-to-development workflow regardless of your page builder
Variable modes
Switch from light to dark, desktop to mobile in seconds, with variable modes.
Use with Schema MCP
Optionally use this Figma file with Schema plugin, as the backbone of your Figma to ACSS workflow.
Easy to expand
The template only provides the variable architecture, not sections. Build the design you want, your way.
Web designers and agencies who build WordPress sites with Automatic.CSS. If you care about systematic design, clean variable architecture, and workflows that scale — Schema gives you a Figma foundation built on ACSS best practices from the ground up.
Automatic.CSS (ACSS) is a CSS framework for WordPress that generates a complete variable system for your site — spacing scales, typography, color, layout, and more. It works with Bricks and EtchWP builders. Schema mirrors that variable system inside Figma. Learn more at automaticcss.com.
A Figma Pro seat is recommended. You need it to use Variable Modes (light/dark, desktop/mobile). Without it, the file still works — you just won't have mode switching.
The ACSS Figma plugin is a plugin — Schema is a design file. The ACSS plugin offers efficiency in some areas, but Schema aims to be more fast-paced and aligned with the latest best practices for Figma Pro seats.
Yes — unlimited client and personal projects. No restrictions.