Need advice on Figma to Vue conversion workflow
I created a web app mockup in Figma and exported the CSS properties. Now I’m working on converting this design into a Vue.js 2 component. I followed BEM naming conventions and basically copied all the Figma CSS into my component classes.
Current implementation approach
Here’s what I built:
<template>
<div class="dashboard">
<div class="dashboard__header"></div>
<div class="dashboard__title">Inventory</div>
<div class="dashboard__content-wrapper"></div>
<div class="dashboard__content-header"></div>
<div class="dashboard__header-category">Category</div>
<div class="dashboard__header-quantity">Quantity</div>
</div>
</template>
<script>
export default {
name: 'InventoryDashboard',
}
</script>
<style scoped>
.dashboard__title {
position: absolute;
width: 180px;
height: 40px;
left: 5px;
top: 280px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
line-height: 48px;
display: flex;
align-items: center;
text-align: center;
color: #2c2c2c;
}
.dashboard__header {
position: absolute;
width: 380px;
height: 45px;
left: -5px;
top: 275px;
background: #7a6b4f;
border-radius: 0px 180px 12px 0px;
}
.dashboard__header-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: #2c2c2c;
}
.dashboard__content-wrapper {
position: absolute;
width: 375px;
height: 350px;
left: -5px;
top: 315px;
background: #b8a788;
border: 4px solid #2f3a37;
border-radius: 0px 0px 18px 0px;
}
</style>
I’m happy that the final result matches my Figma design perfectly. But as someone who usually works on backend stuff, I’m wondering if this approach is correct. Am I doing something wrong by using only div elements with absolute positioning? Should I be using more semantic HTML elements instead? What are the industry standards for this kind of design-to-code conversion process?