As a front-end developer, it is normal (more often every day) to receive projects created entirely in Figma from designers.
Many times we find it challenging to translate these designs to pages or applications if some basic standards are not taken into account.
A Figma project that does not have the features listed below will probably end up incurring errors in concept, delays in development, and sometimes even having to redo several parts of the project.
1. File Organization
Separate the pages and sections for use by the designer from elements that are for the developer (final UI designs, style guides, component styles, flowcharts, and interactions).
Structure the project into different pages and sections, instead of having everything together on a single page.
Indicate the status of each page, communicate to the developer which are ready to start implementing and which are still being designed.
2. Components
Use components to avoid having to repeatedly make adjustments or modifications in different sections and pages of your prototype.
Generate a page with a visual description of all the components to be used throughout the project.
Styles
3. Color
When UX designers take the time to assign names to colors, types, and style effects, this streamlines the design process and the implementation process in development.
Define a color palette with their respective names, and adjust to exclusively use these variables when assigning a color to any element.
Clarify in each case if they belong to a particular style state or effect (hover, active, visited), or if they have a conversion for each case if a dark mode view is enabled.
Generate a page with a visual description of the defined colors to be used throughout the project.
4. Text
Define the size, weight, and line height for each format or tag (headings, paragraphs, links, body).
Generate a page with a visual description of the typographic styles to be used throughout the project.
Limit to 1 or 2 fonts and use them consistently throughout the pages.
5. Images & Assets
Specify if the component requires opacity or transparency (PNG), if it is going to be a scalable asset (SVG) or if it is just going to be a rectangular image without any of the above-mentioned properties (JPG).
Set each image or asset to export as a component, defining the different states and sizes of how it can be applied throughout the project.
6. Grid System
Clarify if the columns adapt fluidly according to the screen size (responsive) or if they adjust to fixed sizes according to the breakpoints (adaptive).
Generate grids for each breakpoint (mobile, tablet, desktop), defining the size, quantity, and spacing of the columns.
7. Flowchart & Prototype
Use arrows and descriptions to explain the different types of relationships that exist between each page.
Specify the behavior of the components when they are used in each page or section.
Conclusion
Many of the above suggestions may or may not be necessary depending on the size and magnitude of the project.
The idea is to try to use these suggestions when UX design starts and throughout the project. These 7 best practices will give all members of your team a shared understanding from concept to delivery and Figma files that will scale over time.
Want to set up some time to chat about how best-practice Figma files can save you time and development budget within your organization? Give us a shout.