{"id":25845376,"url":"https://github.com/intales/morphr","last_synced_at":"2025-10-08T01:39:27.594Z","repository":{"id":279435663,"uuid":"894971107","full_name":"intales/morphr","owner":"intales","description":"From Figma to Flutter over-the-air.","archived":false,"fork":false,"pushed_at":"2025-05-22T15:11:37.000Z","size":662,"stargazers_count":26,"open_issues_count":1,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-22T15:51:24.902Z","etag":null,"topics":["design","figma","flutter","pixel-perfect-ui"],"latest_commit_sha":null,"homepage":"https://morphr.dev","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/intales.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-27T10:30:35.000Z","updated_at":"2025-05-22T15:11:43.000Z","dependencies_parsed_at":"2025-03-19T16:27:38.826Z","dependency_job_id":"b10ed78d-a5a8-4153-ac2b-616870da9ac9","html_url":"https://github.com/intales/morphr","commit_stats":null,"previous_names":["intales/morphr"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/intales/morphr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intales%2Fmorphr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intales%2Fmorphr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intales%2Fmorphr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intales%2Fmorphr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intales","download_url":"https://codeload.github.com/intales/morphr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intales%2Fmorphr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278877097,"owners_count":26061380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","figma","flutter","pixel-perfect-ui"],"created_at":"2025-03-01T08:18:57.008Z","updated_at":"2025-10-08T01:39:27.582Z","avatar_url":"https://github.com/intales.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Morphr\n\nA bridge between Figma and Flutter that transforms your Figma designs into pixel-perfect Flutter widgets with real-time updates.\n\n## Overview\n\nMorphr 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.\n\n## Features\n\n- **High-Fidelity Rendering**: Preserves all visual details from your Figma designs\n- **Zero-Config Setup**: Transform designs to code without complex configuration\n- **Full Control**: Maintain complete control over layout and logic in your Flutter code\n- **Type-Safe Overrides**: Override component properties with type-checking\n- **Over-the-Air Updates**: Sync your app's UI without redeploying your app\n- **Native Performance**: Uses Flutter's layout system for optimal performance\n\n## Installation\n\n### CLI\n\nInstall the Morphr CLI:\n\n```bash\ndart pub global activate morphr\n```\n\n### Flutter Library\n\nAdd Morphr to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  morphr: ^0.1.0\n```\n\nThen run:\n\n```bash\nflutter pub get\n```\n\n## Quick Start\n\n### 1. Register and Connect\n\nRegister a Morphr account and connect it to Figma:\n\n```bash\nmorphr register\nmorphr verify\nmorphr figma-connect\n```\n\n### 2. Initialize Your Project\n\nInitialize Morphr in your Flutter project:\n\n```bash\ncd your_flutter_project\nmorphr init\n```\n\n### 3. Sync Your Design\n\nWhenever your Figma design changes:\n\n```bash\nmorphr sync\n```\n\n### 4. Use Components in Flutter\n\nUpdate your `main.dart`:\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:morphr/morphr.dart';\nimport 'package:your_app/morphr_options.dart';\n\nvoid main() async {\n  WidgetsFlutterBinding.ensureInitialized();\n  \n  // Initialize Morphr with your configuration\n  await MorphrService.instance.initializeCloud(options: morphrOptions);\n  \n  runApp(MyApp());\n}\n```\n\nUse Figma components in your widgets:\n\n```dart\nclass HomeScreen extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: FigmaComponent.appBar(\n        \"my_app_bar\",\n        context: context,\n        children: [\n          FigmaComponent.text(\"app_title\", text: \"My App\"),\n        ],\n      ),\n      body: FigmaComponent.container(\n        \"home_screen\",\n        child: FigmaComponent.column(\n          \"content_column\",\n          children: [\n            FigmaComponent.text(\"welcome_text\", text: \"Welcome!\"),\n            FigmaComponent.button(\n              \"action_button\",\n              onPressed: () =\u003e print(\"Button pressed\"),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n\n## Available Components\n\n- `FigmaComponent.container`: For frames and shapes\n- `FigmaComponent.text`: For text elements\n- `FigmaComponent.button`: For interactive buttons\n- `FigmaComponent.column`: For vertical auto-layout\n- `FigmaComponent.row`: For horizontal auto-layout\n- `FigmaComponent.appBar`: For top navigation bars\n- `FigmaComponent.bottomBar`: For bottom navigation bars\n- `FigmaComponent.list`: For scrollable lists\n- `FigmaComponent.textField`: For input fields\n- `FigmaComponent.icon`: For vector graphics\n\n## Documentation\n\nFor complete documentation, go [here](https://docs.page/intales/morphr).\n\n## Examples\n\nCheck out our [example app](https://github.com/intales/morphr/tree/main/example) to see Morphr in action.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintales%2Fmorphr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintales%2Fmorphr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintales%2Fmorphr/lists"}