# Overlint - Figma Design Overlay Tool
## Overview
Overlint is a Chrome extension that overlays Figma designs on web pages, allowing you to compare design and implementation differences with pixel-perfect accuracy.
## Key Features
### 🎯 Pixel-Perfect Comparison
- Accurately overlay Figma designs on web pages
- Visually identify position, size, and layout differences
- Adjust transparency to view implementation and design simultaneously
### 🔐 Secure Authentication
- Uses Figma Personal Access Token
- Tokens are stored locally and never sent externally
- Works with your existing Figma account
### 🎨 Real-Time Display
- Fetches latest design files from Figma API
- Design changes reflect in real-time
- Supports multiple nodes (frames, components)
### ⚡ Easy Operation
- One-click overlay start
- Drag & drop for position adjustment
- Scale adjustment for size matching
- Transparency adjustment for better visibility
## Use Cases
### Frontend Developers
- Verify differences between implemented web pages and designs
- Make pixel-perfect layout adjustments
- Confirm implementation when designs change
### Designers
- Check implementation status of designs
- Provide specific correction instructions to developers
- Verify design feasibility
### Project Managers
- Monitor progress between design and implementation
- Streamline quality checks
- Improve team communication
## Benefits After Installation
### 🚀 Improved Development Efficiency
- No need to switch pages for design verification
- View implementation and design simultaneously
- Significantly improved correction accuracy
### 💰 Cost Reduction
- Reduced time for design verification
- Minimize correction rework
- Reduced post-release correction costs through quality improvement
### 🎯 Quality Enhancement
- Pixel-perfect accurate implementation
- Accurately reflect design intent
- Improved user experience
### 🔄 Better Team Collaboration
- Align designer and developer understanding
- Provide specific correction instructions
- Increase project progress speed
## Privacy and Security
- No personal information collection
- Figma API tokens stored locally only
- No external data transmission
## Support
- Continuous feature improvements
## Overview
Overlint is a Chrome extension that overlays Figma designs on web pages, allowing you to compare design and implementation differences with pixel-perfect accuracy.
## Key Features
### 🎯 Pixel-Perfect Comparison
- Accurately overlay Figma designs on web pages
- Visually identify position, size, and layout differences
- Adjust transparency to view implementation and design simultaneously
### 🔐 Secure Authentication
- Uses Figma Personal Access Token
- Tokens are stored locally and never sent externally
- Works with your existing Figma account
### 🎨 Real-Time Display
- Fetches latest design files from Figma API
- Design changes reflect in real-time
- Supports multiple nodes (frames, components)
### ⚡ Easy Operation
- One-click overlay start
- Drag & drop for position adjustment
- Scale adjustment for size matching
- Transparency adjustment for better visibility
## Use Cases
### Frontend Developers
- Verify differences between implemented web pages and designs
- Make pixel-perfect layout adjustments
- Confirm implementation when designs change
### Designers
- Check implementation status of designs
- Provide specific correction instructions to developers
- Verify design feasibility
### Project Managers
- Monitor progress between design and implementation
- Streamline quality checks
- Improve team communication
## Benefits After Installation
### 🚀 Improved Development Efficiency
- No need to switch pages for design verification
- View implementation and design simultaneously
- Significantly improved correction accuracy
### 💰 Cost Reduction
- Reduced time for design verification
- Minimize correction rework
- Reduced post-release correction costs through quality improvement
### 🎯 Quality Enhancement
- Pixel-perfect accurate implementation
- Accurately reflect design intent
- Improved user experience
### 🔄 Better Team Collaboration
- Align designer and developer understanding
- Provide specific correction instructions
- Increase project progress speed
## Privacy and Security
- No personal information collection
- Figma API tokens stored locally only
- No external data transmission
## Support
- Continuous feature improvements
