Welcome to QA Proof! This guide will help you get up and running with our design QA platform in just a few minutes.
What is QA Proof?
QA Proof is an AI-powered design QA tool that helps teams catch visual bugs and design inconsistencies before they reach production. By comparing your Figma designs with live web pages, QA Proof automatically detects layout shifts, color mismatches, spacing issues, and more.
Prerequisites
Before you start, make sure you have:
- A QA Proof account (sign up at qaproof.io)
- Access to your Figma design files
- A website or web application to test
Step 1: Create Your First Project
After signing in to QA Proof:
- Click the "New Project" button in the dashboard
- Enter your project name (e.g., "Homepage Redesign")
- Add your website URL
- Click "Create Project"
Step 2: Connect Your Figma Design
To compare your designs with the live site:
- Navigate to your project settings
- Click "Connect Figma"
- Authorize QA Proof to access your Figma files
- Select the design file you want to use as a baseline
Learn more about Figma integration in our Figma Integration Guide.
Step 3: Run Your First Test
Now you're ready to run your first design QA test:
- Go to the "Tests" tab in your project
- Click "Create New Test"
- Select the pages or components you want to test
- Choose your test settings (viewport size, browser, etc.)
- Click "Run Test"
QA Proof will capture screenshots of your live pages and compare them with your Figma designs. Results typically appear within 1-2 minutes.
Step 4: Review Test Results
Once the test completes, you'll see:
- Visual differences highlighted in red
- Severity scores for each issue (critical, major, minor)
- Side-by-side comparison of Figma vs. live page
- Specific measurements showing spacing, color, and typography differences
What's Next?
Now that you've completed your first test, explore these features:
- AI-powered test generation to automatically create test cases
- GitHub integration to track issues in your repository
- Visual regression testing to catch unintended changes
- Invite team members to collaborate on QA
๐ก Pro Tip: Set up automated tests to run on every deployment using our CI/CD integration.
Need Help?
If you're stuck or have questions:
- Check our Help Center for detailed guides
- Join our Community Forum to connect with other users
- Contact our Support Team for personalized assistance