A bridge between Figma and Flutter that transforms your Figma designs into pixel-perfect Flutter widgets with real-time updates.

Morphr eliminates the gap between design and development, allowing designers and developers to work in parallel while keeping your app's UI perfectly aligned with your design system.

• High-Fidelity Rendering: Preserves all visual details from your Figma designs
• Zero-Config Setup: Transform designs to code without complex configuration
• Full Control: Maintain complete control over layout and logic in your Flutter code
• Type-Safe Overrides: Override component properties with type-checking
• Over-the-Air Updates: Sync your app's UI without redeploying your app
• Native Performance: Uses Flutter's layout system for optimal performance

Install the Morphr CLI:

dart pub global activate morphr

Add Morphr to your pubspec.yaml:

dependencies:
  morphr: ^0.1.0

Then run:

flutter pub get

Register a Morphr account and connect it to Figma:

morphr register
morphr verify
morphr figma-connect

Initialize Morphr in your Flutter project:

cd your_flutter_project
morphr init

Whenever your Figma design changes:

morphr sync

Update your main.dart:

import 'package:flutter/material.dart';
import 'package:morphr/morphr.dart';
import 'package:your_app/morphr_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize Morphr with your configuration
  await MorphrService.instance.initializeCloud(options: morphrOptions);
  
  runApp(MyApp());
}

Use Figma components in your widgets:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: FigmaComponent.appBar(
        "my_app_bar",
        context: context,
        children: [
          FigmaComponent.text("app_title", text: "My App"),
        ],
      ),
      body: FigmaComponent.container(
        "home_screen",
        child: FigmaComponent.column(
          "content_column",
          children: [
            FigmaComponent.text("welcome_text", text: "Welcome!"),
            FigmaComponent.button(
              "action_button",
              onPressed: () => print("Button pressed"),
            ),
          ],
        ),
      ),
    );
  }
}

• FigmaComponent.container: For frames and shapes
• FigmaComponent.text: For text elements
• FigmaComponent.button: For interactive buttons
• FigmaComponent.column: For vertical auto-layout
• FigmaComponent.row: For horizontal auto-layout
• FigmaComponent.appBar: For top navigation bars
• FigmaComponent.bottomBar: For bottom navigation bars
• FigmaComponent.list: For scrollable lists
• FigmaComponent.textField: For input fields
• FigmaComponent.icon: For vector graphics

For complete documentation, go here.

Check out our example app to see Morphr in action.

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.