Agoda Services
ADS Lint Figma Plugin – Streamlining Design Consistency
ADS Lint, a custom Figma plugin, revolutionizes design consistency for the Agoda Design Team. It seamlessly integrates advanced linting within Figma, ensuring designs adhere to our design language and hand-off criteria. By automating checks against common design errors like hardcoded colors and incorrect element spacing, it streamlines the design process.
ADS Lint functions like a developer's linting tool, scanning artboards based on predefined rules to guarantee design precision, thereby minimizing designer-developer miscommunications and enhancing workflow efficiency.
Role
UX Engineer
Platforms
Figma, Notion, JIRA, GitLab
Deliverables
Figma Plugin, Documentation, Workshops
Timeframe
~ 6 months
Project Overview
In my role as a UX Engineer at Agoda, I recognized the need for enhancing the efficiency and consistency of design handoffs between our design and development teams. To address this, I developed the ADS Lint Figma plugin, a tool designed to automate the process of ensuring design consistency and clarity within our Figma work files.
Problem Statement
Designers at Agoda faced challenges in maintaining consistent design language across various projects. Frequent discrepancies in design elements like color usage, spacing, and component application led to increased back-and-forth communication with developers. This not only slowed down the design process but also introduced potential for errors in implementation.
Development Process
The ADS Lint plugin was developed to automatically scan Figma artboards and identify discrepancies against our established design system.
Key features included:
- Checking for hardcoded colors instead of using predefined Color Styles from Libraries.
- Ensuring correct spacing between elements based on token values.
- Identifying usage of components from deprecated Libraries.
Implementation
The plugin was seamlessly integrated into the Figma environment used by our designers. It allowed for real-time linting, providing immediate feedback and suggestions for corrections. This integration ensured that all designs conformed to Agoda's design language before being handed off to development.
Outcomes and Takeaways
- Increased Efficiency: The plugin reduced the time taken for design reviews and corrections, leading to quicker design handoffs.
- Improved Consistency: With automated checks, the consistency of design elements across different projects significantly improved.
- Enhanced Collaboration: The clarity in design files reduced the need for back-and-forth clarifications between designers and developers.