Start designing

If you’re just starting to design with Soul, you’re in the right place. Here’s a checklist of everything you need to get up and running.

Soul UI in Figma

We use Figma as our primary tool for building and hosting our UI libraries. Figma grants us access to the latest design features and optimizations, all while ensuring our designs remain consistently aligned.

These UI libraries include all core elements, components, and styles essential for keeping your designs Soul-compliant. Using these libraries, you will automatically receive updates with each new release to keep your designs consistent and up to date.

Head to the Design libraries section (linked above) and follow the installation instructions to get set up.


UI library organization

Introduction / Structure

To streamline our complex system of assets and keep each file as functional as possible, each platform-specific UI library contains styles and components specific to that platform. These are supplemented by global styles to uphold a consistent visual language.


Enabling the libraries

Enable the Soul UI libraries through the Libraries dialog in the Assets panel. To ensure the libraries are always accessible in your drafts, automatically enable them in your Account settings.

Introduction / Enabling libraries


Designing with Soul UI

Components are organized in the Figma Assets panel and they are typically not nested beyond two levels to maintain accessibility.

Adding component to the page

Each component's library of origin is differentiated by the unique background color of its preview box, with each library distinguished by a dedicated color.

Introduction / Colors

Component properties and variants offer flexibility, allowing you to optimize configurations to your specific needs. These properties available in the UI libraries are direclty mapped to the code.

Introduction / Properties

To learn more about component properties, visit Figma’s documentation.



Soul uses the open-source typeface Inter. It has been carefully chosen to meet our needs and reflect our brand, ethos, and design principles. The Inter typeface family can be downloaded from Google Fonts.

To learn detailed information about typefaces, visit Typography doc.


Review our usage guidance

Our guidance is detailed and thorough, and you’ll learn a lot about the system by reading through the elements and patterns documentation:

  • Components: Soul provides in-depth design usage and style guidance for all elements. It’s important to be familiar with this additional UX and visual guidance when designing with our elements.
  • Patterns: Soul also offers a range of key patterns, offering best practice solutions for how a user achieves a goal in the product. These design patterns have been harvested from Emplifi products built with Soul.



To improve your design efficiency and accessibility, we suggest integrating the following Figma plugins:


Stay connected with us

If you have a question about any aspect of the libraries or tools, you can reach out to us on Slack channel #soul-design-system. Chances are someone has had a similar problem and will jump in to help you.

To stay informed about the latest Soul news, make sure you are signed up at #design-soul-releases.