Design
The Product System provides an extensive set of parts to design high-quality, accessible experiences—supported by a comprehensive Figma library and design documentation.
Library
The Product System team manages design libraries in Figma for designers to design and prototype with the components, variables, and text styles. Using these design assets keeps your work current and aligned with developers throughout the hand-off and development process. The Product System Library contains the entire component library, icons, and visual styles for all UI projects.
Guidelines
Guidelines define the core visual styles and tokens of our system. These styles form the basis for our assets, allowing us to deliver familiar, trustworthy, and delightful product experiences. For a deeper understanding of the foundational principles on which our guidance is based, see Foundations.
Components
Components are the building blocks of Morningstar products. With more than 58 components like buttons and forms, components help us create high-quality, accessible, and consistent experiences.
Our components provide:
- A diverse set of variations, custom-built to serve our customers
- A range of sizes, including small, medium, large, and touch
- Styles for use on both light and dark backgrounds
- Built-in accessibility
- Built-in functionality and behaviors
Library Access
- From an open design file in Figma, open the Assets panel in the left sidebar.
- Click to open the Library modal.
- Make sure Product System Library is activated and the toggle is on.
- In the All libraries view, select Product System Library. You can now drag and drop components into your file.
Updates
We release library updates continuously and track them via Figma’s version history. For details on accessing the latest assets in Figma, check Figma’s guide for reviewing and accepting library updates.
