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 morphrAdd Morphr to your pubspec.yaml:
dependencies:
morphr: ^0.1.0Then run:
flutter pub getRegister a Morphr account and connect it to Figma:
morphr register
morphr verify
morphr figma-connectInitialize Morphr in your Flutter project:
cd your_flutter_project
morphr initWhenever your Figma design changes:
morphr syncUpdate 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 shapesFigmaComponent.text: For text elementsFigmaComponent.button: For interactive buttonsFigmaComponent.column: For vertical auto-layoutFigmaComponent.row: For horizontal auto-layoutFigmaComponent.appBar: For top navigation barsFigmaComponent.bottomBar: For bottom navigation barsFigmaComponent.list: For scrollable listsFigmaComponent.textField: For input fieldsFigmaComponent.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.