{"id":13516367,"url":"https://github.com/AdobeXD/xd-to-flutter-plugin","last_synced_at":"2025-03-31T06:30:58.102Z","repository":{"id":47300663,"uuid":"263188625","full_name":"AdobeXD/xd-to-flutter-plugin","owner":"AdobeXD","description":"Generate assets from XD for use in an existing Flutter project","archived":false,"fork":false,"pushed_at":"2022-02-01T16:23:35.000Z","size":5576,"stargazers_count":951,"open_issues_count":43,"forks_count":96,"subscribers_count":49,"default_branch":"master","last_synced_at":"2024-11-01T21:33:17.932Z","etag":null,"topics":["adobe-xd","dart","flutter","plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AdobeXD.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-12T00:13:57.000Z","updated_at":"2024-10-28T17:23:44.000Z","dependencies_parsed_at":"2022-07-30T23:08:07.297Z","dependency_job_id":null,"html_url":"https://github.com/AdobeXD/xd-to-flutter-plugin","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdobeXD%2Fxd-to-flutter-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdobeXD%2Fxd-to-flutter-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdobeXD%2Fxd-to-flutter-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdobeXD%2Fxd-to-flutter-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdobeXD","download_url":"https://codeload.github.com/AdobeXD/xd-to-flutter-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246429459,"owners_count":20775805,"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","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":["adobe-xd","dart","flutter","plugin"],"created_at":"2024-08-01T05:01:21.729Z","updated_at":"2025-03-31T06:30:53.086Z","avatar_url":"https://github.com/AdobeXD.png","language":"JavaScript","funding_links":[],"categories":["Awesome Open Source Plugins"],"sub_categories":[],"readme":"# XD to Flutter Plugin v4.0.0\n\n## READ THIS FIRST\nThank you for helping to test this plugin! Our goal is to release the best plugin we possibly can, and your feedback is a huge part of that.\n\nBefore you get started, please read through the rest of this document, especially \"Using This Plugin\".\n\n\n### Issues \u0026 Feedback\nIf you encounter a bug, have a feature request, or would like to ask a question, please use the [GitHub repo](https://github.com/AdobeXD/xd-to-flutter-plugin). Before submitting a new issue, please check the known issues below, and search on GitHub to ensure it hasn't already been reported - the less time we spend filtering duplicate posts, the more time we have to actually improve things.\n\nWhen you file a bug, please provide as much info as possible to help us to reproduce it. If possible, include a link to a `.xd` file that isolates the problem. There may be relevant information in the Developer Console accessible from the Plugin \u003e Development menu.\n\n\n### Contributing\nContributions are welcomed! Read the [Contributing Guide](./.github/CONTRIBUTING.md) for more information.\n\n\n### Licensing\nThis project is licensed under the simplified BSD License. See [LICENSE](LICENSE) for more information.\n\n\n# Installation \u0026 Setup\nIn the Adobe XD menubar, go to Plugins \u003e Discover Plugins, then search for and install the \"Flutter\" plugin. It will now show up in your plugins sidebar in the bottom left of XD. If you don't see the plugin listed, make sure you have the most recent version of Adobe XD installed, and try again.\n\nIf you haven't already, install VS Code, and the Flutter / Dart extensions for it:\n\nhttps://flutter.dev/docs/get-started/editor?tab=vscode\n\nIf you've never worked with Flutter before, it may be worth creating a starter app to gain some familiarity:\n\nhttps://flutter.dev/docs/get-started/codelab\n\n\n## Hot Reload\nHot reload will allow you to see changes you make reflected on a device or simulator immediately each time you export from XD.\n\nTo enable it, open the settings for the Dart extension in VS Code, and turn on `Preview Hot Reload On Save Watcher`. This will automatically hot reload your Flutter app whenever an external application (such as Adobe XD) saves changes to a `.dart` file in your project.\n\n\n## Flutter Dependencies\nCertain features have dependencies on custom widgets that are defined in the [adobe_xd](https://pub.dev/packages/adobe_xd) package on pubdev. In your Flutter project, add it as a dependency in your `pubspec.yaml` similar to:\n\n\t// in pubspec.yaml\n\tdependencies:\n\t  adobe_xd: ^2.0.0\n\n\n## Null Safety\nYou can enable \"Export Null Safe Code\" in the plugin's project settings. If you do so, you must use v2.0.0 or higher of the `adobe_xd` package and at least v2.1.2 of the SDK. Learn more about null safety on the [flutter.dev](https://flutter.dev/docs/null-safety) site.\n\n\t// in pubspec.yaml\n\tenvironment:\n\t  sdk: '\u003e=2.12.0 \u003c3.0.0'\n\n\tdependencies:\n\t  adobe_xd: ^2.0.0\n\n\n## Normalize Names\nWhen this setting is enabled the plugin will attempt to normalize the names of classes, files, and other entities to match Dart standards.\n\nNote that XD files that have previously been opened with the plugin will have this setting off by default. New files will default to on.\n\nFor example, an artboard named \"my view\" would generate a class named `MyView` written to a file named `my_view.dart`. Note that you can still manually set names that don't adhere to these standards.\n\n\n## Example\nThere is a simple example in the `adobe_xd/example/` folder.\n\n\n# Using This plugin\nThis plugin is intended to generate assets for use in an existing Flutter project.\nThere are two primary ways you can work with it:\n\n\n## Copy and paste\nIf you select any item in XD (except an Artboard or Component), you can click the \"Copy Selected\" button in the plugin panel to copy Dart code to your clipboard. You can then paste it into your project directly.\n\n\n## Export widgets\nArtboards and Components can be exported as Flutter widgets that can be used in your project.\n\nSelect an artboard or component and click the \"Export Widget\" button. If you haven't already done so, you will be prompted to select your Flutter project's directory. The exported widget will be written to a dart file in the directory specified by the Code Path setting (defaults to \"lib\"). You can now instantiate and use that widget in your Flutter project.\n\nUse the \"Export All Widgets\" button to export all artboards and components in the file that do not have \"Include In Export All Widgets\" unchecked.\n\n\n## Exporting Images\nIn order to optimize export, images are not exported with widgets. Only images with a name assigned in the plugin panel can be exported. Select an image and click \"Export Image\", or use the \"Export All Images\" button to export all images with a name to the Image Path.\n\n\n# Notes:\n\n## Unsupported Features:\n- component states (not exposed by API as of XD v42)\n- stroke joins, dashed strokes, stroke position on Rectangles and Ellipses. (Flutter decoration limitation)\n- shadow, image and angular gradient fills, stroke position on shapes (Flutter SVG limitation)\n- super/subscript, text transformation, paragraph spacing, stroked text (Flutter text limitation)\n- object blur, blur brightness (Flutter limitation)\n- panning scroll groups (horizontal \u0026 vertical are supported)\n- masks\n- prototype triggers other than `tap`\n- prototype actions other than `go to artboard` and `go back`\n- gradient backgrounds on artboards\n\n## Known Issues:\n - the panel can \"interrupt\" some actions, such as drawing paths with the pen tool or editing shapes (XD)\n - images that have been flipped (horizontally or vertically) may be exported incorrectly (XD)\n - images in Repeat Grids may scale improperly (XD)\n - color \u0026 character style assets are currently not used in the exported code (XD - see \"Assets Export\" below)\n - issues with text scrolling for statically positioned text fields (Flutter)\n - issues with tap interactions (prototype \u0026 tap callback) with statically positioned elements (Flutter)\n - objects that exceed the width of the display region can cause unexpected results (Flutter)\n - radial gradients don't always map 100% accurately in shapes\n\n## Shapes vs Rectangles \u0026 Ellipses\nRectangles \u0026 Ellipses are exported as Flutter Container primitives, and do not support some stroke options. Other vector shapes are exported as SVG and rendered to a canvas via the `flutter_svg` package, which prevents support for shadows or image fills.\n\n\n## Combine Shapes\nEnabling the `Combine Shapes` option on a Group will aggressively combine any shapes, including rectangles \u0026 ellipses, and shapes in sub groups. This is useful for reducing a complex vector drawing into a single SVG string. For best results, disable responsive resize on the group and any subgroups.\n\nWhen not enabled, vector shapes (other than rectangles \u0026 ellipses) in adjacent layers within non-responsive groups will still be combined.\n\n\n## Components\nThe panel will display a notice when selecting components, or children of components that are not the \"master\" component. This is to work around limitations with accessing and modifying master components. Press Cmd/Ctrl-Shift-K with a component selected to locate the master.\n\n\n## Multi-select\nThe panel will display a notice when selecting multiple elements. We would like to support multi-select fully in a future release.\n\n\n## Text\nText rendering is generally similar, but not identical between Flutter and XD. Expect to see minor differences in positioning and rendering.\n\nLine height is a multiplier in Flutter, and is calculated per line based on the largest text in the line. In XD it is a fixed value for all lines in a field. This may result in significant differences when displaying multiline text having multiple text sizes.\n\nText lines tend to render slightly longer in Flutter, which can lead to character or words wrapping unexpectedly (ex. the last character in a label might not display). The plugin automatically increases the width of auto-sized text in static layouts to minimize this issue, but in responsive layouts it prioritizes maintaining the exact layout. This can be addressed by using text elements set to \"fixed size\" in XD, and adding a few extra pixels of width to accommodate Flutter rendering differences.\n\n\n## Fonts\nThe plugin currently relies on users to manually assign the names of the fonts that will be used in Flutter, and set up those fonts as appropriate.\n\nIt will generate warnings on export if any fonts are not defined in the `pubspec.yaml` file for the project.\n\n\n## Assets Export\nColor \u0026 character style assets (ie. from the XD Assets panel) are optionally exported as a class of static properties which can be used in your application. Only assets that have been given a name are included.\n\nCurrently these assets are not used in the exported widgets due to limitations in how Adobe XD implements assets. Current assets simply associate a name with a value, which means that any use of that value in the design file gets associated with the the name, often incorrectly.\n\n\n## Images\nAn `Image Export Name` must be provided to export an image. If you provide the same name for different images, they will be assumed to be identical.\n\nTo speed up export, the plugin currently relies on the user to export images when appropriate.\n\n\n## Responsive Layout\nThe plugin supports outputting XD's \"Responsive Resize\" layout. Where possible, it will translate these into common Flutter layout Widgets, such as `Center`, `Padding`, and `Align`. It will fall back to using the custom `Pinned` layout widget included in the `adobe_xd` package as appropriate.\n\n\n## Resolution Aware Images\nIf the `Resolution Aware Images` setting is enabled, the plugin will find the largest instance of that image in the file (based on the display size), and use its dimensions (adjusted for aspect ratio) as the x1 image size. If the original image source is large enough, it will export x2 and x3 versions.\n\nIf it is disabled, the plugin exports all images at their natural size (the size of the original asset).\n\n\n## Opacity\nFor optimization reasons we currently multiply opacity against leaf node colors / fills. This means that the output does not pre-composite elements like groups before applying opacity (opacity is applied to each child of the group individually). The option to enable pre-compositing could be added in a future release.\n\n\n## Blend Modes\nBlend modes are currently exported as a custom BlendMask widget which composites its child to the scene with the specified blend mode and opacity. This is enabled on all widgets whose blend mode is not `pass-through`. Note that using blend modes may negatively impact your application's performance.\n\n\n## Visibility\nThe plugin currently ignores any hidden elements (ex. a hidden Component will not be exported in 'Export All Widgets').\n\n\n## Parameters\nParameters are named values that are exposed on the containing widget as a constructor parameter. This allows you to have multiple instances of the same widget showing different values (text, colors, images, etc). Parameters on an element are assigned to the nearest widget ancestor (Artboard or Component). \n\n**Example 1:** If a named \"color\" parameter is added to a Text field inside a \"button\" Component on an Artboard, then that parameter would be exposed on the exported button widget, but not on the artboard widget.\n\n**Example 2:** If a tap callback was added to the button Component directly, the nearest widget ancestor would be the button itself, and it would be added there.\n\n\n## Tap Callbacks\nSimilar to parameters, tap callbacks provide a mechanism to add functionality to a widget without modifying its exported code. A tap callback is effectively a parameter to which a callback method can be assigned, that will be called when a user clicks or taps that element. Tap callbacks follow the same rules as parameters.\n\nFor example, adding a tap callback named `onTapMyGroup` to a Group in an Artboard, would allow you to assign a callback handler to `onTapMyGroup` in the Artboard widget's constructor, which would be called when the user taps that group in the running app.\n\n\n## Group Export Settings\nBy default Groups are exported as inline code, but this can be changed to generate better organized code, or expose hooks for manipulating exported widgets without having to edit the exported code.\n\n### Export as build method\nThis will encapsulate the build code for the group into a named method on the containing widget. This can help reduce excessive nesting, improve code organization, and provide hooks for subclasses to override or extend.\n\n### Replace with builder param\nThis adds a builder parameter to the containing widget, and inserts it in place of the Group. This allows the exported widget to have completely arbitrary content injected at runtime.\n\n### Replace with custom code\nThe specified code will be exported in the Group's place, providing a mechanism to include arbitrary code in the output. It is generally recommended to favor using a builder param whenever possible to avoid large amounts of code within your design files.\n\nThere are two special \"tags\" that can be used in your custom code to inject the Group's generated code, or a list of its children. This is currently an experimental feature and may be changed or removed entirely in the future. **Test, and provide feedback, but use at your own risk!**\n\n- `\u003cTHIS{'decorators':false}\u003e` - injects the full generated code for this group, optionally omitting decorators.\n- `\u003cCHILDREN{'layout':'size|none'}\u003e` - injects a list of the Group's children.\n\nTag parameters (ie. in `{...}`) are in JSON format and can be omitted (ex. `\u003cTHIS\u003e`).\n\n\n## Repeat Grid\nOn export, an item \"template\" is generated that is used to render each of the children of the grid. In order to support more extensive customization of individual grid elements, any components in the template are flattened into it.\n\nExport for repeat grid does not support partial columns, since this is a rare use case, and causes significant challenges for responsiveness. This may be revisited in the future.\n\nTo make items in a grid responsive, group everything in the item, and enable \"responsive resize\" for the group. This is an experimental feature and may have unexpected results in some cases.\n\n### Data Parameters\nA data [parameter](#Parameters) allows the grid's content to be set in the containing widget's constructor. Note that the default value for a data parameter is an empty list (ie. the exported grid will be empty by default).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdobeXD%2Fxd-to-flutter-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAdobeXD%2Fxd-to-flutter-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdobeXD%2Fxd-to-flutter-plugin/lists"}