Designer-developer handoff met Hyvä UI

Designer-developer handoff met Hyvä UI

Drie van de vijf handoff-problemen die wij bij klanten zien, ontstaan doordat Figma en code twee aparte werelden zijn. Hyvä UI maakt die werelden één: hetzelfde component in Figma is hetzelfde component in code. Dat klinkt eenvoudig, maar de impact op doorlooptijd en miscommunicatie is groot.

Wat is Hyvä UI (en wat niet)?

Hyvä UI is de officiële design system + componentbibliotheek van Hyvä. Gebouwd met Tailwind CSS en Alpine.js, HTML-first, minimale JavaScript.

Belangrijk: Hyvä UI is niet hetzelfde als een Hyvä theme. Een Hyvä theme is de volledige Magento 2 frontend die Luma (RequireJS/jQuery/Knockout) vervangt. Hyvä UI is een losse componentbibliotheek. Je kunt 'm gebruiken op een Hyvä theme, maar ook in Laravel, headless setups of statische sites.

De bibliotheek bevat componenten zoals:

• Buttons, forms, modals
• Dropdowns, accordions, tabs
• Navigatie en product cards

Prijs: eenmalig circa 250 euro, per-ontwikkelaar/projectlicentie, geen abonnement.

Het klassieke handoff-probleem

Een designer bouwt een modal in Figma. Twintig varianten, vier staten, precieze spacing. De developer kijkt ernaar en begint opnieuw in code. Andere naamgeving, andere spacing-logica, andere breakpoints.

Resultaat: review-rondes. Feedback. Aanpassingen. Nieuwe review. Twee weken extra.

Dit is geen mensenfout. Het is een structuurprobleem. Figma en code spreken een andere taal — tenzij je ze koppelt via gedeelde design tokens en componenten.

Hoe Hyvä UI de kloof dicht

Hyvä UI levert een Figma Community-bestand met design tokens en componenten die 1-op-1 matchen met de code. Dezelfde naamgeving, dezelfde structuur, dezelfde waarden.

Dat heeft drie directe effecten:

Als een designer zegt "gebruik de modal-overlay component", weet de developer precies wat dat is in code. Geen vertaalslag nodig.

De design tokens in Figma zijn de Tailwind-klassen in code. text-primary, gap-4, rounded-lg — wat de designer kiest in Figma, is wat de developer typt in HTML.

Een accordion in Hyvä UI werkt op een vaste manier. De developer hoeft niet te vragen: "hoe moet dit openklappen?" Dat staat al vast in de bibliotheek.

Hoe dit eruitziet in de praktijk

Een typisch scenario bij een team met aparte design- en dev-rollen:

Wij zien bij klanten dat de eerste handoff na de overstap al 40-50% minder review-rondes kost. Daarna — als het team gewend is aan de componenten — gaat het nog sneller.

Wat je nodig hebt om het te laten werken

Hyvä UI werkt niet vanzelf. Je hebt een team nodig dat de afspraken ook maakt.

Minimale setup:

# Installatie via npm (vereenvoudigd voorbeeld)
npm install @hyva-themes/hyva-ui

# Tailwind config uitbreiden met Hyvä UI tokens
# tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,php}',
    './node_modules/@hyva-themes/hyva-ui/**/*.html',
  ],
  theme: {
    extend: {
      // Hyvä UI tokens worden hier ingeladen
    },
  },
}

Afspraken die je naast de tooling nodig hebt:

• Designer gebruikt alleen componenten uit de Hyvä UI Figma-bibliotheek voor standaard UI-elementen.
• Nieuwe componenten worden altijd eerst als code gebouwd, dan in Figma toegevoegd — niet andersom.
• Dev-team spreekt af: geen custom CSS op Hyvä UI-componenten zonder overleg.

Zonder die afspraken krijg je alsnog drift tussen Figma en code. De tool lost het probleem niet op als het proces er niet achter zit.

Performance als bijkomend voordeel

