# Updating theme from Figma

- Drop exported `Figma.js` (given by designers) into `scripts/figma-to-prime-vue/data/Figma.js`
  - git already provides a diff, so inspecting it is encouraged
- Running `npm run build`, will
  - build a theme in `lib/themes/LoopAdmin/LoopAdmin.ts`
  - Run a snapshot test against the theme components and provide differences
- Upon inspecting and verifying that the changes are desired, update snapshots
- Commit `lib/themes/LoopAdmin/LoopAdmin.ts` and snapshots

## Tokens are removed/added in Figma
If the keys (tokens) are added in the Figma files, mapping will need to be updated. Examples:
- Color tokens being removed or added (`bloop`).
- Component tokens are added (typography-related or spacing that is not otherwise covered by PrimeVue).

While this is discouraged because it adds work to both design and engineering, it is sometimes unavoidable.

To make sure those changes are reflected in the theme, update `scripts/figma-to-prime-vue/mapData/map.ts` mapping file.

## Adding a new component
Refer to `docs/ADDING_NEW_COMPONENT.md`.