Figma Design Checker

Figma Design Checker

A Chrome extension that compares Figma designs with your app implementation and generates Cursor-friendly fix reports.

Features

• Tab Detection: Automatically detects Figma and app tabs
• Figma Spec Extraction: Extracts design specs from Figma Dev Mode panel
• App Style Extraction: Click-to-select elements and extract computed styles
• Smart Comparison: Compares layout, typography, colors, and effects with tolerance
• Cursor-Ready Reports: Generates markdown reports optimized for pasting into Cursor

Installation

Developer Mode (Recommended for Development)

1. Open Chrome and navigate to chrome://extensions/
2. Enable Developer mode (toggle in top-right corner)
3. Click Load unpacked
4. Select the figma-design-checker folder
5. The extension icon should appear in your toolbar

Generate Icons (Optional)

The extension includes an SVG icon. To generate PNG icons, you can use any image editor or online tool to export the SVG at 16x16, 32x32, 48x48, and 128x128 pixels.

Usage

Step 1: Open Both Tabs

• Open your Figma design file in one tab
• Open your app (the implementation) in another tab

Step 2: Enable Figma Dev Mode

In Figma:

1. Press Shift + D or click the Dev Mode toggle (bottom-right)
2. Select the element you want to compare
3. Ensure the properties panel is visible on the right

Step 3: Use the Extension

1. Click the extension icon in Chrome toolbar
2. Select your Figma tab from the dropdown
3. Select your App tab from the dropdown
4. Click Capture Figma Specs (the extension will switch to Figma and extract specs)
5. Click Select App Element (the extension will switch to your app)
6. Click on the corresponding element in your app (it will highlight on hover)
7. Click Compare Designs
8. View the results and click Copy Report to Clipboard
9. Paste into Cursor chat for automated fixes

Manual Input (Fallback)

If automatic extraction doesn't work:

1. Expand the "Manual Input" section
2. Paste Figma specs as JSON:

   {"padding": "16px", "fontSize": "14px", "color": "#333333"}
   

3. Paste app styles as JSON:

   {"padding": "12px", "fontSize": "14px", "color": "#666666"}
   

4. Click Compare Manual Input

Example Output

## Design Discrepancies Found

**Element**: <button> .primary-btn "Submit"
**Date**: 2024-01-15
**Total Issues**: 2

---

### Layout Issues

**1. Padding** [HIGH]
- **Expected** (Figma): `16px 24px`
- **Actual** (App): `12px 16px`
- **Fix**: Update padding to 16px 24px

### Typography Issues

**2. Font Weight** [MEDIUM]
- **Expected** (Figma): `600`
- **Actual** (App): `400`
- **Fix**: Update font-weight to 600

---

### Quick CSS Fix

```css
.element {
  padding: 16px 24px;
  font-weight: 600;
}

---

Cursor Fix Prompt

Copy and paste this into Cursor to fix the issues:

Fix the following design discrepancies for the <button> .primary-btn "Submit":

- Padding: change from `12px 16px` to `16px 24px`
- Font Weight: change from `400` to `600`

Please update the styles to match the Figma design specifications.

## Troubleshooting

### "No Figma tabs found"
- Make sure you have a Figma file open in a browser tab
- The URL should contain `figma.com`

### "Could not find design specs"
- Enable Dev Mode in Figma (Shift + D)
- Select an element in Figma
- Make sure the properties panel is visible
- Try the Manual Input fallback

### "No element selected"
- Click the "Select App Element" button first
- Click on an element in your app
- Press Escape to cancel selection

### Extension not working on internal URLs
- The extension has `<all_urls>` permission
- If blocked, check your company's Chrome extension policies

## Technical Details

### Permissions Used
- `activeTab`: Access the current tab
- `tabs`: Query and switch between tabs
- `scripting`: Inject content scripts
- `storage`: Save preferences (future feature)

### How Figma Extraction Works
The extension attempts to:
1. Find the Dev Mode panel in Figma's DOM
2. Extract text content containing CSS-like properties
3. Parse values using regex patterns

**Note**: Figma's DOM structure may change. If extraction fails, use Manual Input.

### How App Extraction Works
1. Injects a selector script that highlights elements on hover
2. On click, stores the selected element
3. Uses `window.getComputedStyle()` to extract all CSS properties

## Limitations

- Figma extraction depends on Dev Mode panel being visible
- Figma's DOM structure may change, breaking automatic extraction
- Complex nested elements may require manual selector refinement
- Color comparison has a 5-point RGB tolerance

## Contributing

Feel free to improve the Figma extraction selectors or add new features!

## License

MIT