Contribute
Contributions from our design team ensure the system continues to improve and evolve to better serve our products. As with all additions to the system, the first step is to establish shared need.
Shared Requirements
Additions to the system should be relevant to three or more product teams. Other points to consider:
- Will a single design serve the needs of every team?
- Does the feature require multiple configurations or variations to meet different design or functional requirements?
- If multiple configurations are required, can these be managed as variations on a common pattern? Or are they better treated as separate requirements?
- What needs to be strictly defined and where can things be left flexible?
Contribute a Design
All contributions, whether they involve code or not, must begin with initial design ideation. This can take many forms, such as introducing a new icon, defining a new color token, adjusting typography, adding a new variation to an existing component, creating a new component altogether, or adding a new design pattern or improvement to our Figma library.
Establish shared value for your design before you proceed.
Create a ticket in the Morningstar Design JIRA project detailing your planned contribution and assign it to yourself. Document the teams that will use it and the initial set of requirements.
Work with your design manager to solicit feedback and review with design leaders, and share with the wider design team.
Work with your engineering partner through implementation, as they follow the contributing code process.
Follow the contributing documentation guidelines to add documentation to support your contribution, when applicable.
Considerations When Contributing Design
Make sure to answer the following questions to ensure a streamlined process:
Have the design and UX requirements for the contribution been thoroughly defined across the teams that will use it?
Can you or your team provide an engineering resource to complete the work?
When contributing a new feature or variation for an existing component, always consider how your contribution will impact the existing features. For example, if you were adding a new feature to the data table component, consider how it will function for a multiselect table or when the table is in its responsive mode.
When adding a feature to a component with multiple sizes, account for all sizes in your design.
Account for any on-dark styling in your contribution.
Design and define the accessible experience desired for your contribution. How is it controlled via keyboard? How should a screen reader announce it?
Design Documentation
When a contribution adds a new variation, or changes the behavior or UX of an existing component, it must be accompanied by supporting documentation. In addition to documentation for the variation example, consider how it may impact the component’s existing design guidelines—like “Use When” or “Behaviors.”
