docs: figma variables (#1210)

packages/documentation/docs/design-kit/design-kit.md

@@ -17,6 +17,7 @@ The Siemens brand library contains Siemens specific brand elements and is only a
 
 › [Get more information here](https://siemens-ix.code.siemens.io/ix-brand-theme/)
 
+We leverage the power of Figma tokens to provide you with a seamless and customizable experience when working with our themes. For detailed instructions on how to modify theme variables and select themes using the Figma Siemens Brand library, please visit the [Theme Switching](../guidelines/theme-switching.md) page. Discover the ease and flexibility of designing in Figma with Siemens Industrial Experience.
 ## Figma classic theme library (Open Source)
 Will be available soon.
 

packages/documentation/docs/guidelines/_theme-switching_code.md

@@ -0,0 +1,15 @@
+import { ApiTableSinceTag } from '@site/src/components/ApiTableTag';
+import PlaygroundV2 from '@site/src/components/PlaygroundV2';
+
+# Theme switching
+
+## Working with themes during runtime
+
+<ApiTableSinceTag message="1.3.0" />
+
+<PlaygroundV2
+  name="theme-switcher"
+  height="15rem"
+  examplesByName  
+>
+</PlaygroundV2>

packages/documentation/docs/guidelines/_theme-switching_styleguide.md

@@ -0,0 +1,33 @@
+# Changing Theme Variables
+
+![Changing theme variables](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2232-101&mode=design&t=C6IjeY71MP4uA7vZ-4)
+
+Follow these steps to modify the colors and other values of a theme within the Figma Siemens Brand library:  
+
+1. Import the "iX Foundation Brand" file into your Figma workspace.
+2. In the top-right corner of the Figma interface, you'll find a button labeled "Open settings" with a settings icon. Click on it 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, you can easily change the values of the variables to adjust the appearance of the theme.
+
+The different themes are organized into columns, allowing you to switch between them effortlessly.
+
+# Selecting a Theme for Designing
+
+When working with the Figma Siemens Brand library, you can apply a theme to either an entire page or an individual element, such as a frame or component:  
+
+![Applying a theme](https://www.figma.com/file/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2232-192&mode=design&t=C6IjeY71MP4uA7vZ-4)
+## Applying a Theme to a whole Page
+
+Ensure that no elements are selected on the page. If any elements are selected, press the "Esc" key to deselect them.
+1. In the right panel, you'll find a button with a hexagon symbol on the right side of the "Page" section. Click on it to open the theme selection dropdown.
+2. From the dropdown, you can select the desired theme colors to apply them to the entire page.  
+
+## Applying a Theme to an Element
+
+Select the specific element, such as a frame or component, to which you want to apply a theme.
+1. In the right panel, you'll find a button with a hexagon symbol on the right side of the "Layer" section. Click on it to open the theme selection dropdown.
+2. From the dropdown, you can choose the desired theme colors to apply them to the selected element. 
+
+Remember, when you apply a theme to an individual element, it will override the page-level theme.
+
+For more information see the official [Figma documentation](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma).

packages/documentation/docs/guidelines/theme-switching.md

@@ -1,18 +1,12 @@
 ---
 sidebar_position: 2
 ---
-import { ApiTableSinceTag } from '@site/src/components/ApiTableTag';
-import PlaygroundV2 from '@site/src/components/PlaygroundV2';
 
-# Theme switching
+import DocsTabs from '@site/src/components/DocsTabs';
 
-## Working with themes during runtime
+import DocsUx from './\_theme-switching_styleguide.md';
+import DocsCode from './\_theme-switching_code.md';
 
-<ApiTableSinceTag message="1.3.0" />
+# Theme Switching
 
-<PlaygroundV2
-  name="theme-switcher"
-  height="15rem"
-  examplesByName  
->
-</PlaygroundV2>
+<DocsTabs styleguide={DocsUx} code={DocsCode} />