Figma to Vue.js
Vue keeps template, script and style for a component in one file. That suits design conversion well: one Figma component, one .vue file, with everything about it in a single place.
We write Vue 3 components from your Figma file using the Composition API and script setup, in TypeScript. Each component is presentational. It receives props, fills slots and emits events, and it knows nothing about your store or your API until you connect it.
Where each part of a design lands in a .vue file
A single-file component has three blocks. The design feeds all of them.
Template
The layer structure, reduced to the elements that carry meaning. Auto layout wrappers that exist only for spacing are dropped in favour of gap and padding.
Props
Variant properties are declared with defineProps as literal types, with defaults that match the default variant in Figma.
Slots
Swappable nested instances become named slots. A card with an optional footer in Figma has a footer slot in Vue.
Emits
Anything the user can do, such as close, select or submit, is declared as an event. Form controls support v-model.
Scoped style
Styles are scoped to the component and read their values from token custom properties, never from hard-coded hex codes.
Transitions
Enter and leave motion drawn in a prototype is built with the Transition component, using the durations the designer specified.
Turning variables into a theme
Tokens are the link between the file and the code. They are worth setting up once and properly.
Export
Figma variables are exported to JSON, keeping collections and modes.
Two layers
Raw values such as blue-600 sit underneath. Purpose names such as surface-accent sit on top. Components use only the purpose names.
Modes
Light, dark or brand modes become alternative value sets, switched by an attribute on the root element.
One source
The same token file can feed Tailwind configuration, plain CSS or a UI kit theme, so the numbers are typed once.
Build from scratch or theme a UI kit?
Write components by hand when
- The design has its own visual language and its own component set.
- Bundle size matters and you need only a handful of components.
- You are building a design system to share across several products.
Theme an existing kit when
- The design was drawn on top of a kit such as Vuetify or PrimeVue.
- The product is an internal tool with many data tables and form controls.
- Complex widgets such as date pickers are needed quickly and the kit already has them.
What we ask the designer to tidy
A short clean-up in Figma saves a long exchange of questions.
- One main component per thing, not copies with small edits
- Layer names that describe content: title, meta, actions
- Optional parts set up as boolean properties
- Spacing taken from variables, not typed by hand
- Long-text and no-data versions of lists and cards
- Focus state drawn for every control
- Breakpoint frames at the widths your users actually have
- Icons exported as SVG with a single colour fill
Vue-specific answers
Do you still write Vue 2 or the Options API?
We can maintain it. New components are written for Vue 3. If you are part way through a migration, tell us which side new work should land on.
Storybook or Histoire?
Storybook by default because most teams know it. Histoire is fine if you already run it.
Will components work in Nuxt?
Yes. They avoid browser-only code during setup, so they render on the server without hydration warnings.
How do we know a component matches the design?
Each story is compared with the Figma component at the agreed sizes, and differences are listed in the merge request for you to accept or reject.
What Vue component work costs
Our rates are published. Pick the role and move the sliders for an indicative budget.
Rate card
| Role | Hourly | Monthly* |
|---|---|---|
| Frontend / WordPress | AED 110 | AED 17,600 |
| Backend / API | AED 118 | AED 18,880 |
| Full-stack | AED 129 | AED 20,640 |
| Mobile (React Native / Flutter) | AED 129 | AED 20,640 |
| DevOps / Cloud | AED 147 | AED 23,520 |
| AI / Automation engineer | AED 165 | AED 26,400 |
| QA / Test engineer | AED 92 | AED 14,720 |
| UI / UX design | AED 103 | AED 16,480 |
*160 hrs/month full-time. Rates are indicative for planning, in UAE dirhams (converted from our US-dollar rates at the fixed peg of 3.6725), before VAT where applicable, and depend on seniority, contract length and timezone overlap. Longer engagements and multi-role teams are discounted — ask.
Tell us what you already have
Say which Vue version, build tool and styling method the project uses, and share the Figma file. We name the developer who would do the work and you can speak to them. We reply within one business day.