CRX id
pjcfmgokdbdffkcldahbehpemeejglhh
pjcfmgokdbdffkcldahbehpemeejglhh
Description from extension meta
Inspect, compare and update CSS visually
Image from store
Description from store
🛠 Inspecta – Find and Fix UI Bugs on Live Websites.
Inspecta lets designers and developers inspect, compare, and visually edit live website styles.
Copy styles from Figma, compare CSS, fix mismatches, and export the updated CSS—all without writing code.
🔗 Figma Plugin
Use our companion Figma plugin to instantly compare styles between Figma and live web pages:
Figma to Inspecta:
https://www.figma.com/community/plugin/1397609843224212500/figma-to-inspecta-compare-design-to-web
✨ Key Features
🔁 Compare with Figma
Copy styles from a Figma element and apply them directly to a live element.
Detect mismatched colors using Figma color styles and variables.
Replace SVGs (temporary method) from Figma onto live elements.
🔍 Inspect Elements
Hover any element to view its CSS properties: text, colors, spacing, layout, borders, and more.
Use the eyedropper to identify colors.
Draw guides for more accurate inspection.
🎨 Visual CSS Editing
Edit CSS in real-time with a visual interface—just like in your design tools.
Easily modify: display, size, spacing, colors, typography, borders, radius, position, box-shadow, and opacity.
🧾 Page Overview
Get a full breakdown of used colors (backgrounds, texts, borders) and fonts (family, size, weight, line height).
Ideal for design audits and QA reviews.
🧘 Isolate Elements
Select any element and hide everything else to inspect and edit in focus mode.
🧠 Batch Color Fixes
Fix all your website colors in one click using Figma suggested colors popup.
📏 Spacing Overlays & Distance Guides
Hover to view padding and margin overlays.
Measure distances between elements for pixel-perfect layout refinement.
🖼 Pixel-Perfect Comparison
Upload or paste your Figma design as an overlay for accurate side-by-side comparison with the live page.
📤 Export & Share CSS
Export all your CSS changes as a single file or copy individual snippets.
Share updates directly with developers or use with your Vibe-code AI tool for faster implementation.
Latest reviews
- (2025-05-19) Phat Thaveepholcharoen: Very useful extension, is it possible to add option to toggle to show which CSS variable name is using in each field. It can be helpful when debug concept of `Design Tokens`. Thank you so much
- (2025-03-22) asmusa760: Excellent Plugin - thanks to the Developer for all the smarts & efforts and making this available for free!
- (2024-04-30) Dashu Xia: How to completely exit this plugin
Statistics
Installs
1,000
history
Category
Rating
5.0 (8 votes)
Last update / version
2025-07-02 / 0.2.6
Listing languages
en