Command line use and configuration
Getting to know the configuration options is super important if you want to make the best use of Figmagic.
Setting up from scratch#
For this lesson, you will need a Figma file setup.
If you want a ready-to-use file, go ahead and use the ID for the template, K39TRbltDVcWFlpzw9r7Zh.
I'm going to indulge in setting up a small demo from scratch just for this lesson, so why don't you follow along? I'm going to do this old-school, but feel free to use Visual Studio Code or anything else.
mkdir figmagic-cli-demo
cd figmagic-cli-demo
Okay, we have an empty folder named figmagic-cli-demo, and we have stepped into it. Let's now set this up like any other Node project and install Figmagic.
npm init -y
npm install figmagic -D
npm init -y is just shorthand to skip setting any parameters like name, license, and such.
-D is shorthand for --save-dev, meaning we want Figmagic only for our development usage and not for public usage when we bundle our app or project into which we installed it.
If we try to run Figmagic...
npx figmagic
...it's going to fail with Could not retrieve any data. Are you missing a valid API key?. It can't pick up our credentials. We'll need to add those (substitute the values for your own):
touch .env
cat <<EOT >> .env
FIGMA_URL=change-this
FIGMA_TOKEN=change-this
EOTIf you want to do it through VS Code or similar, simply create a new file called .env and put in the FIGMA_URL and FIGMA_TOKEN.
Run it again:
npx figmagic
And now it should work as expected:
Attempting to fetch data from Figma API
Writing Figma base file
Writing design tokens
Figmagic completed operations successfully!
If you look in the folder, the contents have been updated. If you are still with me, in the terminal, run ls, and you should see that a tokens folder has been created for you.
The default built-in configuration#
When you ran the figmagic command, it took care of quite a number of things for you. Let's look at what Figmagic uses for defaults:
{"debugMode": false,
"fontUnit": "rem",
"lineHeightUnit": "unitless",
"letterSpacingUnit": "em",
"opacitiesUnit": "float",
"figmaData": "figma.json",
"figmagicFolder": ".figmagic",
"outputFolderElements": "elements",
"outputFolderGraphics": "graphics",
"outputFolderTokens": "tokens",
"outputFormatCss": "ts",
"outputFormatDescription": "md",
"outputFormatElements": "tsx",
"outputFormatGraphics": "svg",
"outputFormatStorybook": "js",
"outputFormatTokens": "ts",
"outputGraphicElements": false,
"outputGraphicElementsMap": false,
"outputScaleGraphics": 1,
"outputDataTypeToken": null,
"overwrite": {"css": false,
"description": false,
"graphic": false,
"react": false,
"storybook": false,
"styled": false
},
"recompileLocal": false,
"remSize": 16,
"skipFileGeneration": {"forceUpdate": true,
"skipCss": false,
"skipDescription": false,
"skipReact": false,
"skipStorybook": false,
"skipStyled": false
},
"spacingUnit": "rem",
"syncElements": false,
"syncGraphics": false,
"syncTokens": true,
"templates": {"templatePathGraphic": "./node_modules/figmagic/templates/graphic",
"templatePathReact": "./node_modules/figmagic/templates/react",
"templatePathStorybook": "./node_modules/figmagic/templates/story",
"templatePathStyled": "./node_modules/figmagic/templates/styled"
},
"token": "",
"tokensRelativeImportPrefix": "",
"unitlessPrecision": 2,
"url": "",
"usePostscriptFontNames": false,
"versionName": null
}
It's not a small list, granted, so let's look at the items I'm sure you will want to adjust.
But first, we'll scaffold a config that we can use.
Initialize a config#
Run npx figmagic init. It should show Figmagic created a base configuration (figmagic.json) for you.. Open it in your editor or with cat figmagic.json.
The current configuration looks like this:
{ "templates": {"templatePathGraphic": "./node_modules/figmagic/templates/graphic",
"templatePathReact": "./node_modules/figmagic/templates/react",
"templatePathStorybook": "./node_modules/figmagic/templates/story",
"templatePathStyled": "./node_modules/figmagic/templates/styled"
}
}
It points the file generation to the templates local to Figmagic. You can modify those to better match your own expectation for files generated for Storybook, Styled Components, React, and the graphics sheet.
Okay, enough about that. Long story short: This is your go-to file to edit!
This page is a preview of The newline Guide to React Component Design Systems with Figmagic