Varianter i Figma: Effektivisering av UI-komponenter

Hva er varianter?

Varianter lar deg gruppere flere variasjoner av en komponent, for eksempel ulike stiler eller tilstander av en knapp, i én enkelt beholder. For eksempel kan mørk, lys og grønn versjon av en søkeknapp grupperes i ett variantssett, noe som forenkler ressursadministrasjon og bruk.

Opprette et variantssett

• Velg en gruppe komponenter.
• Gå til Design-panelet og velg Opprett komponentsett for å gruppere komponentene i én variant.
• Bruk skråstreker (f.eks. button/dark/default) for å organisere egenskaper som stil (dark, light, green) og tilstand (default, hover).
• Gi egenskapsnavn tydeligere etiketter, for eksempel ved å endre "Property 1" til Stil og "Property 2" til Tilstand.

Administrere varianter

Instanser av varianter kan opprettes ved å kopiere en av dem. Egenskapene til hver instans kan justeres fra Design-panelet, slik at du kan bytte mellom ulike stiler eller tilstander. For å legge til flere varianter, bruk pluss-ikonet under variantssettet for å inkludere flere variasjoner.

Opprette interaksjoner

For interaktive prototyper, koble en standardknapp til dens hover-tilstand i Prototype-fanen. Sett Trigger til "While Hovering" og Animasjon til "Dissolve" med en varighet på 500 ms. Bruk Forhåndsvisningsknappen nær startpunktet for flyten for å teste interaksjoner direkte.

Denne strømlinjeformede strukturen gjør prosessen enklere å forstå og følge. Gi beskjed hvis du trenger ytterligere tilpasninger!