Getting Started

To understand this tutorial, you don’t need any existing Fireblade Plugin knowledge, but some Adobe XD basic knowledge.

Before we start the tutorial

We will generate html and css from an Adobe XD design.
Be sure that have the 23 (or above) Adobe XD version installed and 1.1.9 (or above) Fireblade plugin version.
In this tutorial, the design XD file used is Dashboard-UI-Kit-final-2.xd from Adobe Free UI Kits:

What we will do in this tutorial?

In this tutorial, we’ll show how to use Fireblade plugin to convert a login page design from an Adobe XD file to an html/css page with form elements.

Design source

Sign in page artboard from Dashboard-UI-Kit-final-2.xd.

Export result

Sign in page result in html/css with form elements.

What we will see in this tutorial

  • Fireblade plugin setup;
  • Preview and export actions;
  • Fireblade live preview tool;
  • Manage anchors for responsivity;
  • Mark an element to be converted in an html Button, Checkbox and TextInput on export action.