The Fusion Design System serves as a tech-agnostic toolkit for developers and web engineering teams. It accelerates development with accessible components and clear implementation guidance, regardless of the chosen framework.
Preparing to develop
- Learn about the conventions we follow for a uniquely Sage experience in the Foundations section.
- Confirm the colors you need for your product. For example, business accent colors, utility colors, text colors, and semantic colors.
- If you're using design tokens, you can inspect which tokens have been added to designs by using the Tokens Studio Plugin in Figma while in dev mode.
- To use design tokens, import and run the Fusion design token library.
- To learn how to use Figma in dev mode, see this Figma introduction for developers video.
- Determine which properties you can use for each component and which you can change.
- If you're using Carbon, you can find this information in the Storybook documentation.
- For other frameworks, you can find this information in the framework API or in a GitHub readme file.
- Ensure you are using the approved fonts by downloading and installing the Sage text font.
- Keep up to date with recent changes in the Fusion Design System.