We are going to need a set of simple icons:

• Plus and Minus symbols used in the CheckoutItem component

• Cart symbol, which is going to become a button that takes the user to the checkout

But the first thing we need is a Graphics page, so create it now.

Design#

Minus sign#

For the minus sign, let's use the Ellipse tool and draw out a round background. I will keep the size at 40 x 40 pixels. Deselect with the escape key, and change the color to our deep blue color. I'll add a line with the Pen tool. Increase the width to 4. Nudge it into the center. I'll rename the layer Minus. Now, I will just add the finishing touch by selecting the icon and making all of it into a component (CMD + OPT + K). Very easy, indeed.

Plus sign#

For the cross, almost the same story. Choose the Ellipse tool. Assign it the deep blue color for the background. Copy the vector line with CMD + C and paste with CMD + V. Rotate it and place it in the center so that you have the plus shape. Now, I will group all these vectors into a group and rename the group Plus. Top it off by making all of it a component.

Cart symbol#

While we navigate our site, we want a cart symbol showing us how many items we are carrying and which, when clicked, can take us to the checkout. We will use standard CSS for the numeric indication of items, so in our current scope, we only have to deal with the symbol itself.

Design this to your heart's content. I recommend using the Pen tool (press P to access it) for anything that's not a primitive shape. Keep the final format to something reasonable, say 100 x 100 pixels.

When you feel done with the drawing, do some quick cleanup and renaming as needed. Finally, we can make this, too, into a component.

Changing settings and formats#

Navigate to your component library codebase. Given that Figmagic is set up with your credentials, we can start hacking away at the configuration file.

The minimal settings in figmagic.json to sync graphics would be:

{

 "syncGraphics": true,

 "outputFormatGraphics": "svg"

}

syncGraphics enables our use of the graphics export functionality. Strictly speaking, outputFormatGraphics set to svg is redundant as it's the default, but for completeness, we have set it expressly to that value.

Now, run npx figmagic. You should see a graphics folder with three SVG files.