Quick Start

Start In Figma

Starting with the Handoff Figma plugin is the easiest way to get going with Handoff and understand how everything works together. It will allow you to quickly define design decisions in your components, and preview the tokens for that component.

This is a quick video overview showing how you can use the plugin.

Get the Handoff Figma Plugin

You can install the Figma plugin by visiting our Figma community page - https://www.figma.com/community/plugin/1376124565609689822/handoff

Click Open In and choose the Figma File you want to work with.

Picking the Right Figma File

Quick Start Figma Files

You can use Handoff with any project that has defined components. For this quick start, we recommend cloning our Quick Start file. We also have a more comprehensive design system starter file, that will help with more complex patterns in Handoff. Feel free to clone a draft of either of these files and use them however you'd like, including for commercial applications.

• Quick Start File
• Handoff Figma Starter Design System

Choose Your Own Adventure

If you'd like to use your own file, make sure you have a well-structured design system file. Handoff relies on Figma Component Sets and Variants to organize the tokens. Besides enabling Handoff features, its also considered best practices when building your Design System, you can read more here.

If you're not familiar with these concepts, we recommend starting with the Quick Start file or at least reading the concepts section.

Run the Plugin

1. Open a Figma file.
2. Run the Handoff plugin by clicking on the Plugins menu, and selecting Handoff Figma Plugin under Development.
3. The plugin will open in your file, with a list of all the components with variants in your project

Add Your First Component Part

1. Click the check box next to your component to activate it.
2. When you click on Button in the tab bar, you will be able to add parts to your button.
3. In the Figma Layer tree, select the root part of the component. In our case, we selected the part labeled Structure/Button. This part wraps the other elements and provides the color, shape, and shadow of the element.
4. Click the button Click to add part. You can enter a name for this part, but we'll leave this blank for now. Hit enter to create the button.
5. You've created your first part! Select each design decision that should be exported: the background color, border color, spacing, effect (shadow) and opacity.

Configure How Tokens Are Named

You can adjust the naming structure of your tokens on the fly. Each component gives you different options depending on the variant props available to it.

1. Click on the options tab.
2. Under naming structure, check off all the elements you want in your token name.
3. You can also reorder by dragging the name elements around.

View your tokens

Now that you've created your first component with a part. Let's examine the resulting design tokens.

1. Click on Tokens to view the generated CSS variables.
2. Notice that each button variant, state, and theme has its own token group and that every design decision is exported. This is everything you'd need to style the button background in every variation.
3. Since we left the part name empty, each token name consists of just --{type}-{theme}-{state}-{property}

Add a second part

1. Click on the parts tab.
2. Click on the Button Text in the Layer Tree.
3. Click on Click to add part in the plugin parts pane.
4. Name it Label (or whatever you'd like).
5. Choose the decisions to export for the label. We chose fill, typography, and effect. Notice that typography wasn't available before, but is now because this is a text layer.
6. Click on the tokens tab to view your new label tokens.

You should now see new tokens that include the fonts for each variant, state, and theme. You can see how you can vary font size, color, weight, or even family between variants in one component.

Notice how the token structure changes. The first part structure is --{type}-{theme}-{state}-{property} but the label structure declares that part --{type}-{theme}-{state}-disabled-{property} so that you can control how the tokens are used and named.

You can proceed to add more parts. In our example you could define new parts for the icons, or declare a single part that describes both icons, or just use the label tokens to describe your icons.

Publish the File Library

Before you can extract tokens from the Figma file, you'll need to publish the File Library. You'll need a paid Figma account to take this action.

1. Click on the main menu in Figma.
2. Click on libraries.
3. Click on publish.

What's next

Now that your Figma file has a defined component, it’s time to export your tokens for use in your projects. Hop over to our Developer Quick Start to start integrating tokens with your code.

Further Reading

• Concepts
• Configure your project
• Customize the content
• Integrate tokens with your project
• Build to Static Assets
• Integrate with your CI/CD