Skip to content
ZenAdmin Tech

Figma Workflow

This guide aims to provide clarity on the collaboration process between our Frontend and Design teams, focusing on the use of Figma for design handoffs and reference.

Overview

Our design team uses Figma as the primary tool for creating and sharing UI/UX designs. The workflow is structured to ensure a smooth transition of requirements from the Product team to Design, and subsequently to the Frontend Development team.

Workflow Stages

1. Requirement Flow

  • From Product to Design: The Product team conveys the feature requirements to the Design team.
  • Design Process: Based on these requirements, our Design team crafts the UI/UX in Figma, iterating as needed.

2. Pre-Sprint Handoff

  • Handoff Preparation: Before each sprint begins, the Design team prepares a final version of the design.
  • Handoff Folder: All ready-to-develop features for the sprint are placed in a dedicated Figma folder named “HandOffs.”

3. Development Reference

  • Handoff File: Frontend developers should refer exclusively to the designs in the “HandOffs” folder for development.
  • Design System Reference: For standard UI components, typography, colors, etc., developers should refer to the dedicated Figma file named “Design System,” which contains our design system.

Best Practices

For Frontend Developers

  • Adhere to Handoffs: Strictly follow the designs in the “HandOffs” folder to ensure consistency and avoid discrepancies.
  • Refer to Design System: Utilize the “Design System” file for design system standards to maintain uniformity across our products.

For Design Team

  • Clear and Concise Handoffs: Ensure that the handoff files are detailed and unambiguous, covering all aspects of the design.
  • Regular Updates to Design System: Keep the “Design System” file updated with the latest design system guidelines.

Collaboration and Communication

  • Regular Sync-ups: Schedule regular meetings between the Frontend and Design teams to discuss upcoming designs and clarify doubts.
  • Feedback Loop: Maintain an open channel for feedback on both designs and implementation.

Conclusion

This workflow is designed to streamline the collaboration between our Frontend and Design teams. By adhering to this process, we can ensure a cohesive and efficient development cycle.

For further inquiries or suggestions regarding the workflow, please contact the respective team leads.