The Beginning of the End for Figma? Building Prototypes with Vue.js as a Designer

by

For years, Figma has been the dominant tool for UI/UX designers. But with AI-assisted coding, powerful UI libraries, and a growing need for real interaction in prototypes, many designers are discovering a faster, more effective approach: building directly in Vue.js. I tried out React too, but overall found Vue much easier to get my head around with its simpler syntax.

I have been LOVING using ChatGPT and GitHub Copilot to build out small prototypes. I having been using Tailwind UI and Tailwind CSS to accelerate building small prototypes. These help with scaffolding and styling. Echarts has been super useful to build out charts, and D3 for experimenting with more custom ways of visualising data.

D3 example of a timeline I’ve been able to put together that’s fully interactive, and honestly faster to put together in code than in Figma:

Why Shift to Code-Based Prototyping?

  1. Speed & Efficiency – AI-powered tools like GitHub Copilot and Cursor autocomplete code, making it faster than manually linking screens in Figma.
  2. Built-in Interactivity – No need to simulate interactions—Vue.js components behave like the real thing.
  3. Better User Testing – Users can interact naturally, rather than guessing what’s clickable.
  4. Direct Developer Collaboration – Learning Tailwind CSS and Vue.js helps bridge the gap between design and development.
  5. Data-Driven Prototypes – With D3.js, designers can create real-time, data-driven visuals instead of static mockups.

A Step-by-Step Guide for Designers Moving Into Vue.js

If you’re a designer with little to no coding experience, here’s a practical roadmap to get started with Vue.js:

1. Start with HTML & CSS (2–3 Days)

You don’t need to become a developer overnight—just get comfortable with structure and styling.

  • What to Learn: Basic HTML structure (div, button, input), CSS properties (flexbox, grid).
  • Quick Wins: Try styling a basic layout with Tailwind CSS—it’s much easier than writing custom CSS.

🛠 Tools to Explore: Tailwind Playground (test Tailwind classes live)

2. Learn Vue.js Basics (1 Week)

Vue.js is designed to be simple and intuitive, making it one of the best frameworks for designers.

What to Learn:

  • Vue components (<template>, <script>, <style>)
  • Props (passing data into components)
  • Event handling (@click, @input)

🛠 Tools to Explore:

3. Use Pre-Built UI Components (2–3 Days)

You don’t have to code everything from scratch. Use libraries like ShadCN, Tailwind UI, or VueUse to speed up development.

What to Try:

  • Install ShadCN for Vue and use buttons, modals, and forms.
  • Build a quick prototype using Tailwind UI components.

4. Make It Interactive with Vue’s Reactivity (3–5 Days)

Vue’s reactivity system lets you create interactive elements without complex logic.

What to Learn:

  • ref() for handling simple state
  • v-if and v-for for conditional rendering
  • watch() and computed() for handling logic

💡 Example: Want to build a button that changes text on click?

<script setup>
import { ref } from 'vue';

const buttonText = ref("Click me!");

function updateText() {
  buttonText.value = "You clicked!";
}
</script>

<template>
  <button @click="updateText" class="px-4 py-2 bg-blue-500 text-white rounded">
    {{ buttonText }}
  </button>
</template>

5. Connect Real Data with D3.js (Optional, 1+ Week)

If you design dashboards, charts, or infographics, D3.js lets you visualize real-time data instead of using static images. Echarts is a great library for off-the-shelf charting. Here’s an example bar chart coded up with echarts and ChatGPT from wealthlytics.com.

What to Learn:

  • In D3 you can bind data to SVG elements
  • Create simple bar charts or line graphs
  • Hook up real-time APIs

🛠 Tools to Explore: Observable (learn D3 interactively)

The Future of Design?

Figma isn’t disappearing, but its role is changing. Instead of being the final stop for UI design, it’s becoming more of a concepting tool, with real interaction happening in code.

For designers willing to explore Vue.js, the benefits are clear:

  • Faster iteration
  • Better user testing
  • Closer collaboration with developers
  • Potential to contribute directly to production

Get stuck in! If you’re stuck, ask ChatGPT!

Leave a comment