Getting started
1. Export
Section titled “1. Export”Open your Figma file, run Scalar from the Plugins menu, and press Export.
Scalar reads every variable collection and every color, text and effect style in the file. There’s nothing to select or configure first.
2. Read the report
Section titled “2. Read the report”The report fills in as the export runs. Each line is a finding, something you might want to check, in one of three kinds:
| Kind | Means | |
|---|---|---|
| ✗ | Couldn’t be exported | The format has no place for it (a blur effect, an image fill). It’s left out and named. |
| ! | Guessed | Figma didn’t say enough, so Scalar picked the safe option. Worth fixing in Figma. |
| ✓ | Converted | Changed to fit the format, with the original kept in the file. Usually fine. |
The dot in the header sums it up: green when there’s nothing to check (conversions only, or no findings), amber when something was guessed or couldn’t be exported, red when the export stopped or nothing usable came out.
An empty report means your file is fully specified. For how to clear each finding, see Authoring for a clean export.
3. Get the files
Section titled “3. Get the files”When the export finishes, pick how to take the files:
- Download ZIP: every file in one archive.
- Copy: all the file contents to the clipboard.
- Show output: look through the files in the plugin first.
- Open PR (GitHub) or Open MR (GitLab): send them straight to your repository. See below.
Sync to a repository
Section titled “Sync to a repository”To send each export to your code as a pull request (GitHub) or merge request (GitLab):
- Open Settings (⚙), or press Sync to Git… after an export.
- Add your repository, the folder the tokens go in, and a personal access token. Settings lists the permissions the token needs. It’s saved only on this computer.
- Export, then press Open PR / Open MR.
Each Figma file has its own repository setting. Scalar only ever changes files inside that folder, and it asks before touching a folder another Figma file syncs to.
4. Build them
Section titled “4. Build them”The files are DTCG design tokens, ready for a build tool:
- What Scalar exports: what’s in each file.
- Building with Terrazzo or Building with Style Dictionary: turn them into CSS, Android or iOS code.