Compatly

Inspiration

Browser compatibility issues are traditionally discovered late, either during development or in production. This leads to costly rework, delayed launches and poor user experiences. My inspiration to build Compatly was to take a different approach by considering the design phase of web development into Baseline thinking.

What it does

Compatly shifts browser compatibility checks from deployment to design. Built on official Baseline data, it validates CSS features in Figma designs and code, providing instant compatibility scores, browser support insights and auto-generated CSS before development begins.

How we built it

Architecture: Figma Plugin (TypeScript) with Figma Plugin API Web App (Next.js 15, TypeScript, React, Tailwind CSS) Baseline data stored as local JSON dataset Real-time CSS parsing and validation engine RESTful API for plugin-to-web communication

Key Features: Automatic CSS feature detection from Figma properties Weighted compatibility scoring (0-100) Browser-specific version requirements Auto-generated production CSS with vendor prefixes AI assistant for compatibility explanations Exportable JSON reports

Data Flow: Design → Feature Detection → Baseline Validation → Compatibility Analysis → Actionable Recommendations