Other documents:
📔 Getting Started
👷🏻 In deep
📣 Modify component
📂 Deploy components
📝 Document component
Before you consider creating a component keep in mind:
- Check the component library:
Make sure that the component is not in the library as some of the Aqua DS components may be able to fulfill the design needs.
- Contact the Aqua team:
If you review the component library and none of the components fit your design, we recommend contacting the team for support to help you find the right component for your design.
Important aspects before creating a component
When creating a component in Aqua DS, there are several important aspects to keep in mind to ensure that the component is efficient, consistent and reusable. Here are some key considerations:
- Functionality and Purpose:
Understand the purpose and function of the component - what will it be used for? What interaction should it enable? This will help you design the component effectively.
- Visual Design:
Make sure the component follows Aqua DS design principles. Use colors, fonts and styles consistent with the rest of the product to maintain a uniform visual appearance.
- Reusability:
Design the component to be reusable in different parts of the product. It should be flexible enough to adapt to different contexts.
- Consistency:
The component must be consistent in its design and behavior. This means that all instances of the component should look and behave the same throughout the product.
- Responsiveness:
Design the component with responsiveness in mind. It should look and function correctly on different screen sizes and devices.
- Interactions:
Define the interactions and states of the component. For example, how it looks when the cursor is placed over it, how it behaves when clicked, etc.
- Overrides and Customization:
If the design system allows overrides, decide which aspects of the component can be customized in individual instances without affecting the consistency of the design.
- Visual Hierarchy:
Ensure that the component has a clear visual hierarchy. The most important elements should stand out visually.
- Documentation:
Provide clear documentation on how to use the component. This is essential for other team members to understand its purpose and operation.
- Testing:
Test the component on different browsers and devices to ensure that it works correctly in all scenarios.
- Maintainability:
Design the component so that it is easy to maintain and update in the future. Use consistent nomenclature and follow good development practices.
By keeping these considerations in mind when creating a component in Aqua DS, you will be contributing to consistency and efficiency throughout the design and development process, and creating high quality digital products.