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
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.
Designing with Soul UI
Components are organized in the Figma Assets panel and they are typically not nested beyond two levels to maintain accessibility.
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.
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.
To learn more about component properties, visit Figma’s documentation.
Typeface
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.
Resources
To improve your design efficiency and accessibility, we suggest integrating the following Figma plugins:
A11y - Color Contrast Checker
Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards.
A11y - Focus Order
Add accessibility annotations over your designs for the interactive elements.
Redlines
Annotate your designs with detailed measurements, specs, and intricate redlines.
EightShapes Specs
Automate production of design specifications of selected components, instances and frames.
Content Reel
Design layouts more efficiently by pulling text strings, images, and icons from one palette.
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.