Fireblade
Search…
Introduction
This page is an overview of the Fireblade Plugin documentation and related resources.
Do you want to know what has been implemented recently and what's new in the next version of Fireblade? Access the changelog.
Fireblade is a plugin that generates code from Adobe XD designs.
Fireblade has been thinking of increasing development productivity by shortening the path between the idea and the end result.
The central goal is that from the design elements of a prototype it is possible to generates components UI Code or single pages, eliminating many hours of coding.
Supported Code Formats:
- HTML - Export a file (.html) based on design;
- CSS - Export a file (.css) based on design;
- REACT - Export a file (.jsx) based on design;
- LIT-ELEMENT - Export a file (.js) based on design;
- REACT-NATIVE - Export a file (.js) based on design.
Main Features:
- Allows you to customize responsive alignment;
- Line, Path, Boolean Group, Polygon, and Ellipse are exported as SVG;
- Images are exported as PNG;
- React Router Support;
- Custom props bind with text and style elements are supported when exporting to React, LitElement, and React Native formats;
- Supported HTML Elements: Button, Checkbox, Radio, Radio Group, TextInput and Slot;
- Allows embedding fonts for export;
Responsive Alignment
Fireblade also allows you to adjust responsive alignment of the elements of a selected design, so when exported, the elements will fit the browser dimensions.
The key to responsive alignment is the anchor alignment panel. In Adobe XD, dimensions and spaces between elements are defined based on the fixed size of the artboard, but there are many possibilities with screen size on a browser, and on different smartphones running the future application. But with the Fireblade plugin you can manipulate the anchors so the design can adapt to the device.
Responsive alignment anchors.
Graphic accuracy
One of the great virtues of the Fireblade plugin is that it supports all Adobe XD shapes (rectangle, ellipse, line, path, polygon, boolean group and text) for optimal graphical accuracy.
The quality of content generation can be explained by the treatment given to each element. Some of them have pathData (code that defines shapes), such as ellipse, line, polygon and boolean group. Fireblade uses pathData to export them as SVG, including supporting filters such as transparency, borders or rotation.
Fireblade graphic accuracy.
Another important point and of immense complexity is the treatment given to the text element. Fireblade supports rotated text and text with multiple styles in the same block. One of the highlights is the ability to embed fonts. Fireblade allows that the font file be selected and it takes care of linking and exporting it with the assets generated on export.
Assets accuracy.
Editable Properties
You can make visual changes that only reflect the exported result and do not affect the original design in Adobe XD. Edits are saved in the metadata of the element itself, but the plugin only uses them at export time.
Props panel.
Basic Interface Elements
Fireblade supports the following interface elements: Button, Link, Checkbox, Radio, TextInput, Radio Group, List and Slot.
In Adobe XD, they can be exported as the basic interface element: Group, Component (SymbolInstance) and RepeatGrid. The latter just generates a list component.
Basic elements.
Button and Link elements support states like default, hover and active. For Checkbox and Radio, the states are default, hover and checked.
Export to React, React Native and Lit Element supports the creation of dynamic properties.
The purpose of the Fireblade plugin is to create decoupled UI components, such as UIs to be consumed and not directly changed.
Create custom properties and link them with the graphic properties of your design. You can dynamically change properties such as text content and alignment anchors.
Dynamic property creation.
Style properties are not left out and it is possible to dynamically change properties such as background colors, margins and padding.
Dynamic style property.
Fireblade Live Preview Tool
Live Preview is a tool that speeds up the development process, avoids excessive file operations where the plug-in generates content to verify the result.
When executing the preview function, Fireblade follows almost the same steps as the export function, but in the end, does not generate content in any folder, it only passes all content to the Fireblade Live Preview by WebSocket tool that displays it.
Live preview tool in action.
Last modified 2yr ago