How to convert design to Vue.js code4 min read

Anima was created by developers for developers with the goal to optimize programming, by automating the grunt work. Product teams can convert Sketch, Adobe XD, or Figma into HTML, React, and Vue code, and save valuable time.

2 steps to get Vue code from designs

Step 1 – Sync your design

The first step to using Anima is to sync your design. You can either do this yourself or ask the designer on your team to do it, here’s how to sync a design to Anima:

• Get the Anima plugin for your design tool.
• Select “Preview in Browser” → “Sync”

If you want to try a sample Figma file, you can download it here.

Sync a design to Anima

Step 2 – Select an element and get code

In your Anima projects, simply go to Anima’s code mode by clicking on the ‘<>’ icon. Select any element of the design, and you will see the code in the bottom code panel. You can select if you want to get Vue, HTML, or React code.

Pick a design component and get Vue code

What you get in the code

• Code quality: The code has been built by developers for developers, so code quality is our number 1 priority.
• Styleguide: We created a method of generating code that removes repeating colors, text styles, and other CSS properties, they are put into reusable CSS classes and variables.
• Vue code reuse: Repeating elements are detected in the DOM structure and components are automatically extracted.
• Layout: We have optimized the code so that it has CSS Flexbox layout. This means that we merged layers, grouped, or ungrouped them in a way that the end results will be a clean snippet of code.
• Naming: Anima gives meaningful names to components automatically to save you the effort, and you edit it manually.

Developer-friendly Vue code

When you are in code mode, the code-panel will appear at the bottom. All you need to do is select your framework: Vue, HTML, or React (we are working on adding more frameworks).

Developer Preferences: You can select whether you want your code using Class-based components or function-based components. More preferences will be added soon.

Get Vue.js for designs from the code panel in Anima

Copy or test with CodeSandbox

Once you’ve got your code, the next step is to continue on your IDE. All you need to do is copy the code into your IDE, or load it to CodeSandbox. There you can play around with the code and make any changes you need too.

Read this post to learn how to open Vue code in CodeSandbox.

Run the Vue code in CodeSandbox

Overrides

If you want to make changes or edits to the code, you can add CSS properties to any layer. These are what we call overrides.

Overrides: add or make changes to the code

Adding overrides in your IDE

Anima saves your overrides and applies them to design updates as well.

Why is it important?

Running a Vue code usually requires you to set an environment, install node packages, and so on. Anima lets you open the generated code in CodeSandbox. All you need to do is sync your design to Anima and with a click, you can view the generated Vue code, up and running in a pre-configured environment in CodeSandbox. Just imagine how much time this will save you.

Nested components

Anima creates nested components when it generates code. For example, you may see a Card component with a UserImage in it.

There are 3 ways to get a nested component:

1. The designer used symbols in the design to mark a reusable component.
2. Anima has detected a repeating element in the DOM.
3. The developer has marked a layer using the “Mark as Component” checkbox.

We are continuously improving our code

Generating developer-friendly, clean code is at the core of Anima’s mission. Our engineering team works endlessly on improving the code you get on a daily basis.
With that in mind, we are always happy to get your feedback. Send us your thoughts on our code at code@animaapp.com.

Can’t wait to get started?

Welcome aboard! Get started now, save valuable time, and improve your collaboration with your team.

• Sign up to Anima 
• Guides & tutorials: Learn how to create responsive websites, get HTML, React, and Vue code, and so much more.
• Check out Anima’s 101

Stay creative!

❤️ Anima team