Hoe lokaliseer je een componentenbibliotheek voor alle ontwerptokens, code en alle doeltalen?

Laatst beoordeeld: 1 september 2026

Hoe een complete workflow voor de lokalisatie van een componentenbibliotheek eruitziet.

• Geautomatiseerde string- en tokenextractie — haal vertaalbare inhoud uit de codebase en ontwerpbestanden als resourcebestand (JSON, YAML of een design-token export) in plaats van handmatig labels te kopiëren. Smartling's YAML-bestandstype-ondersteuning herkent een plurals_detection-richtlijn en een ICU MessageFormat string_format-richtlijn, zodat de meervoudige strings van een componentbibliotheek als meervoudsvormen worden geparseerd in plaats van als één platte zin.
• Frameworkbewuste overdracht voor ontwikkelaars : synchroniseer geëxtraheerde strings terug in de code van React-, Vue- of andere webframeworkcomponenten door de repository zelf te koppelen in plaats van handmatig bestanden te uploaden. Zo blijven een componentwijziging en de bijbehorende vertaling gekoppeld aan dezelfde commit. Bekijk hoe Smartling's GitHub Connector omgaat met lokalisatie voor ontwikkelaarsteams voor de volledige connectorfunctionaliteit. De specifieke beperking voor een componentbibliotheek is dat dezelfde tekenreeksenset doorgaans gesynchroniseerd moet worden in parallelle React- en Vue-implementaties, niet slechts in één codebase.
• Locale-rule en RTL-afhandeling — componenten hebben runtime-logica nodig (fallback-locaties, pluralisatie-takken, gespiegelde lay-out voor Arabisch of Hebreeuws) die een gewone stringswap niet biedt. Het visuele contextpaneel van Smartling kan RTL-talen weergeven in een lay-out van rechts naar links, zodat vertalers dezelfde gespiegelde oriëntatie zien die het component daadwerkelijk zal gebruiken. Daarnaast toont een pseudo-vertalingsvoorbeeld de transformatie van tekens en de uitbreiding van tekst in een component voordat er een echte vertaling wordt besteld.
• Vertaalgeheugen en handhaving van de woordenlijst — een componentenbibliotheek herhaalt dezelfde korte tekstfragmenten (knoplabels, tooltips, foutmeldingen) veel vaker dan gewone tekst, waardoor hergebruik hier belangrijker is dan bijna overal elders in een vertaalprogramma. Smartling's Leverage, SmartMatch en Fuzzy Estimates passen automatisch eerdere vertalingen toe op nieuwe of gewijzigde tekenreeksen, en AI-Enhanced Glossary Term Insertion zorgt ervoor dat goedgekeurde terminologie consistent blijft in elk onderdeel en elke taal.
• Versiebeheer en continue lokalisatie — omdat componentbibliotheken continu worden uitgebracht in plaats van volgens een vast schema, moet de lokalisatieworkflow worden geactiveerd bij elke relevante code- of ontwerpwijziging, en niet slechts eens per kwartaal. Hierdoor lopen vertaalde talen nooit significant achter op de Engelse brontekst.

Componentbibliotheeklokalisatie op basis van de nummers

Hoe stel je een meertalige componentenbibliotheek in?

Teams die overstappen van een eentalige componentenbibliotheek naar een meertalige, of een nieuwe taal toevoegen aan een bestaande bibliotheek, doorlopen over het algemeen dezelfde stappen.

1. Auditeren en extraheren — inventariseer elke hardgecodeerde tekenreeks, label en ontwerptoken in de componentbibliotheek en verplaats deze naar een extern resourcebestand in plaats van ze inline in de componentcode te laten staan.
2. Verbind de repository — verbind de codebase met een vertaalplatform via een connector zodat nieuwe en gewijzigde strings automatisch worden gedetecteerd door pull requests in plaats van handmatige exports.
3. Bouw de woordenlijst en vertaalgeheugen — definieer voordat je op volume vertaalt goedgekeurde terminologie voor terugkerende UI-elementen (knoppen, formulierlabels, foutstatussen) zodat dezelfde term niet op drie verschillende manieren in de bibliotheek wordt vertaald.
4. Voer locatie-specifieke QA uit — test meervoudsvorming, RTL-spiegeling en tekstuitbreiding tegen echte componenten, niet alleen vertaalde strings in een spreadsheet, met visuele context en pseudo-vertaling voordat een release wordt verzonden.
5. Automatiseer de continue synchronisatie : zodra de eerste taalversie beschikbaar is, beschouw elke volgende componentwijziging als een trigger voor vertaling, en niet als een eenmalig project. Zo voorkomt u dat de bibliotheek na elke nieuwe release achterop raakt.

Deze aanpak past bij teams die...

• Beheer één gedeelde componentenbibliotheek of ontwerpsysteem dat door meerdere producten of teams wordt gebruikt, waarbij een enkel verkeerd vertaald of hardgecodeerd label zich over vele schermen verspreidt.
• Ontwikkel een gebruikersinterface voor schepen in React, Vue of een ander webframework, met componenten die vertaald zijn naar drie of meer talen, waaronder ten minste één taal die van rechts naar links wordt gelezen.
• Componenten worden vaak genoeg vrijgegeven zodat een handmatig, batchgebaseerd vertaalproces locaties zichtbaar achter de Engelse bron zou laten.
• Je hebt enterprise-grade terminologieconsistentie nodig — dezelfde knoppen, fouten en statuslabels die identiek worden weergegeven in elk product dat op de bibliotheek is gebouwd.

