Hyvä UI als design system in Figma

Hyvä UI als design system in Figma

Design en code die niet op elkaar aansluiten kosten gemiddeld 30% van je buildfase aan correctierondes. Hyvä UI lost dat op met een Figma-bestand dat design tokens en componenten bevat die 1-op-1 matchen met de daadwerkelijke code. Geen vertaalslag, geen gemiste states, geen "dat zag er in Figma anders uit."

Wat is Hyvä UI precies?

Hyvä UI is het officiële design system en de componentbibliotheek van Hyvä. Niet te verwarren met een Hyvä theme.

Een Hyvä theme is de volledige Magento 2 frontend die de oude Luma-stack (RequireJS, jQuery, Knockout.js) vervangt. Hyvä UI is een losse componentbibliotheek. Je kunt Hyvä UI inzetten bovenop een Hyvä theme, maar ook in Laravel, headless setups of statische sites.

De technische basis:

• Tailwind CSS voor utility-first styling
• Alpine.js voor interactie, minimale JavaScript
• HTML-first aanpak, geen zware build-stap vereist

Dat "HTML-first" is geen marketingterm. Het betekent dat componenten direct begrijpelijk zijn voor zowel developers als designers die in de code kijken.

Het Figma Community-bestand: zo werkt het

Hyvä levert een officieel Figma Community-bestand. Dat bestand bevat twee lagen die samen het design system vormen.

Tokens zijn de kleinste eenheden van het design: kleuren, typografie, spacing, border-radius, shadows. In het Figma-bestand zijn deze tokens vernoemd op exact dezelfde manier als in de Tailwind-configuratie. Verander je een kleurtoken in Figma, dan weet je developer precies welke Tailwind-klasse of CSS-variabele dat is.

Voorbeeld: color-primary-600 in Figma = bg-primary-600 in de Tailwind utility. Geen tussenlaag, geen interpretatie.

Het Figma-bestand bevat de componenten die ook in de code zitten:

• Buttons (varianten: primary, secondary, ghost, disabled)
• Forms (input, select, checkbox, radio, error states)
• Modals en overlays
• Dropdowns
• Accordions
• Navigatie (desktop en mobiel)
• Tabs
• Product cards

Elk component in Figma heeft dezelfde states als de code: hover, focus, disabled, loading. Je ontwerpt geen ghost-state die vervolgens niet in de implementatie bestaat.

Hoe de token-structuur in de praktijk werkt

Hieronder een vereenvoudigd voorbeeld van hoe tokens in Tailwind-config en Figma samenkomen:

// tailwind.config.js (vereenvoudigd voorbeeld)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50:  '#f0f9ff',
          600: '#0284c7',
          700: '#0369a1',
        },
        surface: {
          DEFAULT: '#ffffff',
          muted:   '#f8fafc',
        },
      },
      borderRadius: {
        component: '0.375rem', // 6px — matcht Figma token "radius/component"
      },
    },
  },
}

In Figma zijn primary/600, surface/default en radius/component letterlijk de tokennamen. De developer hoeft niet te raden welke klasse bij welk kleurvlak hoort. De designer hoeft niet te controleren of zijn afrondingen zijn overgenomen.

Wat dit oplevert in een echte samenwerking

Wij zien bij klanten dat de designer-developer handoff de grootste vertragingsfactor is in frontend-trajecten. Niet de bouw zelf, maar de correctierondes erna.

Met een gesynchroniseerd Figma-bestand verandert de workflow:

Dat is geen theorie. Projecten met een gedeeld token-systeem halen hun design-review sneller dan projecten waarbij designer en developer elk eigen systemen gebruiken.

Meer over hoe zo'n handoff in de praktijk werkt: Hyvä UI designer-developer handoff.

Design tokens aanpassen aan een merk

Een design system is nutteloos als je het merk er niet in kwijt kunt. Hyvä UI is opgebouwd zodat je tokens kunt aanpassen zonder componenten te herschrijven.

Je werkt in lagen:

1. Base tokens — primitieve waarden (raw kleuren, spacings)
2. Semantic tokens — betekenisvolle namen (color-primary, color-danger, color-surface)
3. Component tokens — specifieke waarden per component (button-padding-x, input-border-color)

In Figma pas je de semantic tokens aan naar de huisstijl van de klant. In de Tailwind-config doe je hetzelfde. Beide veranderingen zijn klein, geïsoleerd en voorspelbaar.

Dat betekent: je Figma-bestand en je codebase blijven gesynchroniseerd, ook nadat je het merk hebt ingericht.

