After connecting your Figma account, you need to initialize a Morphr project and link it to your Figma file. The init command must be run inside an existing Flutter project directory.
bash
cd your_flutter_project
morphr initWhen you run this command, the CLI will:
- Verify you're logged in to your Morphr account
- Ask for your Figma file URL
- Verify access to that Figma file
- Create a new Morphr project on the cloud
- Sync the Figma file with your project
- Generate configuration files in your Flutter project
- You must run this command inside a Flutter project directory
- You must be logged in to your Morphr account
- You must have already connected your Figma account (using
morphr figma-connect) - You must have access to the Figma file you want to link
text
$ cd my_flutter_app
$ morphr init
๐ Paste your Figma file URL: https://www.figma.com/design/abcdefghijklm
๐ Verifying access to Figma file...
๐ Enter a name for your Morphr project [Flutter Project]: My Awesome App
๐ Creating project on Morphr Cloud...
๐ Syncing project...
โ
Morphr project initialized successfully!
๐ Configuration file generated at lib/morphr_options.dart
๐ Now add Morphr to your Flutter app:
1. Update your main.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());
}
2. Run your app and start creating great UIs with Morphr!You can specify the Figma file URL directly as a command option:
bash
morphr init --figma-url="https://www.figma.com/design/abcdefghijklm"Or using the short form:
bash
morphr init -f "https://www.figma.com/design/abcdefghijklm"- The CLI extracts the Figma file ID from the URL
- It verifies that you have access to the file
- It retrieves the file details to suggest a project name
- It creates a new project on Morphr Cloud
- It syncs the Figma file with your project (equivalent to running
morphr sync) - It generates a
morphr_options.dartfile in your project'slibdirectory
After initializing your project, you need to:
- Update your
main.dartfile to initialize Morphr with your configuration - Start using Morphr components in your Flutter app
Now you're ready to start building your UI with Morphr components that perfectly match your Figma designs!