Hur man gör en svävningseffekt i Figma

Hur man gör en svävningseffekt i Figma

Figma låter användare designa och anpassa många funktioner. En av funktionerna du kan använda för att förbättra användarupplevelsen är en svävningseffekt. Svävningseffekten på knappar betyder att du kommer att se en annan design när du flyttar markören mot den. Denna effekt i sig kan variera, från en standard som ändrar färger till mer komplicerade metoder som att ändra kant eller högdagrar.

Hur man gör en svävningseffekt i Figma

Läs vidare för att lära dig hur du lägger till en hovringseffekt till dina komponenter i Figma.

Skapa sväveffekt på knappar

Du kan ställa in en hovringseffekt om du vill att din komponent ska ha en viss interaktion och övergång när du håller muspekaren över den. Det enklaste resultatet du kan skapa är att ändra knappens färg för att markera den för att klicka. Så här kan du skapa en hovringseffekt på en knappkomponent:

  1. Gör knappen.
    Hur man gör en svävningseffekt i Figma
  2. Duplicera den och flytta den utanför ramen.
    Hur man gör en svävningseffekt i Figma
  3. Ändra färgen på den duplicerade knappen.
    Hur man gör en svävningseffekt i Figma
  4. Skapa komponenter genom att högerklicka och välja "Skapa komponent" från menyn, eller genom att trycka på "Ctrl + Alt + K" på ditt tangentbord.
    Hur man gör en svävningseffekt i Figma
  5. Klicka på fliken "Prototyp" i sidofältet.
    Hur man gör en svävningseffekt i Figma
  6. Anslut de två knappkomponenterna.
    Hur man gör en svävningseffekt i Figma
  7. I rullgardinsmenyn "Interaktionsdetaljer" väljer du "Medan du håller muspekaren".
    Hur man gör en svävningseffekt i Figma
  8. Klicka på alternativet "Öppna överlägg" i samma meny och ställ in överlägget till "Manuellt".
    Hur man gör en svävningseffekt i Figma

När användaren håller muspekaren över originalknappen kommer den att ersättas av den med en annan färg. Du kan också ändra texten som visas på knappen på liknande sätt.

Du måste upprepa detta för varje knapp.

Skapar svävningseffekt på knappkanter

Ett annat sätt att använda hovringseffekten på knappkomponenter är att skapa en ram som ändras när du håller muspekaren över knappen med markören. Så här kan du göra det:

  1. Skapa en knapp med valfri text inuti.
    Hur man gör en svävningseffekt i Figma
  2. Duplicera det.
    Hur man gör en svävningseffekt i Figma
  3. Lägg till strecket i dubbletten, ta bort fyllningen och ändra färgen.
    Hur man gör en svävningseffekt i Figma
  4. Klicka på fliken "Prototyp" i sidofältet.
    Hur man gör en svävningseffekt i Figma
  5. Anslut de två knappkomponenterna.
    Hur man gör en svävningseffekt i Figma
  6. I rullgardinsmenyn "Interaktionsdetaljer" väljer du "Medan du håller muspekaren".
    Hur man gör en svävningseffekt i Figma

När du nu förhandsgranskar knappeffekten och håller muspekaren över den, kommer de färgade kanterna att visas på den.

Använder Anima Plugin i Figma

Ett annat sätt att lägga till en svävningseffekt i Figma är att använda ett design-to-code-verktyg Anima. Denna plugin har unika funktioner som du kan implementera när du skapar webbplatser, appikoner eller andra webbkomponenter i Figma. Du behöver bara välja vilken komponent du vill animera och justera inställningarna därefter. Så här gör du:

  1. Välj komponenten.
    Hur man gör en svävningseffekt i Figma
  2. Öppna Anima-plugin.
    Hur man gör en svävningseffekt i Figma
  3. Tryck på alternativet "Hover Effect".
    Hur man gör en svävningseffekt i Figma
  4. Välj effekten (växa, krympa, skugga glöd och mer).
    Hur man gör en svävningseffekt i Figma
  5. Anpassa animationseffekter som "Duration" eller "Curve".
    Hur man gör en svävningseffekt i Figma
  6. Tryck på "Förhandsgranska"-knappen för att se effekterna.
    Hur man gör en svävningseffekt i Figma
  7. Klicka på "Spara".
    Hur man gör en svävningseffekt i Figma

