Figma library 101

When starting a project, add the LeafyGreen library to your Figma file by clicking on the team library Book Icon on the top left of your Figma UI (under the Assets tab). Here you can then turn on the LeafyGreen Design Systems library and get access to all components in the left sidebar.

Most component variants can either be found in the assets panel on the left, or the variants panel on the right in Figma.

Type styles can be accessed via the icon on the right panel.

Palette colors can be accessed in a similar way on the right panel.

Avoid detaching components

Avoid detaching components, by doing so, you’re ensuring that your engineering team will be able to build the component as its shown in your prototype/flow.

In some rare instances, it’s acceptable to detach a more complex component, like Combobox or Table.

You can tell if a component is detached based on the color of its border. If it has a blue border the component has been detached.

For some edge-cases, you may consider building or using a custom component. Make sure to weigh the pros and cons of doing so, vs. using LeafyGreen components. Often, what at first glance may appear to need a bespoke component or pattern, can be usually be relatively easily achieved using LeafyGreen components.

There are still some components and patterns we haven’t built yet. If there’s anything you feel that’s missing, feel free to let us know in our #ask-design-systems channel.