Before building screens
Before starting the development of a screen, the design must have been validated. No development should begin without having the design and screens flows delivered by the design team. Using wireframes or mockups, preferably in Figma, helps to define the screen structure. It is important that the layout and expected behavior are clearly defined and agreed upon. Early iteration with the design team is key to align expectations, especially on visual and interactive aspects.
Screen building checklist
Confirm the canvas size: make sure it is aligned with the design, as specified in the Figma base frame.
Verify deliverables for responsive design and accessibility: make sure accessibility criteria are covered.
Confirm the loading of required assets: images, icons and fonts must be available.
Validate styles and theme variables: the designer must have configured these elements correctly.
Activate visual fidelity options. For example, the Pixel Density option (it appears as px in the screens editor).
Maintain a clean structure: Concatenate styles and avoid fixed units of measurement.
Define accessibility settings: Decide whether it will be carried out in different stages or in one single stage.
Review styles before building: make sure all theme styles are uploaded and reviewed.
General considerations
This section includes considerations that you and your team must take into account before starting with the screens building process.