Adobe XD to Flutter plugin
Few days ago, I read an article talking about best tools for developing a Flutter application in 2021 (January), and Adobe XD to Flutter plugin was one of them.
As I use Adobe XD for designing every application I made, I can define myself as a fan of both Flutter and Adobe XD. So let see what this plugin is capable of, to understand if the plugin is a good tool !
The design to be exported can be found here: https://github.com/GONZALEZD/flutter_demos/blob/main/adobe_xd_plugin/design/Flutter_plugin_tests.xd
Prerequisites
Create and setup a new flutter project:
- In a terminal (console), create a new flutter project: ‘flutter create [project_name]’ command
- Then, in pubspec.yaml, add adobe_xd dependency (
dependencies:)
adobe_xd: ^1.0.0+1
Install (or update) ‘XD to Flutter’ plugin in the latest version of Adobe XD:
- Go to Plugins > Browse plugins…
- In Discover section, click on the magnifying glasses and search for ‘flutter’
- Install ‘XD to Flutter’ plugin
About Adobe XD
If you don’t know this tool yet, let’s have a little overview about Adobe XD. This software let you design web and mobile applications very easily, by creating artboards (application screens) using basic shapes (rectangle, circle, triangle, lines, path and text).
For each shape, you can define its “texture”:
- shape transformation, that let you define size, position and rotation
- shape background color: single, gradient and radial colors
- border color and rounded corners
- shadow color and offset
- and other appearance parameters such as opacity and color blending mode
Coupled to shapes, you have powerful design tools, for a set of components, that let you :
- group your shapes together
- define the order to draw, as for example bring to front and send to back
- define advanced interactions between them, such as draw intersection or subtraction
- distribute them along X or Y axis, align them, define how your components behave on resize
Finally, you can animate your artboards by defining interactions between them, defining how the animation is triggered, the animation properties (curve and duration), and its action (move to new artboard, go to previous one, et cetera…).
About Flutter
In Flutter world, everything is a widget. It’s a kind of a slogan for that technology. As a developer, you define your UI using widgets (most of the time), defining a hierarchical tree of widgets. A widget can describe:
- UI component properties, such as Padding, SizedBox, ColoredBox, DecoratedBox, Text,… And the most convenient one, the Container widget, grouping most used properties together.
- a way to layout a set of widgets, such as Row, Column, Stack, Positioned, Align, Center, …
- UI Interactions, such as GestureDetector, AbsorbPointer, Animations, Transitions,…
- complex components also, such as Button, AppBar, Date & Time Pickers, ListView, Scaffold, …
Of course, this paragraph is a little overview about Flutter capabilities, but as you may have understood, there is similarities with Adobe XD components.
Adobe XD and Flutter similarities
Without any knowledge about how the plugin has been developed, we can imagine relation between the design world of Adobe XD and the development world provided by Flutter.
Adobe XD Text → Flutter Text
This relation between those two features can’t be unseen. In Flutter, Text widget let you define what will be written, and its TextStyle property defines how (color, style, fontFamily, fontSize, fontWeight, and so on…). Only Size and position properties from Adobe XD tool are missing, but we can imagine the usage of SizedBox or ConstrainedBox for sizing texts, and the usage of Stack widget to set a specific position. To rotate, a Transform widget may do the trick.
At this stage of my study, I don’t know if the plugin transcribes the size and position properties, as it can makes the design not responsive to other screen dimensions.
Adobe XD Rectangle tool → Flutter Container
This is very straightforward, as the Rectangle tool define a position, a size, a color, a corners and a border. On Flutter size, it’s represented by the Container widget, defining size and a decoration, describing the widget’s color, corners, and border. What about the position property ? Hard to tell, because as developer we are encouraged to use layout widgets (center, align, row, column, …) instead of the Stack widget (that allow its children to define a concrete position).
Adobe XD group → Flutter Stack
We can imagine that the simplest way to transcribe the group feature in Flutter can be done using the tack widget.
I have the feeling that everything will be grouped in Stacks, as I don’t know how the plugin can make the relation between absolute layout (from Adobe XD) and relative layout (from Flutter).
Adobe XD line and pen → Flutter CustomPaint
I’m not sure, but It’s pretty much the same things. In Flutter, using a CustomPaint let you have access to the Canvas instance, on which you can draw lines, oval, circle, rectangle, and path. Basic shapes in other terms. Added to that developer can define how to draw shapes.
Later, I observed that the plugin has a dependency to flutter_svg library, suggesting that Adobe XD paths produced by the pen tool are converted to SVG data.
Adobe XD Component → Flutter Stateless Widget ?
In Adobe XD, you can define a component, kind of template you can reuse multiple times in your design. For example, you can define a list cell component, and create multiple instances of it to design a list. I also use it for creating my Icons.
In Flutter, this feature may refers to a developer specific widget, as a class inheriting from StatelessWidget or StatefulWidget.
At this moment, I don’t know how interactions have been coded. But I imagine each component transcribed to a single file, with a single StatelessWidget or StatefulWidget in it.
That’s some guesses, let’s see it through an example
Design Example
Our example is composed of two screens, the MainPage and the ListPage. The home page will be MainPage, containing a navigation bar, and a button to move to the ListPage. This last artboard contains a list of elements, title and item cells; and a navigation bar with a back button. The item tile also display an icon, a kind of fish, as a component grouping paths (created with the pen tool).
Pretty much all elements composing artboards (title and item cells, icon, navigation bar, back button) have been defined as component. You will understand why during the generated code analysis.
I also implemented button actions, in order to navigate between those two artboards.
We can now export our design into an already created Flutter project.
Go to Plugins menu, then choose XD to Flutter, and finally UI Panel
You will be able to export widgets and images by clicking on corresponding buttons at the bottom of the UI Panel.
The first time, you will have to define the destination path for images and widgets.
Code static analysis
Let’s have an overview about generated code. First of all, we can see that images are exported, and we have a file for each component, which is great as more maintainable than a unique dart file.
But it doesn’t respect dart convention, where filenames must be lowercased. Not a big deal, but it can be annoying if you want to export widgets frequently.
I also appreciate that defined colors in Adobe XD are exported. The only lack is that these colors are unused. Maybe a “work in progress” feature ?
Concerning widgets, we have StatelessWidgets composed of Stacks and Pinned (Adobe XD library widget). The Pinned widget is very interesting, because it’s more than a composition of SizedBox, ConstrainedBox and Container widgets. We can see fixedHeight and fixWidth, that I may have to adjust into the Adobe XD artboard in order to make the design responsive.
Pinned.fromSize(
bounds: Rect.fromLTWH(21.0, 28.0, 230.0, 28.0),
size: Size(374.0, 83.0),
pinLeft: true,
fixedWidth: true,
fixedHeight: true,
child: Text(
'Listview title example',
style: TextStyle(
fontFamily: 'Helvetica Neue',
fontSize: 24,
color: const Color(0xffffffff),
),
textAlign: TextAlign.left,
),
),Regarding custom shapes, using the pen tool in Adobe XD, they are converted into SVG Strings, that will be drawn using SVGPicture widget, coming from the flutter svg library.
Good news about interactions. They are defined using the PageLink widget (widget coming from adobe_xd library), that wrap the target widget.
Pinned.fromSize(
bounds: Rect.fromLTWH(6.0, 0.0, 60.0, 73.0),
size: Size(375.0, 812.0),
pinLeft: true,
fixedWidth: true,
fixedHeight: true,
child:
// Adobe XD layer: 'My Back Button' (component)
PageLink(
links: [
PageLinkInfo(),
],
child: MyBackButton(),
),
),I think this is a very good point, as it makes it easily understandable and maintainable.
What about text in widgets ? As expected, they are not input parameters of StatelessWidgets, but I expected to be grouped in a single file for strings internationalization purpose (i18n).
child: Text(
'Listview title example',
style: TextStyle(
fontFamily: 'Helvetica Neue',
fontSize: 24,
color: const Color(0xffffffff),
),
textAlign: TextAlign.left,
),Also, we can see Text widget uses the font family defined in Adobe XD. So, to make it works properly, we have to add the font ‘Helvetica Neue’ into the flutter project.
Consequently, in pubspec.yaml, I defined what is ‘Helvetica Neue’ font:
fonts:
- family: Helvetica Neue
fonts:
- asset: assets/HelveticaNeue.ttcAnd of course I added HelveticaNeue.ttc font file into my assets directory.
Demonstration
The code is pretty much understandable, organized and even if there is position and sizes for every widgets, we can imagine that underneath, a complex mechanism handle that properly.
After building the application, we obtain this result below:
We can see that first page looks great, even if we design it with a iPhone 11 Pro artboard, and testing it on an iPhone SE. These two targets don’t have same dimensions, to highlight the responsive design effectiveness.
Added to that, interactions are working correctly.
The main issue is on the second page, that should display a list of elements. We cannot scroll on it, because nothing are grouping cells together. I tried the scroll group feature (in Adobe XD), but this component is not exported into a flutter widget. That’s the main result difference between Adobe XD preview and the Flutter project.
Conclusion
Even if the Adobe XD world and Flutter one are pretty similar, I understand the difficulties to make it works. In Adobe XD, every component are positioned in an absolute way (X,Y coordinates, width, height), whereas Flutter encourage relative positions (Align and Center widgets, Row, Column,…).
Added to that, there is no custom properties in Adobe XD for defining specific fields in a component, like cell’s title or cell’s icon. Therefore, exported widgets don’t have any input parameter.
Also, there is no way to make ourselves the links between Adobe XD components and Flutter widgets. It results that I have a MyAppBar widget instead of using the Flutter AppBar widget.
To conclude, I’m mitigated about the utility of that plugin.
On one hand, this is a great tool to export our very first design on specific components. Especially, when I create a new application I always use Adobe XD to group my ideas into a single working design, before writing any line of code. But with some drawbacks: created widgets are not using Flutter basic widgets (Center, Align, ListView, AppBar, …), and some rework must be done (create input parameters for example).
Also, if you plan to export your design into your flutter application, you will have to use Adobe XD carefully. Each widget must be a component, configure your texts to remove Fixed width (avoid truncated texts in Flutter widget). It can lead to a significant lost of time.
On the other hand, as you will need to rework generated code, I’m not convinced that you can use it to make a concrete demonstration. Especially Adobe XD already have a feature called preview, that let you (or your clients) imagine how the application will be.
I can see how powerful this plugin is, but I don’t know what advantages you get to use it.
As always, you will be able to find source code and adobe design used for this article here:
