Developer Documentation

Plugin Integration

Locofy.ai integrates directly into Figma via the Plugin API. After installing, it reads layer data, auto-detects design tokens (colors, typography, spacing), and maps them to CSS variables or Tailwind classes depending on your config.

Supported Frameworks & Output

React / Next.js / Gatsby – Generates functional components with JSX, optional TypeScript support, and CSS Modules or styled-components.
Vue.js – Outputs Single File Components (.vue) with scoped styles.
HTML/CSS – Clean semantic HTML with BEM-style or utility-class CSS.
React Native – Mobile-ready components with StyleSheet API.

GitHub Sync

Connect your GitHub account in Locofy settings to push generated code directly to a repository branch. This enables CI/CD integration from the design-to-code pipeline.

LocoAI Tagging API

Locofy exposes element-tagging configurations allowing developers to define custom component mappings and prop schemas, so repeated design patterns are consistently converted to the same reusable components across a project.

Code Customization

Post-generation, developers can use the Locofy Builder (web app) to tweak component structure, rename variables, adjust responsiveness, and merge code with existing codebases before export.