Figma setup

Quartz Open uses the latest Figma features to deliver the best designer experience.

Overview

The Quartz design system Figma space mimics the general architecture introduced in the Installation page.

Setting your Figma file consists in enabling multiple libraries, depending on your product needs:

• all products must use the Core library, containing the essential components and patterns
• the Domain libraries contain the navigation patterns and other essential components for a whole domain
• Facets may also publish additional libraries containing specialized components and patterns

Open source vs. Internal

Schneider Electric is committed to contributing back to the open-source community. Quartz Open can be highly valuable to many who can't afford the time and money it takes to build a design system. On the other hand, Schneider Electric must protect its brand and business expertise.

That's why some libraries are publicly available as open-source, and others are only available to Schneider Electric's employees and partners.

Getting the open-source assets

Open-source libraries are shared in the Figma community space, using the generic brand identity. Copy them in your own Figma space and publish the library.

Getting updates

Currently, Figma does not provide an easy way to update a library from a file shared in the Community space.

However, you may publish a new release as a separate library and use the swap library feature to migrate an entire file to the new library.

Getting the internal assets

All Quartz libraries are published globally in Figma's Schneider Electric enterprise space. Simply enable the libraries you need in your project files.

Set up the Core library

Create a new file, hit Ctrl/Cmd + Alt + O (letter O), search for "Quartz" and enable the "Core" library:

Now can use all of Quartz's components!

Use your brand

Quartz supports multiple brands from the ground up. Each brand provides at least the following mandatory assets:

• Light and Dark theme styles
• Desktop and Mobile platform styles
• Core icons

Look at the Brand setup page to catch your brand and see the additional setup instructions for the specific assets it provides.

Theme and platforms styles

Quartz supports multiple themes and platforms. Every library contains the theme and platform styles for all the brands.

See the Usage > Themes and Usage > Platforms pages for instructions on how to use them.

Set up icon libraries

Quartz supports multiple icon libraries. Some components allow configuring an icon using their icon-name property.

As you can pick an icon instance from any icon library, you first need to enable the icon libraries from your specific brand.

Set up additional facets (optional)

Facets, including Domain foundations, all build on top of the Core library. In most cases, you just need to enable the library from the facet.

Some facets may also need extra setup: check their installation instructions.