Welcome to Frontfriend

Frontfriend is a design-to-code platform that bridges the gap between design and development by syncing design tokens from Figma to your codebase, providing production-ready components, and ensuring consistency across all your applications.

Core Features

• 🎨 Design Tokens - Automatically sync colors, fonts, and animations
• 🌓 Dark Mode - Built-in support for light and dark themes
• ⚡ Performance - 7-day cache with automatic refresh
• 🔧 Framework Support - Works with Next.js, Vite, React, and Vue
• 📦 Pre-built Components - Production-ready accessible components
• 🛠️ TypeScript - Full TypeScript support

How It Works

1. Configure - Add your Frontfriend ID to your project
2. Initialize - Fetch design tokens from your design system
3. Use - Access tokens as Tailwind utilities and pre-built components
4. Stay Synced - Tokens update automatically when designs change

Quick Start

Choose your framework to get started with Frontfriend:

• React + Next.js Setup Guide →
• Vue 3 + Vite Setup Guide →