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,
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.
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 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...
...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):
If you want to do it through VS Code or similar, simply create a new file called
.env and put in the
Run it again:
And now it should work as expected:
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:
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#
npx figmagic init. It should show
Figmagic created a base configuration (figmagic.json) for you.. Open it in your editor or with
The current configuration looks like this:
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!