We’re back for another tutorial for Adobe XD. Last time, we looked at how to search for and install a plugin called Icons 4 Design. This tutorial will help you continue your workflow by looking at a different plugin. From the get-go, we created wireframes, used our wireframes to build our mockup, then made the mockup into an interactive prototype, and now, you can take your prototypes and convert them to HTML. Yes, you heard right! You could export your work from Adobe XD to HTML and CSS, or even a website in React?
Furthermore, you receive all the code needed to run the prototype, which realistically simulates a live site! And no, this isn’t like the HTML and CSS generators you’ve probably seen before. Anima produces extremely clean code that includes semantic HTML elements and modern CSS features.
Getting Anima, the Plugin
- Let’s get started. You will find plugins in Adobe XD’s main menu.
- Scroll down and select Browse Plugins.
- Your Creative Cloud account will launch with a list of all plugins.
- You can find a few different plugins by entering Prototype to HTML in the search field. The one we want to use is called Anima. Anima will convert your design to code. The possibilities are endless.
- If you are one of my students, see the special promo code below for 50% off
The Anima for Adobe XD converts your XD design to work HTML and CSS code automatically. With Adobe XD and Anima, you can keep your extended team aligned and get websites and landing pages to production faster. Either click on Get or Install. If you are new to the plugins, it will likely say get, and if you have installed it at one time in the past, it will likely say install.
Launch Anima
To launch Anima, go to the main menu and click on Plugins, and scroll down to Anima. In the bottom left-hand corner is an icon that looks like Lego. Click on that to access your plugins. Anima can be accessed with either an email address or a Gmail or Facebook account; just click the option you prefer.
Let’s expand our plugins a bit so you can see exactly what can be done. You can do amazing things to your prototypes, responsive and getting code. Let’s click on the Get Code tab. Here, you can pick either HTML, React or Vue. For those who created a Movie Database in Adobe XD, you could use it as a guide to creating a React website!
Select the Framework – HTML, React or Vue
Select the framework that suits your needs. Take HTML as an example. The first time you click on a framework, Adobe XD will ask you to select a team and a project. Click on save and it will bring you back to the prototype page. Click on the Preview in Browser link to preview the site. The site will open in your browser.
Oops, a pop-up box will open because I didn’t select any artboard. Click on close. Let’s try that again and click on preview in the browser. Pick a team and project and click on preview in the browser again.
View the Code? You Need to Sync the Project
To view the code, sync the project in the top-right corner. Click on the button here. Your control panel will change with additional options such as play, comment and code. If you click on the opening and closing tags or greater or less than symbols <> or code, you should see the HTML or CSS, or by choosing the style guide, you can see the HTML as a flexbox or absolute position.
If you wish to export the code or see the whole site with working code, you will need to upgrade to the pro level. Anima generously gave me a major discount for you that is normally 20%, and at the time of this video, Anima was willing to give us 50% off an annual pro plan. Use this code to get started!
Anima has offered 50% promotion for students and faculty. Please enter the following promo code in the checkout form: STUDENT-PRO-ANNUAL-3944
Hope this plug-in works for you. If you enjoy this tutorial, please like it and subscribe to get more tips and tricks.