By Caleb Kingston
Artwork by Simona Toader
A
s a web designer working with Adobe XD, we are able to design and prototype pages at lightning speed without having to think about web development. These designs can be very beneficial in helping clients and stakeholders see what the finished website will look like before spending too much time on development. Once the design is complete, how do we make the transition to the development step, and publish designs live on the web?
Not too long ago, developing and publishing websites required skilled and costly developers. Changes, as simple as they may have been, required the help of someone who understood the code and could make changes for the designer. Today, designers have many more tools that give us the ability to publish designs with little to no coding experience, and go from design to published website in a very short time.
In this article, we’re going to talk about some of the useful plugins you can use to quickly export your designs from Adobe XD into HTML and CSS, which can then be used to easily edit or publish those designs as a website. All of these plugins do a great job at exporting, but they each have strengths in different areas, so be sure to read through the details to see which plugin will be best for your next website.
Anima Plugin
Anima is perhaps the best all-around solution for exporting Adobe XD to CSS and HTML. Within the plugin, you have the ability to apply links and also add breakpoints between different artboard sizes so your web page will adapt as the browser resizes. Let’s look at a few features you can find within this Anima plugin.
Adaptive design for different screen sizes
By selecting multiple artboard sizes of the same design, you can apply breakpoints for browsers to automatically adapt between. This can help give your visitors an optimal viewing experience whether they’re browsing on a desktop, tablet, or mobile phone.
Embedded Media
Built right into this plugin, you have the ability to turn any layer into a video, GIF, or Lottie animation and enable settings like auto-looping in videos. Applying media to your site can really enhance your visitors experience and add a lot more interactivity.
Animate your layers
If you really want to add some sizzle to your designs, you can also apply entrance animations to any layer in your design that triggers as you load a page or scroll down to that element. These preset animations include grow, move, blur in, and fade; just to name a few.
Embed Code into your designs
With an Embed Code feature, you can add all kinds of functionality onto your pages from interactive maps, to 3rd party forms and more. Simply copy embed code from any website or service that offers this feature, such as Google Maps, and paste the snippet within the Anima plugin.
Easily create forms
Does your design include a contact or login form? You can easily add functionality to your forms right within the plugin by applying the text field settings and setting the submit button. Once your site is exported, this form will be active and ready to collect submissions without having to use a 3rd party form service.
As you can see with all these built-in features, Anima is a great choice for exporting your designs to HTML and CSS when you want to quickly publish simple websites and landing pages with added functionality.
Web Export Plugin
If you are looking for a solution that gives you more manual control in the code and CSS settings, Web Export might be the plugin for you. In addition to easily exporting HTML and CSS, you can apply styles and classes, integrate with existing libraries, and align layers to respond as you resize your browser.
I would say this is a great option if you are already familiar with HTML and CSS but still want the plugin to do most of the work for you to save you precious time. Let's take a look at a few features you will find in this plugin.
Apply custom settings to each artboard
As you start to export your designs using Web Export, the plugin will give you many options for applying styles and classes to your design, as well as settings for how you want the page to scale and the elements within the page. You can also copy any markup or CSS to apply to any other pages in your development.
Apply custom settings to any element in your design
In addition to applying settings in the artboard level, you can also apply settings like styles, classes, tags, and more, directly to any element in your design. This really gives you all the control you need as a power user to structure web pages in a way that can adopt existing CSS you might already have on your website.
You even have control over the constraints of each element to start to make your web pages fluid when the browser is resized.
Web Export is a bit more of an advanced plugin and as you can see, there are more controls and settings than we might know what to do with; but if you aren't intimidated by all these settings, and know your way around HTML and CSS, you will really appreciate these advanced settings.
I would imagine many designers would use this plugin in conjunction with an already existing site to be able to integrate new pages easily while maintaining the functionality they already have on the site; but if all you are looking for is to quickly get a new website up and running, Anima might still be the better option.
Fireblade
In addition to HTML and CSS, fireblade can also output REACT, LIT-ELEMENT, and REACT-NATIVE files to offer greater support based on the platform you’re developing for. This is the main area where fireblade stands out from the previous alternatives.
Although fireblade doesn’t have some of the out-of-the box widget integrations that Anima has, or the advanced custom settings of Web Export; where fireblade stands out is the additional output formats, and the simple plugin UI for defining responsive parameters. You can easily set alignment constraints to artboards and individual elements to control how your design responds as the browser resizes.
Which plugin is right for you?
As you can see, there are unique advantages to each of these plugins. The question you want to ask yourself is “What is the end goal of my site?”. All of these plugins can be a great option if you want to quickly generate landing pages or smaller informational websites with little functionality, but if you’re working on a project that needs to scale; I would recommend talking to a developer about the platform requirements before selecting your solution.
For simple responsive websites that serve to share business information while utilizing features like a contact form, video embeds, and more; Anima would be my plugin of choice. It’s very simple and can output very professional looking websites fast. The publish features within Anima make it easy to host and publish your website right within your Anima account.
If you’re more familiar with HTML and CSS and want to customize the CSS to fit into existing solutions or you just want to take the code output further, Web Export is a great solution but it will take more time to set the site up correctly.
Fireblade would be my choice if you need support for other languages in addition to HTML and CSS. Going from setup to export is quite simple although there is a limit to what functionality you can integrate within the plugin. You will still need to alter this code to embed things like forms, videos, or make better use of CSS classes.
I hope you found this article useful in choosing the best solution for exporting Adobe XD to HTML and CSS designs. You can find all of these solutions in the XD plugin panel and I would highly encourage you to spend a few minutes with each and output your designs to code to see if the final output meets your publishing needs.