En annan funktion hos Anime-plugin är att du kan anpassa CSS-övergången. Med den kan du ta kontroll över animeringshastigheten och justera dess inställningar efter dina preferenser eller göra dem mer naturliga.

Dra fördel av Figmas sväveffektfunktion

Oavsett om du är en professionell designer eller nybörjare, har du många funktioner i Figma för att skapa unika mönster och animationer för dina komponenter, ikoner och objekt. Med hovringseffekten kan du ändra text eller lägga till högdagrar, olika färger, olika kanter och mer. Att veta hur man skapar dessa effekter är av yttersta vikt för att göra din första webbplats interaktiv och ge den en personlig touch.

Vilken svävningseffekt implementerar du på dina komponenter i Figma? Låt oss veta i kommentarsfältet nedan.


Så här zoomar du möte: Ställ in, gå med, värd, schemalägg, använd virtuell bakgrund och mer

Så här zoomar du möte: Ställ in, gå med, värd, schemalägg, använd virtuell bakgrund och mer

Upptäck hur du enkelt ställer in, går med i och värdar Zoom-möten. Läs våra tips för att använda Zoom samt dess funktioner för att säkerställa effektiva och säkra möten.

Hur man spelar in och redigerar Microsoft Teams Meeting

Hur man spelar in och redigerar Microsoft Teams Meeting

Vill du spela in Microsofts teams möte? Läs inlägget för att lära dig hur du spelar in det med och utan Microsoft 365 Enterprise-konto.

Hur du gör din profil privat på Facebook

Hur du gör din profil privat på Facebook

Vill du hålla din Facebook-profil privat? Lär dig hur du kan skydda din integritet med dessa steg.

Hur man skriver spanska n med Tilde (ñ) på tangentbordet

Hur man skriver spanska n med Tilde (ñ) på tangentbordet

Lär dig att skriva spanska n med Tilde (ñ) på tangentbordet. Den här artikeln ger dig kortkommandon och metoder för både Windows och Mac.

Hur du lägger till och använder dina egna bilder som bakgrund i Microsoft Teams-möten

Hur du lägger till och använder dina egna bilder som bakgrund i Microsoft Teams-möten

Upptäck hur du lägger till och använder dina egna anpassade bakgrunder i Microsoft Teams-möten för att skapa en mer personlig och professionell atmosfär.

Hur man får ut så mycket som möjligt av Microsoft Rewards och tjänar lätta pengar

Hur man får ut så mycket som möjligt av Microsoft Rewards och tjänar lätta pengar

Så här kan du få ut det mesta av Microsoft Rewards i Windows, Xbox, Mobile, shopping och mycket mer.

Hur man använder Google Maps för att mäta avstånd

Hur man använder Google Maps för att mäta avstånd

Med Google Maps kan du mäta avståndet mellan två punkter. Lär dig att använda verktyget effektivt på olika enheter.

Ta reda på hur du gör försättssidor i Google Dokument [Enkla steg]

Ta reda på hur du gör försättssidor i Google Dokument [Enkla steg]

Skapa professionella försättssidor i Google Dokument genom att använda förbyggda mallar eller skapa dem från grunden. Följ vår detaljerade steg-för-steg-guide för att optimera dina dokument.

Hur man inaktiverar Copilot på Windows 11?

Hur man inaktiverar Copilot på Windows 11?

Den här bloggen kommer att hjälpa läsare att inaktivera Copilot-funktionen på Windows om de inte vill använda AI-modellen.

Hur man kopplar JBL-hörlurar med en dator, mobil enhet eller surfplatta

Hur man kopplar JBL-hörlurar med en dator, mobil enhet eller surfplatta

Lär dig hur du kopplar JBL-hörlurar med din dator, mobil enhet eller surfplatta på ett enkelt sätt. Få tips för att förbättra din anslutning och upplevelse.