Once you’ve flagged your intended design system contribution in #team-frontend-foundations-requests, you’re ready to kick-off the design phase. If creating or modifying an existing component, follow the steps below:
- Determine the size of your contribution:
- For Fix and Light contributions, create a branch in the Component Library: create a branch and make proposed changes to the existing component. Make sure to keep your branch up to date with changes to the main file to avoid conflicts when publishing later on.
- For Medium and Large contributions:
- create a Component Proposal in Figma: use the Component Proposal Template to make a formalised proposal to the design system. Follow the guidelines in the template and ensure your component meets the Definition of Ready.
- run a Component Discovery Session: present the proposed changes to Frontend Foundations team and discuss the feasibility of the changes.
- For all contribution sizes, make sure to follow the Contributing to Figma guidelines on how we structure components.
- Request design review: when you’ve finalised the changes in your branch or Component Proposal, reach out for review from Frontend Foundations designers in #team-frontend-foundations-requests. Your proposal will be reviewed within one day.
- Create (or edit) design system documentation: after your proposal is accepted, use the [Template] Component in Supernova to document the usage, anatomy, variants, and dependencies of your component. When proposing documentation changes, follow making and publishing changes guidelines.
- Hand-over designs to an engineer: with design and documentation resources at hand, hand over your work for engineer implementation following your teams’ process. The ownership of the build phase lies within your team.
- Review engineer implementation: when the design has been implemented by an engineer and raised for review, assess if it matches the design. Pay special attention to interaction, behaviours and accessibility. Request changes or approve the implementation for release.
- Release changes through the Component Library:
- For Fix and Light contributions: merge your approved branch. It will be automatically locked and archived by Figma, but double-check if there are no unused branches left.
- For Medium and Large contributions: copy your changes from the Component Proposal to the Figma Component Library file. If creating a new component, make sure it sits under an appropriate component grouping category in the left-hand side panel.
- For all contributions: now, you can publish your component (not the whole library) to be accessible to everyone at Octopus!