Best approach for transforming Figma designs into Vue components

Other Questions Figma
1

I’ve been working on converting my Figma mockups into Vue.js components and I’m wondering if I’m doing it the right way. I created a basic layout in Figma and exported the CSS properties for each element. Now I’m trying to build my first Vue component based on this design.

I decided to use BEM methodology to organize my CSS classes, which has been really helpful for keeping everything structured. For each design element from Figma, I created a corresponding CSS class and wrapped it in a div element.

Here’s what my component looks like:

<template>
  <div class="wrapper">
    <div class="inventory__banner"></div>
    <div class="inventory__title">Inventory</div>
    <div class="inventory__content"></div>
    <div class="inventory__list-header"></div>
    <div class="inventory__column-category">Category</div>
    <div class="inventory__column-quantity">Quantity</div>
  </div>
</template>

<script>
export default {
  name: 'InventoryPanel',
}
</script>

<style scoped>
.inventory__title {
  position: absolute;
  width: 180px;
  height: 40px;
  left: 5px;
  top: 280px;
  
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 48px;
  color: #222222;
}

.inventory__banner {
  position: absolute;
  width: 380px;
  height: 45px;
  left: -5px;
  top: 275px;
  background: #7A6B4D;
  border-radius: 5px 180px 10px 0px;
}

.inventory__column-quantity {
  position: absolute;
  width: 95px;
  height: 25px;
  left: 250px;
  top: 320px;
  
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #333333;
}

.inventory__column-category {
  position: absolute;
  width: 80px;
  height: 22px;
  left: 15px;
  top: 320px;
  
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #333333;
}

.inventory__list-header {
  position: absolute;
  width: 370px;
  height: 40px;
  left: 0px;
  top: 315px;
  background: linear-gradient(180deg, rgba(40, 35, 20, 0.3) 65%, rgba(50, 60, 55, 0) 100%);
}

.inventory__content {
  position: absolute;
  width: 375px;
  height: 350px;
  left: -5px;
  top: 310px;
  
  background: #B8A582;
  border: 4px solid #2F3A36;
  border-radius: 0px 0px 15px 0px;
}
</style>

The output matches my Figma design perfectly, which is great. But as someone who usually works on backend stuff, I’m not sure if this approach is correct. I feel like just using div elements for everything might not be the best practice.

What’s the proper way to handle this kind of design conversion? Should I be using different HTML elements or is this div-heavy approach actually fine for Vue components?

2

Been through this same backend-to-frontend transition, and while your component renders fine, there are structural issues that’ll bite you later. The heavy absolute positioning is the main problem - it creates a fragile layout that breaks when content changes or screen sizes vary. Don’t copy Figma’s positioning directly. Treat it as a visual reference, not a blueprint. Your inventory component needs semantic HTML - use <header> for the banner and <table> for the actual inventory data instead of divs with column classes. BEM is good, but combine it with modern CSS layout techniques. I’d restructure this with CSS Grid for the main layout and proper table markup for the data sections. Much more maintainable and flexible when you add dynamic content or make responsive adjustments.

3

I’ve done similar figma-to-vue conversions and honestly the biggest mistake I made early on was copying the exact positioning from figma. You’re building a static layout that won’t scale or adapt. Instead of absolute positioning everything, break this down into logical components first - separate the banner, title, and table sections into their own child components. For the CSS, use CSS Grid for the overall layout and flexbox for the table headers. Keep the BEM methodology though, that’s solid. What really helped me was thinking about how the component should behave with different content lengths rather than just matching figma pixel-perfect. Your current approach works but it’ll be painful to maintain once you add real data and need responsiveness.

4

your approach isn’t bad, but those absolute positions will cause headaches when you need responsive design. switch to flexbox or grid instead of hardcoding pixels everywhere. also, use semantic html like <header> and <main> instead of just divs - it’s way better for accessibility.

5

the absolute positioning is your main problem - it’ll break with dynamic content or on mobile. figma exports are just reference, not production code. use tags for inventory sections and proper

markup for your data instead of divs with column classes.