The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.

Implementing design specs

Learn how to inspect design specs in Adobe XD.

View and inspect attributes

Select an object in the artboard to inspect its measurements and styles.
To find out the spacing between objects, select an object and hover the pointer over other objects in the artboard.

When you select an artboard in the design specs link, all the unique colors used in that artboard are shown in the Colors section. You can view the available color formats and use the drop-down list to select the format of your choice. For example, if you prefer to work in HSLA, use the drop-down list to convert the color format to HSLA.

You can also view all the unique character styles of an artboard in the Character Styles section.
To inspect the text properties in an artboard, select a line of text. You can also copy text and its color from the Properties panel.

You can view and copy the CSS code of your design from the CSS snippets section. The CSS code is automatically generated when you select CSS Web as an output destination in the Share for Development window when publishing design specs.
To copy and paste the code snippet into your CSS files, press and drag the CSS snippets, switch to your code editor, and paste it.

Using Adobe XD and SVG files

For every element delivered within the design system you can also download an Adobe XD or SVG file so that you can use them when designing prototypes for your products.