When you build with Figma Make, you want it to follow your brand styles, component guidelines, and tone of voice. UI Rules makes those guidelines available to Make as it builds.
You can give Figma Make those decisions through guidelines. With UI Rules, you keep your design tokens and guidelines together, then make them available through an MCP connector. Figma Make can read the rules for the components it is building, alongside your brand's content and accessibility guidance.
In this walkthrough, I use that connection to build a contact form and update a color token from Figma Make.
What guidelines add to your design system
Your design tokens provide values such as colors, spacing, and typography. Guidelines explain how to use them and how an interface should behave.
For a contact form, that could include rules about button labels, validation messages, keyboard focus, and tone of voice. Those decisions help the form work and sound like the rest of your product.
In UI Rules, you can organize guidelines alongside the components they describe. Each rule has a guidance type, such as Do or Don't, and an importance level: Required, Recommended, or Optional. You can edit the wording and use Enhance to help refine a rule before saving it.
If you're starting with existing documentation, begin with the guidelines your team uses most often. The rules guide covers how to write and organize them.
How guidelines work in Figma Make kits
Make kits bring reusable design system context into Figma Make, including library styles, code packages, and guidelines. You can write guidelines in Markdown or ask Make to help generate them.
Figma supports multiple guideline files and folders. Its guidelines documentation recommends smaller files with an overview that directs Make to the guidance it needs. For example, you could have separate files for buttons, inputs, and typography.
UI Rules gives your connected tools a shared place to read that guidance. You manage rules in UI Rules and let Figma Make retrieve them through MCP. The same brand can also serve tools such as Cursor, Claude Code, and Codex, so your team has one place to maintain its guidelines.
Connect Figma Make to UI Rules
Before building, set up your brand's styles and rules in UI Rules and connect the project you want Figma Make to use. The video starts with this connection already in place.
Follow the Figma Make connection guide to add UI Rules as a custom MCP connector. It covers the server address and how to authenticate with your project's connection key.
Enable the connector in the Make file you're working on. If Make doesn't use it, explicitly reference UI Rules in your prompt. For example:
Build a simple contact form using my UI Rules brand styles and guidelines. Read the relevant component, content, and accessibility rules before building.
Build a form with the relevant rules
In the video, I ask Figma Make to build a simple contact form. The tool calls show it retrieving rules for the form's building blocks, including buttons, inputs, and labels.
UI Rules supports fetching rules by component or topic. That lets Make read the guidance for the elements it is working on without loading every component's rules up front. It also needs the broader context: your brand styles, content guidance, and general accessibility rules.
For this form, the colors come from the brand's design tokens. The wording has tone-of-voice guidance, and the inputs have validation and accessibility rules. Each source informs a different part of the result.
Check the behavior as well as the appearance
One rule in the demo concerns failed submissions: summarize the errors and move focus to the first invalid field. That gives someone a clear place to start correcting the form.
It's a small interaction, but it needs to be part of the build instructions. The same applies to other details your team has already worked through, such as how an error message explains the next step.
After Make builds the form, try an invalid submission, move through the fields with a keyboard, and review the labels and messages. Access to a rule helps Make apply it; checking the generated behavior is still part of the work.
Update a project color from Figma Make
The final example changes the primary color from blue to purple through the UI Rules connection.
With the appropriate write permissions, Figma Make can ask UI Rules to update a supported token value. The MCP token tool writes a project override, so this kind of update changes the connected project's value while the shared brand keeps its own value.
If you want the new color to apply across the brand, update the brand itself in UI Rules. Project overrides explain how an individual app can differ from its brand.
Try it with one screen
Start with a form or another small interface you know well. Bring in your brand styles, add the guidelines you would normally raise in a design review, and connect Figma Make.
Then build the screen and check the result. You can refine the rules as you find decisions that need clearer guidance.
Get started with UI Rules, or follow the Figma Make setup guide if your brand is already ready.
