export const meta = {
  title: `Theming`,
  description: `Configure your Amplify-generated UI components to match your brand using the Amplify Theme Editor Figma plugin`,
};

Use [AWS Amplify UI Builder plugin](https://www.figma.com/community/plugin/1040722185526429545) to customize the UI primitives in your Figma file to match your brand's look and feel. Amplify Studio allows you to visually configure the [Amplify UI theme](https://ui.docs.amplify.aws/react/theming) definition.

The plugin saves your theme directly in the Figma file itself so when you sync your Studio app with Figma it will automatically bring in the updated theme as well.

## Install AWS Amplify UI Builder (Figma plugin)

To install the UI Builder plugin:
1. Go to the [UI Builder plugin page](https://www.figma.com/community/plugin/1040722185526429545)
2. Click "Install" on the top-right corner
3. Go to your Figma file
4. Right-click an empty area of the canvas and select **Plugins** > **AWS Amplify UI Builder** or use the Figma quick actions menu by pressing `command/control + /` then typing "AWS Amplify"

## Colors

### 1. Modify brand colors

Select your own brand color or choose a preset. Your brand color affects almost every single UI primitive and allows you to quickly modify your components look and feel to match your brand.

![Modify brand colors](/images/studio/theming/pick-brand-color.gif)

Amplify Theme Editor will automatically cascade color levels 10 - 100. You can modify the auto-generated levels further by selecting the level and tweaking the HEX or HSL values to your exact specification.

### 2. Use brand colors in Figma

Every color listed in the Amplify Theme Editor is also available as a Figma color style.

![Use brand colors in Figma](/images/studio/theming/color-styles.gif)

You can choose any layer and assign the fill to your brand colors. Updating the brand colors in the plugin will update the color styles.

![Auto-cascading brand color levels](/images/studio/theming/brand-color-cascade.gif)

<Callout>
  The Figma plugin creates color styles that match the colors in the theme. But any changes to color styles directly won't have an effect on the theme.
</Callout>

### 3. Modify UI primitive colors

Individual primitives such as Alerts have their own bindings for color to fine-tune their look and feel as well. This is especially useful as you start defining colors for states such as "success", "warning", "error", or "info".

To change colors of UI primitives:
1. Open the Amplify Theme Editor
2. Click on the "Component" tab
3. Select the value you want to edit. For example: `components.badge.error.backgroundColor`. You can also filter the list of component tokens with the search bar at the top
4. Choose a new color
5. Click "Update theme"

![Modify UI primitive colors](/images/studio/theming/component-color.gif)

Colors in the theme can either be references to *other* colors or exact Hex, HSL, or RGB values.

![Modify UI primitive colors with HSL](/images/studio/theming/component-color-hsl.gif)

## Space

Each Amplify UI theme contains definitions for spacing such as "small", "large", or "xl". You can define the spacing scale within the "Space" tab in the Amplify Theme Editor.

![Use space definitions in Figma](/images/studio/theming/space.gif)

To apply spacing tokens to your own components:
1. Open the Amplify Theme Editor
2. Click on the "Apply" tab
3. Select a frame
4. Configure it as a reference by entering `{space.<SPACING_TOKEN>}`. For example: `{space.small}`
5. Click "Update theme"

![Apply theme values in Figma](/images/studio/theming/apply.gif)


## Font sizes

To update the font sizes in the theme:
1. Open the Amplify Theme Editor
2. Click on the "Font sizes" tab
3. Click on any of the font sizes to edit it

![Use font sizes in Figma](/images/studio/theming/font-size.gif)

You can input 'rem' values or 'px' values. Updating font sizes will update the primitives, text styles, as well as any Figma layers that use that font size.

## Borders

You can edit border widths and radii in addition to colors as well.

To update the font sizes in the theme:
1. Open the Amplify Theme Editor
2. Click on the "Borders" tab
3. Click on any of the border widths or radii to edit it

You can apply these border values to your own components by selecting the 'Apply' tab and selecting a frame component. Subsequent changes to the core border widths and radii will update any usage in your Figma document.

![Use borders in Figma](/images/studio/theming/border.gif)

## Breakpoints

The Amplify Theme Editor allows you to apply breakpoints to your component variants, making them responsive. To change the pixel values for your breakpoints:
1. Open the Amplify Theme Editor
2. Select the <strong>Breakpoints</strong> tab
3. Select any breakpoint size
4. Enter your preferred pixel value for that breakpoint

![Breakpoints tab within the Amplify Theme Editor with the small breakpoint selected and set to 480 pixels](/images/studio/responsive/breakpoints.png)


The grey bar within the outlined box will indicate your pixel value compared to a standard 1920px-wide display.

You can learn more about how to use breakpoints in the [Responsive components documentation](responsive/).


<Callout>

  If you have any issues, please let us know by [filing an issue on Github](https://github.com/aws-amplify/amplify-studio/issues).

</Callout>