Performance als vertrekpunt

Hyvä UI is niet primair gebouwd voor snelheid, maar de performance-uitkomsten zijn een direct gevolg van de architectuurkeuzes.

Tailwind CSS genereert alleen de klassen die je gebruikt. Alpine.js weegt minder dan 15 kB. Geen React, geen Vue, geen overhead van een SPA-framework voor componenten die dat niet nodig hebben.

Ter vergelijking: een Magento 2 Luma-frontend laadt circa 95% meer JavaScript dan een Hyvä-implementatie met Hyvä UI. Lighthouse-scores van 95+ zijn haalbaar, ook op productpagina's met dynamische content.

Voor designers betekent dit: wat jij ontwerpt is ook wat de bezoeker ziet, zonder dat een zware JS-bundle de perceptie van snelheid verpest.

Licentie en kosten

Hyvä UI kost eenmalig ongeveer 250 euro. Per-ontwikkelaar of per-projectlicentie, geen maandelijks abonnement.

Dat is een eenmalige investering die je over meerdere projecten terugverdient. De Figma Community-bestanden zijn inbegrepen.

Meer details over de componentbibliotheek zelf: /hyva-ui.

Wanneer Hyvä UI niet de juiste keuze is

Eerlijkheid over wanneer iets niet past is nuttiger dan een verkooppitch.

• Je een bestaand React- of Vue-design system hebt dat je team al goed beheerst. De meerwaarde van synchronisatie geldt alleen als je ook de Tailwind-implementatie gebruikt.
• Je geen Tailwind wilt of kunt gebruiken in je stack. Hyvä UI is fundamenteel gebouwd op Tailwind; los ervan is het geen bruikbaar systeem.
• Je een volledige Magento 2 frontend vervangt. Dan is een Hyvä theme het juiste vertrekpunt, niet alleen Hyvä UI.
• Je team geen Figma gebruikt. Het Figma-bestand is het centrale voordeel; zonder Figma is het gewoon een componentbibliotheek.
• Je project heeft minder dan vijf componenten nodig. Dan is het overhead, geen voordeel.

Het is ook geen silver bullet voor slechte design processes. Als jouw huidige handoff faalt door onduidelijke communicatie of ontbrekende specs, lost een gesynchroniseerd Figma-bestand dat niet vanzelf op.

Hyvä UI in een bredere stack

Omdat Hyvä UI framework-agnostisch is, past het in meer contexten dan alleen Magento:

• Magento 2 + Hyvä theme: de meest gebruikte combinatie, volledige integratie
• Laravel: Blade-templates met Tailwind + Alpine, Hyvä UI-componenten zijn direct inzetbaar
• Headless: Hyvä UI als stijllaag, gekoppeld aan een eigen frontend
• Statische sites: HTML-componenten zonder extra runtime

Dat maakt het relevant voor design teams die voor meerdere klanten of platformen werken. Je leert het systeem één keer en past het aan per project.

Wat het vraagt van je als designer

Hyvä UI werkt het beste als je als designer bewust met tokens werkt. Dat betekent:

• Kleurkeuzes vastleggen als tokennaam, niet als hex
• Spacing uitdrukken in stappen (4px-grid), niet in absolute pixels
• States expliciet ontwerpen (hover, focus, disabled, error)
• Componenten hergebruiken in plaats van opnieuw tekenen

Dat is geen extra werk. Het is precisiewerk dat herhaalwerk elimineert. Designers die gewend zijn aan systemen als Material Design of Carbon zullen de werkwijze herkennen.

De combinatie die wij aanbevelen

Als je als design team overstapt naar Hyvä UI, raden we aan:

1. Start met het Figma Community-bestand als basis
2. Pas de semantic tokens aan naar het merk van de klant
3. Synchroniseer tokenwijzigingen direct met de Tailwind-config
4. Gebruik de componentstates in Figma als referentie voor de developer
5. Gebruik pull-comments in je Figma-file om toegestane afwijkingen te documenteren

Wij gebruiken dit zelf bij Magento 2-trajecten en zien de correctieronden na design-review dalen van 4-5 naar 1.

Aan de slag

Hyvä UI is beschikbaar via hyva.io. Het Figma-bestand staat in de Figma Community. Voor de meeste teams is de onboarding een kwestie van uren, niet dagen.

Heb je vragen over of Hyvä UI past bij jouw project of team? Wij kijken graag mee. Geen sales, gewoon een directe Tech Check: neem contact op via /contact.