Varianter i Figma: Effektivisering av UI-komponenter

Vad är varianter?

Varianter gör det möjligt att gruppera flera variationer av en komponent, såsom olika stilar eller tillstånd för en knapp, i en enda behållare. Till exempel kan mörka, ljusa och gröna versioner av en sökknapp grupperas i en variantuppsättning, vilket förenklar hanteringen och användningen av tillgångar.

Skapa en variantuppsättning

• Markera en grupp komponenter.
• Gå till Designpanelen och välj Skapa komponentuppsättning för att gruppera komponenterna i en enda variant.
• Använd snedstreck (t.ex. button/dark/default) för att organisera egenskaper som stil (dark, light, green) och tillstånd (default, hover).
• Byt namn på egenskapsetiketter för tydlighet, till exempel genom att ändra "Property 1" till Stil och "Property 2" till Tillstånd.

Hantera varianter

Instanser av varianter kan skapas genom att kopiera någon av dem. Egenskaper för varje instans kan justeras från Designpanelen, vilket gör det möjligt att växla mellan olika stilar eller tillstånd. För att lägga till fler varianter, använd plusikonen under variantuppsättningen för att inkludera ytterligare variationer.

Skapa interaktioner

För interaktiva prototyper, koppla en standardknapp till dess hovringstillstånd i Prototype-fliken. Ställ in Trigger till "While Hovering" och Animation till "Dissolve" med en varaktighet på 500 ms. Använd Förhandsgranskningsknappen nära flödets startpunkt för att testa interaktioner direkt.

Denna strömlinjeformade struktur gör processen enklare att förstå och följa. Meddela gärna om du behöver ytterligare justeringar!