Other documents:
📔 Getting Started 👷🏻 In deep 📣 Modify component 📂 Deploy components 📝 Document component
Moving from idea to planning when building components in Figma is an essential process to ensure that your components are effective, consistent and reusable. Here is a step-by-step approach to achieve this:
Define the Purpose: Start by defining the purpose of the component - what function will it serve in the interface? In what situations will it be used? This will help you have a clear understanding of what you are building.
Identify Requirements: Identify the requirements and key features of the component. This may include its visual design, interactions, states, responsiveness and any possible customization.
Sketch and Design: Create sketches or initial designs of the component. This will give you a visual idea of how it will look and function. Be sure to follow Aqua DS design principles and consider consistency with other components.
Create Design Versions: Develop different versions of the component design if necessary. This will allow you to explore different approaches and choose the one that best suits your needs.
Evaluate Usability: Evaluate the usability of the design. Ask yourself if it is intuitive and easy for users to understand. If possible, conduct user testing or review with other team members.
Define Variables and Overrides: If your design system in Figma allows the use of variables and overrides, define what they will be and how they will be used to customize individual instances of the component.
Plan Interactions and States: If the component has interactions (such as transitions or hover effects), plan how they will work and what states should be considered (normal, hover, click, etc.).
Validate the design and implementation with the Aqua team: It is necessary to present the design and development of the component to the Aqua Team so that the team can validate the construction and functionality of the component and that it does not go outside the parameters required to be part of Aqua DS.
Iteration and Adjustments: It is always possible that adjustments may arise after modifications are applied. You are prepared to perform additional iterations if necessary.
Document: Create clear documentation for the component. This should include details about its purpose, how to use it, interactions and any relevant information for designers and developers.
Component documentation template
https://www.figma.com/file/6fslm2qTA1SkOp7zAwm75r/Documentation?type=design&node-id=0-1&mode=design - Graphic elements
Review and Validation: Review your designs and documentation with other team members. Make sure everyone is on the same page and that no important details have been overlooked.
Plan Implementation: If you are working in a team where designers and developers collaborate, make sure both teams understand how the component will be implemented in development.
Validate the design and implementation with the Aqua team: It is necessary to present the design and development of the component to the Aqua Team so that the team can validate the construction and functionality of the component and that it does not go outside the parameters required to be part of Aqua DS.