First steps with the kit

You’ve imported the UI kit. This page takes you from the kit’s sample look to your own: your design system first, then your logo and business details, then the file thumbnail. It takes about 15 minutes.

If you haven’t imported the kit yet, start with Installation.

1. Open the plugin in the kit

The ACSS plugin for Figma creates and updates every variable and style the kit uses. You run it from inside the kit file.

1. Open the kit file in Figma.

2. Click the Tools tab in the navigation bar on the left, search for “ACSS plugin for Figma”, click it, and then click Run.

3. The first time, the plugin asks for your license key. Follow Activate your license. You do this once on each computer.

Later, press Cmd+Option+P on a Mac or Ctrl+Alt+P on Windows to run the last plugin you used.

2. Set up your design system

Every color, font size and spacing value in the kit comes from the plugin. Change a setting, click Save, and the whole kit follows.

1. Click Color Palette and pick your Primary color. The other color families follow its lightness and saturation; give each one its own hue. See Color Palette.

2. Click Typography and choose your heading and body fonts. See Typography.

3. Check Layout, Spacing and Borders. Their defaults match ACSS, so you can keep them for now.

4. Click Save. The variables and styles update, and every component and template in the file follows.

You can change any setting later and click Save again, as often as you like. The plugin saves its settings in the file, so anyone who opens the file sees the same settings. For a full walkthrough of the plugin, follow the plugin quick start.

3. Add your logo and business details

Go to the 📘 Project Fundamentals → ↳ Identity page and replace the sample business name, email, phone, address, copyright year and logo with your own (or your client’s). Headers, footers and the file thumbnail pick them up automatically. See Identity.

4. Set up your navigation

Go to 📘 Project Fundamentals → ↳ Navigation and set your menu items once. Every header and footer template uses this navigation. See Navigation.

5. Set the file thumbnail

The thumbnail is the cover image Figma shows for the file in your file browser. Setting it is optional, but it makes the file easy to spot.

1. Go to the 📓 Thumbnail page.

2. In the Layers panel, right-click the Thumbnail frame and choose Set as thumbnail.

The thumbnail shows your logo from the Identity page, so it updates when you change the logo. You don’t need to edit it.

Note

If you can’t select the thumbnail on the canvas, it’s locked so the logo doesn’t move by accident. Click the lock icon next to it in the Layers panel to unlock it.

6. Explore the file

Scroll through the pages to get to know the kit. Good places to look next:

• The style guide pages, which show your current colors, type and spacing.
• The website templates, where you build pages from ready-made sections.
• The Sitebuilder, the fastest way to put together a wireframe.

Good to know

• Do I need a paid Figma plan? No. The kit and the plugin work on every Figma plan, including the free Starter plan.
• Where do my own components go? On the ↳ Custom components page, the last page in the 📙 Website templates group.
• Questions? Ask in the community forum.