Hyvä UI is gebouwd op de performance-filosofie van Hyvä: Alpine.js in plaats van zware JavaScript-frameworks, HTML-first, geen onnodige build-steps.

In de praktijk betekent dat:

• Circa 95% minder JavaScript dan een Luma-gebaseerde setup
• Lighthouse-scores van 95+ zijn haalbaar zonder extra optimalisatiewerk
• Geen RequireJS, geen jQuery, geen Knockout in de component-laag

Voor teams die naast handoff ook snelheidsklachten hebben, pakt Hyvä UI dus twee problemen tegelijk aan.

Framework-agnostisch: ook buiten Magento

Hyvä UI is niet alleen voor Magento 2. De componenten zijn bruikbaar in:

• Laravel (Blade-templates)
• Headless setups met een losse frontend
• Statische sites

Dat betekent dat een team dat zowel Magento- als Laravel-projecten doet, één design system kan onderhouden voor beide.

Wij gebruiken Hyvä UI ook in Laravel-projecten voor klanten die een eigen backoffice of bestelportaal hebben. Hetzelfde Figma-bestand, hetzelfde Tailwind-vocabulaire.

Wanneer Hyvä UI niet de juiste keuze is

Hyvä UI is niet voor iedereen de juiste keuze. Eerlijk is eerlijk.

• Je team bestaat uit één persoon die zowel design als dev doet. Het handoff-probleem bestaat dan niet.
• Je project heeft al een volwassen eigen design system. Twee systemen naast elkaar werkt averechts.
• Je frontend-technologie is React of Vue met eigen component-architectuur. Hyvä UI is HTML/Alpine — dat past niet in een React-app.
• Je project is eenmalig en klein. De investering in het leren kennen van het systeem weegt dan niet op.

• Je team design en development écht scheidt — aparte rollen, aparte verantwoordelijkheden.
• Je meerdere projecten per jaar bouwt met dezelfde tech stack.
• Je op Hyvä, Laravel of vergelijkbare PHP-gebaseerde setups werkt.
• Je bereid bent het Figma-bestand te onderhouden naast de code.

De licentie-vraag

Hyvä UI kost eenmalig circa 250 euro per developer of project — afhankelijk van hoe je licentieert. Geen maandabonnement, geen renewal.

Voor een team van drie developers is dat een eenmalige investering van circa 750 euro. Vergelijk dat met één extra review-ronde op een project van twee developers gedurende twee dagen: dat kost al snel meer.

De terugverdientijd is voor de meeste teams minder dan één project.

Hoe wij handoffs aanpakken bij coding.nl

Wij zijn Hyvä Certified senior developers. We werken zonder projectmanagers — dus een efficiënte handoff is geen nice-to-have maar een vereiste.

Bij projecten met een aparte design-rol stellen we altijd dezelfde vraag: werkt de designer al met het Hyvä UI Figma-bestand? Als het antwoord nee is, beginnen we daar. Niet omdat het verplicht is, maar omdat het de enige manier is om te voorkomen dat de helft van de buildtijd opgaat aan review-rondes over spacing en gedrag.

Wij zien dat teams die dit goed inrichten na twee of drie projecten op een ritme komen waarbij handoff bijna geen friction meer heeft. De designer weet wat mogelijk is, de developer weet wat er verwacht wordt.

Dat is het echte voordeel van een gedeeld design system: niet de tool zelf, maar de gedeelde taal die het creëert.

Conclusie

Designer-developer handoff is in de meeste teams een bron van vertraging en frustratie. Niet door slechte wil, maar door gebrek aan een gedeelde referentie.

Voor teams met aparte design- en dev-rollen die op Hyvä, Laravel of vergelijkbare stacks werken, is de investering snel terugverdiend. Voor solo-developers of React-teams is het minder relevant.

Wil je weten of Hyvä UI past bij jouw projectstack en team? Neem dan contact op via /contact voor een korte Tech Check. We kijken dan mee naar jullie huidige setup en geven een eerlijk advies — zonder verkoopverhaal.