> Markdown version of [Figma Libraries](https://vaadin.com/docs/latest/components/figma). Section index: [llms.txt](https://vaadin.com/docs/latest/components/llms.txt)

# Figma Libraries

Designers can create pixel-perfect UI designs and prototypes, that are easy for developers to implement, using the popular design tool [Figma](https://figma.com) and the official Vaadin Figma libraries. The components in the libraries use the default Lumo styling, and you can adapt them to suit your branding and vision.

## <a id="libraries"></a>Libraries

### <a id="foundation-components"></a>Foundation & Components

The main library includes typography, color, and other visual styles, and configurable components that cover the same components which are available for developers.

[View in Figma Community](https://www.figma.com/community/file/843042473942860131)

### <a id="charts"></a>Charts

Configurable charts which correspond to the chart types that are available in the official Vaadin Charts component.

[View in Figma Community](https://www.figma.com/community/file/1030435514000803214)

### <a id="icons"></a>Icons

The components in this library are interchangeable with the icons that are bundled in the main library.

[View in Figma Community](https://www.figma.com/community/file/972026846591993843)

## <a id="figma-community"></a>Figma Community

You can follow Vaadin in the Figma community as well as duplicate, like, and comment the libraries.

[Vaadin in Figma Community](https://www.figma.com/@vaadin)

## <a id="how-to-use"></a>How to Use

If you are unfamiliar with Figma libraries, you can start by reading [Figma’s official guide to libraries](https://help.figma.com/hc/en-us/sections/15331811041175-Use-libraries).

`B8E8C699-91A9-44CE-BCDB-C200DE5DEB6B`