Deze blog is geschreven door Rogier Barendregt.
Onlangs is Figma met een update gekomen die het maken van componenten drastisch versimpelt. Deze update maakt het voor ontwerpers makkelijker om componenten te maken én te gebruiken.
Voorheen was er een grote hoeveelheid component-varianten nodig om voor iedere variatie op een component een aparte ‘component variant’ te maken. Vanaf nu is het dus mogelijk om door middel van zogenaamde ‘component properties‘ opties aan componenten toe te voegen. Hierdoor hoeven voor de meeste componenten slechts de interactieve en feedback staten als variant gemaakt te worden. Via deze ‘componend props’ kunnen opties binnen een component gewijzigd worden, bijvoorbeeld het aan of uit zetten van extra ondersteunende tekst of een icoon links of rechts plaatsen.
Afbeelding 1: Oude versie van het tekst invoer component met voor iedere variatie een aparte component variant.
Afbeelding 2: Nieuwe versie van het tekst invoer component met nog slechts voor de verschillende staten een aparte component variant.
Niet alleen maakt dit het onderhoud van componenten makkelijker, de opties die een component heeft zijn nu als ontwerper ook veel makkelijker in gebruik. Alle opties zijn in het instance paneel in Figma nu duidelijker en overzichtelijker.
Afbeelding 3: Een instance van een tekst invoer component volgens de nieuwe opzet met alle opties die daarvoor beschikbaar zijn.
Over de ‘breaking changes’
Er is 1 nadeel; helaas zijn dit zogenaamde ‘breaking changes’. Dit houdt in dat als een bestaand component al veelvuldig gebruikt wordt in Figma-ontwerpen, deze op iedere plek in het ontwerpbestand vervangen dient te worden. 2 versies van componenten, 1 volgens de oude methode, en een ander volgens de nieuwe is mogelijk, maar dan dienen deze beiden onderhouden te worden.
Mocht je gebruik willen maken van de Figma-componenten die het NL Design System aanbiedt, neem dan contact op met Rogier Barendregt.
