For Designers

If you're a designer, this document helps you getting started with the relevant parts of the Emarsys Design System: the guidelines and the Figma library.

What is the Emarsys Design System?

The Emarsys Design System is a collection of tools and resources that helps creating high-quality UI for the Emarsys Platform. The Design System mainly consist of the UI Framework, code examples, documentation, guidelines, and the Figma library.

Benefits

Save time designing: the Design System comes with layout blueprints and components which can be used easily, so designers don't have to create everything from scratch.

Easy to keep the platform consistent: using components from the Design System across the whole Emarsys Platform provides a more consistent and smoother experience for our customers.

Communicate better with developers: components come with live examples and design guidelines, making it easier to learn how they work and what their capabilities are. You can even experiment with them in our Playground!

Using the Figma Library

The Figma library contains all the layouts, components, and basic styling elements that can be found in our Design System. Using this library in Figma makes creating screen plans for the Emarsys Platform easier and quicker.

Please note, that the live code is the "single source of truth" when it comes to the Design System, the Figma library is merely a representation we try to keep as close to the source as possible. If there are differences between the Figma library and the live code, the live code should be considered as "the truth".

1. Accessing the library: once you’re added to our Figma organization, you’ll be able to easily access the Emarsys Design System library in the "Team libraries" dialog.

2. Installing fonts: Emarsys uses SAP 72 as the UI font. You can download these fonts from the SAP Fiori Design Stencils website.

3. Updating the library: Figma notifies you when a library update is available. If there are components in your design that needs to be updated, you'll see a "before-after" comparison for each component.

4. Working with layout blueprints: kickstart your designs by picking one of our layout blueprints. Just “detach” these from the main components and you can edit them freely right away!

5. Working with components: our Figma library contains all the components which can be found here in the Design System website, in a similar structure.

Extras

Emarsys Design Principles: read our Design Principles document to see which aspects of product design we prioritize here at Emarsys.

Testing components in Playground: you can use our Design System Playground to check, test, and experiment with Design System components.

Prototyping: you can turn designs made in Figma into clickable prototypes using the built-in prototyping tools. If you're hardcore, you can even build dynamic prototypes in the Design System Playground!

UI text guidelines: use our UI Text Guidelines to keep UI text (such as titles, messages, and labels) consistent across the Emarsys Platform.

Contributing to the Design System

Changing components: if you want to change, enhance, or fix a component, please get in touch with the Design System team. Read more about this process in the Contribution Guidelines.

Adding new components: if you want to expand the Design System with a brand new component, please get in touch with the Design System team. Read more about this process in the Contribution Guidelines.

Adding new icons: to learn about designing and adding icons to our Design System, check out our Icon Guidelines.

Writing guidelines: if you want to write and publish guidelines and documents to our Design System, we have a handy li'l guideline for that too.