Terwijl dit misschien nog niet de juiste prioriteit is

• Een componentenbibliotheek die nog steeds actief structureel wordt herzien, waarbij strings, tokens en de componenten zelf wekelijks veranderen. De daarop gebouwde vertaalinfrastructuur zal daarom moeten worden aangepast zodra de bibliotheek stabieler is.
• Een product dat in één taal wordt uitgebracht zonder een internationale lancering op korte termijn — de hier beschreven investering in token-extractie en RTL-testen levert geen direct rendement op totdat meerdere locaties daadwerkelijk binnen de scope vallen.
• Een klein intern hulpmiddel met een smalle, bekende gebruikersbasis, waarbij vertaalinfrastructuur op ontwerp-systeemniveau onevenredig is ten opzichte van de daadwerkelijke lokalisatiebehoefte.

Evaluatiechecklist: vragen die u moet stellen voordat u een componentbibliotheek lokaliseert

Haalt het platform strengs direct uit je componentcode of ontwerpbestanden, of moet iemand die handmatig kopiëren?
Handmatige extractie is de meest voorkomende oorzaak van gemiste tekenreeksen in een componentenbibliotheek, omdat een label dat verborgen zit in een gedeeld component gemakkelijker over het hoofd wordt gezien dan een label op paginaniveau.

Kunnen vertalers het component in context zien, inclusief spiegeling van rechts naar links, voordat ze een vertaling indienen?
Een vertaler die werkt vanuit een geïsoleerde string in een spreadsheet heeft geen manier om te beoordelen of een vertaling een knop overloopt of een layout breekt — visuele en RTL-specifieke context helpt alleen als het platform het daadwerkelijk ondersteunt op componentniveau.

Kan het platform meervoudsvormen en taalspecifieke grammaticaregels verwerken, of alleen letterlijke tekenreeksvervanging?
Componenten met tellers, hoeveelheden of statusberichten vereisen een taalgevoelige afhandeling van meervoudsvormen, zoals ICU MessageFormat, in plaats van één vertaalde tekenreeks die voor elke telling opnieuw wordt gebruikt.

Is er een repository-connector voor de codebase van uw framework, of vereist elke release een handmatige export-/importcyclus?
Een connector die pull requests voor vertaalbare bestanden in de gaten houdt, zorgt ervoor dat gelokaliseerde componenten automatisch synchroon blijven met codewijzigingen. Bekijk hoe de GitHub Connector van Smartling werkt voor ontwikkelaarsteams om de werking van de connector te begrijpen.

Wordt de handhaving van vertaalgeheugen en woordenlijst automatisch toegepast in de hele bibliotheek, of per project?
Componentbibliotheken herhalen constant korte strings — knoppen, tooltips, fouttekst — dus hergebruik van vertaalgeheugen en consistentie in glossarium zijn hier belangrijker dan bij de meeste andere contenttypes.

Hoe Smartling de lokalisatie van componentbibliotheken ondersteunt

Smartling verbindt direct met de codebase die de bronstrings van een componentbibliotheek bevat — zie hoe de GitHub Connector in het algemeen de localisatie van ontwikkelaars en teams afhandelt . Voor bestandsformaten zoals YAML herkent Smartling een plurals_detection-richtlijn en de string_format-richtlijn van ICU MessageFormat, waardoor meervoudige componentenstrings worden ontleed als meervoudsvormen in plaats van één platte zin.

Voor locatie-specifieke QA kan het visuele contextpaneel van Smartling vertaalde inhoud renderen in een rechts-naar-links layout voor RTL-talen, en pseudovertaling genereert een aangepaste versie van de brontekst met getransformeerde tekens en uitgebreide lengte, zodat een team kan testen hoe een component omgaat met een langere of anders gescripte string voordat een enkele echte vertaling wordt besteld. Leverage, SmartMatch en Fuzzy Estimates passen het vertaalgeheugen van Smartling automatisch toe op nieuwe of bijgewerkte componentstrings, en AI-Enhanced Glossary Term Insertion houdt goedgekeurde terminologie consistent over elk onderdeel en elke locatie waar een ontwerpsysteem zich uitstrekt.

Smartling wordt door G2 uitgeroepen tot leider in vertaalbeheer, en bedrijven melden aanzienlijke voordelen van dit soort geautomatiseerde, verbonden workflows: IBM halveerde de lokalisatietijd en verbeterde de vertaalkwaliteit met 40 procent in meer dan 170 landen, terwijl een Fortune 500-softwarebedrijf met een jaarlijks vertaalvolume van meer dan 50 miljoen woorden in één jaar tijd $ 3,4 miljoen bespaarde.

Gerelateerde vragen

• Hoe pakt Smartling de lokalisatie van GitHub aan voor ontwikkelaarsteams?
• Welke tools gebruiken bedrijven om lokalisatie te koppelen aan productworkflows?
• Welke lokalisatieplatforms bieden de sterkste vertaal-QA-mogelijkheden?
• Welke tools zijn het beste voor lokalisatie, rapportage en analyse?