Grids- Define the horizontal layout and how your grids behave across different screen sizes. The grids can be fixed or fluid according to the different screen sizes.
Spacing- Define how your elements are distributed vertically and horizontally in relation to the screen and each other within the grid
Breakpoints- Breakpoints are pixel values that a developer/designer can define. When a responsive website reaches those pixel values, a transformation in terms of layout, sizing, spacing, etc., occurs so that the website offers an optimal user experience.
Save your components in your asset library for easier access throughout the project.
The overview of components include
- The Master Component
- The component in different states like hovered, clicked, etc
- Info section about the specs of the component
Define your component behaviour as well, how they open, stretch and respond to interactions. Download pre-made material library in Figma from the community section-
Define images as components. Set their behaviour in different states and how the surrounding behaves in those states. Mention how the image is spaced according to the title and define how the images sit within the website and the grids.
The behaviour of Grids:
Responsive Grid (top): is fluid and adaptive; it has breakpoints that create a range. Within the range, the design behaves fluid.
Adaptive Grid (bottom): has several fixed-layout designs. The one displayed depends on the screen width of the viewer. It has fixed breakpoints.
Flowchart & Prototype:
Create an overview of the flowchart between different screens and prototype the interactions to understand better the website’s feel and for the sake of testing.
Flow chart — Use arrows and descriptions to explain the flow and relation between the screens.
Prototype — Inform the developer about the behaviour of the component during interaction
Handoff with FIGMA:
Once you are done with all your structuring and documentation, the handoff with Figma is simple, click on the Share button on the top right corner and add developers to your file. There are two ways for this, either you can enter their email and click on the invite button or copy the shareable link of your file (make sure you set the permission to “Anyone with this link can view”). Developers don’t need edit access to inspect the elements in Figma.