Design

Figma is the core of our design toolkit. Designers have full editing capabilities and access to all features in Figma Design, Figjam, and Figma Slides. For access to Figma, follow the Morningstar IT instructions.

Each Morningstar business unit manages a specialized product team. Each unit or team organizes projects within a dedicated Figma workspace, which is divided into teams. Design leaders oversee the structure and organization of these workspaces. To access your team's Figma workspace, or to create a new workspace, contact your design manager.

The Product System team manages design libraries containing components, patterns, and styles. Using these design assets keeps your work current and aligned with developers throughout the hand-off and development process. Our core Product System Library contains our 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

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.

Figma Plugins

Additional Resources