Add guidelines to Figma Make

To help Figma Make create a functional prototype or web app that better meets your needs and expectations, you can provide guidelines in the Guidelines.md file. This includes instructions for how you want Figma Make to behave in terms of coding and personality, and how to use things like style context.

Add guidelines

To open the guidelines file:

1. At the top of Figma Make, click Code.
2. In the file explorer at the left side of the code editor, click guidelines, and then Guidelines.md.

Instructions, best practices, and examples of how to use the guidelines file are included in the file itself. For convenience, the content of the file is available in the following section.

System Guidelines

Use this file to provide the AI with rules and guidelines you want it to follow.
This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs

TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need

# General guidelines

Any general rules you want the AI to follow.
For example:

* Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
* Refactor code as you go to keep code clean
* Keep file sizes small and put helper functions and components in their own files.

--------------

# Design system guidelines
Rules for how the AI should make generations look like your company's design system

Additionally, if you select a design system to use in the prompt box, you can reference your design system's components, styles, and variables.
For example:

* Use a base font-size of 14px
* Date formats should always be in the format “Jun 10”
* The bottom toolbar should only ever have a maximum of 4 items
* Never use the floating action button with the bottom toolbar
* Chips should always come in sets of 3 or more
* Don't use a dropdown if there are 2 or fewer options

You can also create sub sections and add more specific details
For example:


## Button
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
users through the application. It provides visual feedback and clear affordances to enhance user experience.

### Usage
Buttons should be used for important actions that users need to take, such as form submissions, confirming choices,
or initiating processes. They communicate interactivity and should have clear, action-oriented labels.

### Variants
* Primary Button
  * Purpose : Used for the main action in a section or page
  * Visual Style : Bold, filled with the primary brand color
  * Usage : One primary button per section to guide users toward the most important action
* Secondary Button
  * Purpose : Used for alternative or supporting actions
  * Visual Style : Outlined with the primary color, transparent background
  * Usage : Can appear alongside a primary button for less important actions
* Tertiary Button
  * Purpose : Used for the least important actions
  * Visual Style : Text-only with no border, using primary color
  * Usage : For actions that should be available but not emphasized

Add guidelines for your design system packages

When you implement design system packages for Figma Make, you should provide additional guidelines for how Figma Make can use the components. If you already document your design system in Storybook, for example, you can provide that component-specific documentation in the guidelines.md file.

Add component-specific guidelines

To add component-specific guidelines:

1. At the top of Figma Make, click Code.
2. In the file explorer at the left side of the code editor, right-click click guidelines, and then select Create new file. Repeat this step for each component you want to provide guidance for.
3. In the guidelines file, provide specific guidance for the component, such as how to use the component and what variants to apply depending on the usage.

Example: Button component

# Button

Buttons are used to initiate actions on a page or form.

## Overview

Buttons allow users to initiate an action or command when clicked or tapped. The Button's label indicates the purpose of the action to the user. Buttons can optionally include icons at the start or end to provide additional visual context.

## Variants

### Button

The standard Button component supports three variants:

- **Primary**: Use for the main action on a page or in a section
- **Neutral**: Use for standard actions that aren't the primary focus
- **Subtle**: Use for less prominent actions or tertiary options

### ButtonDanger

The ButtonDanger component is used for destructive actions:

- **Danger-Subtle**: Use for destructive actions that need less visual weight

---

## Props

### Label
All buttons require a text label that clearly describes the action.

### Icons
Buttons support optional icons positioned at the start or end of the label:
- **iconStart**: Place an icon before the label to reinforce the action
- **iconEnd**: Place an icon after the label (often used for directional indicators)

### Size
Buttons support a **small** size option for use in compact interfaces.

### Disabled State
Set `isDisabled` to true to indicate that an action is temporarily unavailable. Disabled buttons cannot respond to user input and are visually muted.

---

## ButtonGroup

The ButtonGroup component is used to group related buttons together with consistent spacing and alignment.

### Alignment Options

- **Center**: Buttons are centered horizontally
- **End**: Buttons are aligned to the end of the container
- **Justify**: Buttons are spaced to fill the full width
- **Stack**: Buttons are stacked vertically

---

## Best Practices

### Primary Variant

Use only **one primary Button** on a page whenever possible, to indicate its emphasis relative to other actions.

---

### General

| ✅ Do | 🚫 Don't |
|------|-----------|
| Keep Button labels succinct with no line breaks. | Buttons should never contain line breaks and lose their shape. |
| Use sentence case for labels. | Don't use all-caps or other text formats. |
| Show focus styles on keyboard `:focus`. | Don't remove default Button `:focus` styles. |
| Place primary buttons at the **end** of a ButtonGroup. | Don't place primary buttons at the start of a ButtonGroup. |
| Use a primary Button with neutral or subtle Buttons. | Don't place multiple primary buttons together. |
| Use ButtonDanger for destructive actions like delete or remove. | Don't use regular Button variants for destructive actions. |