---
title: Figma - Emerald UI kit
meta:
- name: description
  content: The Official Emerald UI Kit for Figma uses the same token names, Em* parts, and light and dark themes as the Vue package. The Store sells the file separately. The Vue package is MIT.
- name: keywords
  content: emerald figma, ui kit, vuetify store, emerald tokens, design system, em components
features:
  category: Guide
  label: 'Figma'
  level: 2
  order: 0
related:
  - /systems/emerald
  - /systems/emerald/tokens
  - /systems/emerald/icon
---

# Figma

<DocsPageFeatures :frontmatter />

The Vue package is MIT. The Vuetify Store sells the Figma file separately. The file uses the same `--emerald-*` token names, the same `Em*` parts, and the same `emerald-light` and `emerald-dark` themes. You can build from these docs and the source without the file.

The kit includes Figma variables that match the CSS token names, every shipped `Em*` family with its variants and parts, the icon set (48 glyphs, 72 names), and layouts from the [dashboard](/demo/emerald/).

Buy it on the [Vuetify Store](https://store.vuetifyjs.com/products/official-emerald-ui-kit-for-figma). Licenses are Personal, Commercial, and Unlimited. They cover the Figma file. The Vue package stays MIT.

The [tokens](/systems/emerald/tokens) page lists the CSS token names. [EmIcon](/systems/emerald/icon) lists the icon roles.