Skip to main content

Designing with themes

Siemens Industrial Experience supports theming for all of its components. Our Figma library includes all four embedded themes: Brand dark, Brand light, Classic dark and Classic light. You can use these themes to ensure consistency and alignment with Siemens AG's design standards. Siemens AG applications should utilize the exclusive Siemens AG Corporate Brand Theme.

Selecting a theme for designing​

When working with our Figma library, you can apply a theme to either an entire page or an individual element, such as a frame or component:

Applying a theme

Applying one theme to a whole page​

  1. First ensure there are no selected elements on the page by pressing the "Esc" key to deselect them.
  2. Click the button with the hexagon in the right panel on the right side of the "Page" section to open the theme selection dropdown.
  3. Select from the dropdown the desired theme colors to apply to the entire page.

Applying one theme to an element​

  1. Select the specific element (such as a frame or component) you want to apply a theme to.
  2. Click the button with the hexagon in the right panel on the right side of the "Layer" section to open the theme selection dropdown.
  3. Select from the dropdown the desired theme colors to apply to the selected element.

Note: When applying a theme to an individual element, it overrides the page-level theme.

For more information see the official Figma documentation.

Changing theme variables​

Changing theme variables

If want to adapt the classic theme to your own brand design, follow these steps to modify the colors and other theme values within the Figma library:

  1. Import "iX Components" into your Figma workspace.
  2. In the top-right corner of the Figma interface, click the button labeled "Open settings" with a settings icon to open the variables dialog.
  3. Within the variables dialog, navigate to the desired collection, such as the "iX Colors" collection located at the top-left corner.
  4. From there, change the values of the variables to adjust the appearance of the theme.