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 your procurement team will ask, answered before the call
- Your paper or oursNDA, data-processing agreement, master agreement and statement of work.
- Named peopleThe statement of work names the delivery lead and the escalation contact above them.
- Your code, your accountsWork is committed to your repository and assigned to you on final payment.
- Local sales teamsSales teams in the UAE and Singapore; engineering in Rajkot and Ahmedabad, India.
What Vue component work costs
The leading digits of each figure are shown here. A person reads your request and sends the full rate card, a personal calculator or a written quotation.
Rate bands
Full rate follows an approved request
| Role | Hourly | Monthly* |
|---|---|---|
| Frontend / WordPress | $3? | $4,8?? |
| Backend / API | $3? | $5,1?? |
| Full-stack | $3? | $5,6?? |
| Mobile (React Native / Flutter) | $3? | $5,6?? |
| DevOps / Cloud | $4? | $6,4?? |
| AI / Automation engineer | $4? | $7,2?? |
| QA / Test engineer | $2? | $4,0?? |
| UI / UX design | $2? | $4,4?? |
*160 hours a month, full time, in US dollars. A question mark stands for a digit sent on request. Rates depend on seniority, contract length and overlap hours. Hosting and third-party costs are separate.
See full pricing
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.