Adobe XD to Flutter(UI/UX Support). How to create a widget from Adobe XD using XD to Flutter Plugin?

The following article gives you a idea about how to utilize adobe xd to build and export flutter widgets to your project.

Okay, let us understand what is adobe xd?

Adobe XD (also known as Adobe Experience Design) is a vector-based user experience tool for web apps and mobile apps, developed and published by Adobe Inc. It is available for macOS and Windows.

Adobe XD has following features,

Repeat grid: Helps creating a grid of repeating items such as lists, and photo galleries.
Prototype and animation: Creates animated prototypes through linking artboards. These prototypes can be previewed on supported mobile devices.

Interoperability: XD supports and can open files from Illustrator, Photoshop, Photoshop Sketch, and After Effects. In addition to the Adobe Creative Cloud, XD can also connect to other tools and services such as Slack and Microsoft Teams to collaborate. XD is also able to auto-adjust and move smoothly from macOS to Windows. For security, prototypes can be sent with password protection to ensure full disclosure.

Voice design: Apps can be designed using voice commands. In addition, what users create for smart assistants can be previewed as well.

Components: Users can create components (previously known as symbols) to create logos, buttons and other assets for reuse. Their appearance can change with the context where they are used.

Responsive resize: Responsive resize automatically adjusts and sizes pictures and other objects on the artboards. This allows the user to have their content automatically adjusted for different screens for different sized platforms such as mobile phones and PCs.

Plugins: XD is compatible with custom plugins that add additional features and uses. Plugins range from design to functionality, automation and animation.

Now let us see how does it work for flutter,

Step 1:

Install Adobe XD from the following link.

XD Individual Pricing | Free Starter Plan Info | Adobe XD

Initially install starter to experiment and learn, later can be subscribed based on the requirement.

Once downloaded install the application.

Installing window

Step 2:

Select screen size based on your requirement for designing and prototyping.

Will be selecting iphone12 Pro Max(428 * 926 px)

Once you select the required screen size following screen will be displayed.

click on Plugins -> Discover Plugins -> install XD to Flutter official plugin.

XD to Flutter plugin

Step 3:

By default, you have the following options in adobe XD to design.

Default Editing Options

You can edit the deployed shapes,text etc. from the following window shown below.

Edit option for deployed shapes,text etc.

Step 4:

Now let’s discuss what needs to be done in the flutter project.

Add the following dependency in pubspec.yaml.

adobe_xd: ^2.0.0+1

Create assets/images folder under lib also mention the same under pubspec.yaml

assets:
  - assets/images/

Step 5:

Coming to Adobe XD, after making some changes to the project.

Add the project folder to Adobe XD before exporting widget as shown below.

Add the project path, in addition to that mention assets folder under CODE PATH and IMAGE PATH as shown.

Step 6:

Click on Export All Widgets to export the created design into widget tree for flutter project.

Exported widget design

You will see the created widget tree under the lib folder as mentioned in code path, you can change the same as per your convenience.

Please refer below code created from XD to Flutter plugin.

XDiPhone12ProMax1.dart

import 'package:flutter/material.dart';
import 'package:adobe_xd/pinned.dart';
import 'dart:ui' as ui;

class XDiPhone12ProMax1 extends StatelessWidget {
  XDiPhone12ProMax1({
    Key key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffffffff),
      body: Stack(
        children: <Widget>[
          Pinned.fromPins(
            Pin(start: 86.0, end: 86.0),
            Pin(size: 316.0, middle: 0.5),
            child: Container(
              decoration: BoxDecoration(
                color: const Color(0xff127961),
                border: Border.all(width: 1.0, color: const Color(0xff707070)),
              ),
            ),
          ),
          Pinned.fromPins(
            Pin(size: 105.0, middle: 0.4985),
            Pin(size: 98.0, middle: 0.3043),
            child: ClipOval(
              child: BackdropFilter(
                filter: ui.ImageFilter.blur(sigmaX: 32.0, sigmaY: 32.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.all(Radius.elliptical(9999.0, 9999.0)),
                    color: Colors.transparent,
                    border:
                        Border.all(width: 1.0, color: const Color(0xff707070)),
                    boxShadow: [
                      BoxShadow(
                        color: const Color(0x290c0b0b),
                        offset: Offset(0, 3),
                        blurRadius: 6,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          Pinned.fromPins(
            Pin(size: 100.0, middle: 0.5015),
            Pin(size: 27.0, middle: 0.5),
            child: Text(
              'Some App',
              style: TextStyle(
                fontFamily: 'Segoe UI',
                fontSize: 20,
                color: Colors.white,//Changed manually to white
                fontWeight: FontWeight.w700,
              ),
              textAlign: TextAlign.left,
            ),
          ),
        ],
      ),
    );
  }
}

Changed the text color to Colors.white as it was not visible with specified color from adobe xd.

Please refer to the image for clarity.

Image of built widget from Android Device.

References

Adobe XD - Wikipedia

adobe_xd | Flutter Package

Thank You…!!!