Figma Guard

🚀 Overview

Figma Guard is an AI-powered testing tool designed to validate Figma designs and web applications against Software Requirement Specification (SRS) documents. It ensures compliance and consistency through five types of testing:

1. Functional Testing
2. UI/UX Testing
3. Accessibility Testing
4. Compatibility Testing
5. Performance Testing

🛠 Tech Stack

• Frontend: Next.js 15
• Backend: Python (Flask)

✨ Features & Functionalities

• Automated Test Case Generation: AI-driven test cases for validation.
• SRS Compliance Check: Ensures designs meet the requirements.
• UI Consistency Testing: Detects inconsistencies in design elements.
• Detailed Reports: Provides insights into test results and potential issues.

📺 Demo (Video)

📥 Installation

# Clone the repository
git clone https://github.com/Bhaumil111/FigmaGuard.git

# Navigate to the project directory
cd FigmaGuard

# Install frontend dependencies
pnpm install  

# Start the frontend
pnpm dev

# Navigate to the backend directory
cd backend

# Install backend dependencies
pip install -r requirements.txt

# Start the backend server
python run.py

🔑 API Configuration

Create a .env file in the root directory and add the following:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
google_api_key=
FIGMA_API_KEY=

🚀 Run the Project

After completing the installation steps, you can run the project:

• Frontend: pnpm dev
• Backend: python run.py

📌 Contributing

Feel free to open issues and pull requests to improve the project!

🏆 Hackathon Participation

This project was built as part of a hackathon to showcase AI-powered design validation.

---

🔥 Figma Guard - Ensuring Design Accuracy with AI!