figmint ALPHA Documentation
Need Help? Contact Support

Overview

Learn about the architecture of components from the Figmint Figma plugin and how to use them in your application.

Core Philosophy

This plugin does not just generate code - it acts as a bridge for syncing Figma components to code. The exported components are complete UI blobs that can be used immediately without modification. They are configured through reference IDs and props, maintaining a direct connection to your Figma designs.

Deterministic Generation

Component generation is fully deterministic and consistent - no AI involved.

The generation process follows strict, rule-based transformations that map Figma design properties directly to React code. The same Figma component always produces identical code - no randomness, no variation. This ensures your components are stable, version-controllable, and behave exactly as expected every time you sync from Figma.

Sync Process

How Sync Works

The sync process connects your Figma designs directly to your codebase:

Figma Component
Your design component in Figma
Figma Plugin
Extracts:
  • Structure
  • Styling
  • Properties
  • Assets
React Component
Generated with:
  • TypeScript
  • Props
  • Assets
Repository
Ready to import

1. Design in Figma

Create or update a component in Figma with component properties (text, variants, instance swaps)

2. Sync Component

Select the component in Figma and trigger sync from the plugin. The sync process:

  • Extracts the component structure, styling, and properties from Figma
  • Generates a React component with TypeScript types
  • Commits the component to your configured repository

3. Component Appears in Codebase

The component appears in your repository as a ready-to-use React component with:

  • TypeScript interface for props
  • Default values from Figma
  • All styling and layout preserved
  • Asset files (images, fonts) bundled

4. Use in Your App

Import and use the component like any React component, passing props to customize it

Key Benefits

  • • No Code Generation Needed: Components are complete and ready to use
  • • Design-to-Code Bridge: Direct connection between Figma and your code
  • • Type Safety: Full TypeScript support with generated interfaces
  • • Incremental Updates: Sync updates without losing customizations
  • • Zero Manual Work: Components appear in your repo ready to import

Component Overview

Structure & Contents

Components are complete UI blobs that do not require modification. They preserve the complete structure and styling from your Figma designs:

  • • Self-contained: Include all styling, layout, and structure
  • • Ready to Use: Work out of the box with default values from Figma
  • • Type-safe: Full TypeScript support with generated interfaces
  • • Figma-synced: Maintain connection to source design through IDs
  • • Hierarchy Preservation: The exact nesting and structure from Figma is maintained
  • • Styling Fidelity: All visual properties (colors, spacing, effects) are captured
  • • Component Properties: Figma component properties become TypeScript props
  • • Asset Bundling: Images and fonts are automatically included
⚠️

Important: Component files must never be modified manually. All customization must be done through props and elementProps. When design changes occur in Figma, sync to regenerate the component. Any manual edits will be lost on the next sync.