Figma-plugins hjälper till att öka ditt arbete och se till att du stannar inom Figma för att slutföra ditt designarbete. Med Figmas oändliga bibliotek av plugins finns det nästan ingenting du inte kan göra med ditt favoritdesignverktyg.
Med dessa mest användbara gratis Figma-plugins skrapar vi bara på ytan av vad som är tillgängligt.
Hur man laddar ner Figma-plugins
Innan vi hoppar in i listan över varor bör du veta hur du hittar och laddar ner ett Figma-plugin. Du kanske vet hur man använder Figma, men om du inte gör det, så här kan du enkelt hitta pluginbiblioteket. Vissa plugins kan fungera bättre från Figma-skrivbordsappen än från webbläsarversionen.
Gå till Community-sidan, som finns på hemsidan eller från en filsida under ditt kontonamn. Gemenskapssidan listar mer än bara plugins, utan från en Figma-fil, välj Huvudmeny > Plugins visar dig nyligen använda plugins och sparade plugins, och låter dig hitta nya plugins.
Väljer Hitta nya plugins tar dig till Resurser fliken där du kan söka efter valfri plugin. När du har hittat ett plugin som du vill ladda ner – från Community-sidan – välj Testa för att ladda ner, eller—från resurssökningsrutan—välj Springa för att ladda ner plugin.
Varje plugin bör ge sina egna instruktioner för användning, så läs texten när du uppmanas.
Gauthams Mesh Gradient-plugin ger ett snabbt och enkelt sätt att lägga till anpassade gradienter till dina Figma-designer. Kör plugin-programmet och skapa en gradientruta. Du kan anpassa färgerna själv eller slå Randomisera för att automatiskt generera en gradientdesign.
Denna plugin skapar en bild från din gradient, så den kan inte redigeras efter att den har genererats. Du kan dock redigera gamla eller skapa nya övertoningar i plugin-programmet.
Webflow Labs tillhandahåller ett utmärkt sätt att förvandla din Figma-design till HTML eller CSS redo för Webflow och webbplatsskapande. Du kan integrera Webflow-interaktioner i dina Figma-designer för sömlös integration med Webflow Labs. Detta plugin är bra om du är en Webflow Labs-användare eller arbetar med ett webbutvecklareteam.
Den innehåller responsiva komponenter, behåller alla dina stilar, typsnitt och bilder och låter dig till och med redigera HTML-taggar direkt i Figma. Du kan skapa mastermallar i Figma och använd Figma till Webflow för att exportera dem för framtida webbplatsprojekt.
Unsplashs officiella Figma-plugin innebär att du kan infoga bilder direkt i dina mönster utan att lämna ditt Figma-fönster. Alla samma Unsplash-licenser är tillgängliga, men med detta plugin sparar du tid och klick när du lägger till bilder i ditt arbete.
Om du är en bilddesigner kan du ha svårt att hitta platshållartext för utrymmet i dina mönster. Lorem Ipsum platshållarplugin gör allt åt dig. Med traditionell latinsk text är det bara att lämna över din design till din copywriter för att förvandla platshållartexten till verkligheten, så allt du behöver göra är att fokusera på det visuella.
Om du har en kopia av copywriting som behövs för din design, hjälper Text Porter att enkelt flytta din kopia från Excel till Figma. Kör bara insticksprogrammet Text Porter och flytta över din text. Redigera sedan texten direkt i din Excel-fil för att uppdatera din Figma-design i framtiden. Detta är användbart om din copywriter inte har tillgång till eller kunskap om Figma.
För ett smidigare arbetsflöde tillsammans med att använda plugins kan du också använd Figma-genvägar för ett snabbare arbetsflöde.
Att ta bort bakgrunder är vanligt när man använder bilder i många designaspekter. Istället för att använda Photoshop, Canva eller andra redigeringsprogram, snabbar du på processen och håller allt i Figma med hjälp av plugin-programmet Icons8 Background Remover.
Bakgrundsborttagningsverktyget kan appliceras på mer än en bild åt gången, vilket påskyndar din arbetsprocess med en knapptryckning.
Insticksprogrammet Image Tracer skapar en vektorbild från vilka bilder och bildlager du än väljer att använda den på. En skalbar vektor är som gulddamm för digitalt designarbete, och detta plugin gör det enkelt att förvandla vilken bild som helst till en vektor.
Html.to.design-pluginet kan hjälpa dig att återskapa befintliga webbdesigner till Figma-designer. Detta tjänar många syften som att hjälpa dig öva på att designa webbplatser, eller för att du ska kunna återställa gamla webbplatser som du har designat och förlorat åtkomst till.
Se vår detaljerade handledning för konvertera en webbplats till en Figma-design använder detta plugin.
Vectorize-pluginet fungerar på samma sätt som Image Tracer, men det här är bättre om du bara har en bild och en färg att vektorisera. Att konvertera bitmappsbilder till vektorer är enkelt med detta plugin.
Dina nya vektorer kommer att vara en vektorbana, lätta att redigera och använda för alla dina designbehov. Särskilt bra om din klient skickar sin logotyp till dig som en pixlad bild kopierad från ett Word-dokument. Du kan enkelt återuppliva logotyper och andra enfärgade ikoner i Figma.
Designa för ett specifikt bildförhållande? Behöver du skala upp eller ner? Använd plugin-programmet Aspects. Denna plugin låter dig snabbt ändra aspekten av olika lager i din design, särskilt bilder. Aspects är ett användbart verktyg för alla snabba skalningar du behöver göra.
Om du designar för UX/UI lägger du förmodligen till knappar i dina designs. Button Buddy är ett bra plugin som erbjuder många knappkomponentdesigner, vilket sparar tid på att designa, så att du kan fokusera på fantastiska layoutdesigner.
För att lägga till fler komponenter än knappar, använd insticksprogrammet Handy Components. Denna plugin erbjuder över 60 olika UX/UI-designelement. Handy Components använder också smart design för att replikera stilarna som finns i din design och applicera dem direkt på plugins tillagda komponenter. Du behöver inte redigera för att matcha din stil.
Tillgängliga komponenter är knappar, funktionskort, listobjekt, tabeller, förloppsindikatorer, varningsdekaler, kalendrar och många andra användbara element.
Behöver du en karta på din webbdesign? Du kan enkelt införliva en med Map Maker-plugin. Insticksprogrammet låter dig lägga till en anpassad karta som infogas i en form.
Välj bara din avsedda form – rektangel, ellips eller polygon – och kör Map Maker. Skriv sedan in adressen du vill dela. Det är så enkelt att lägga till en karta till din webbdesign.
Ikoner gör UX/UI-design universell och tillgänglig. Iconify-pluginet är värd för ett bibliotek med över 1 000 000 ikoner för nästan all användning. Iconifys öppna källkod, SVG-ikoner kan användas i många utvecklingsprogram för att enkelt ta dina Figma-designer från prototyp till levande produkter.
Att lägga till mockups till dina Figma-designer hjälper dig att införliva verkligheten i potentiella produktidéer. Oavsett om du lägger till mockups till din Figma presentation design eller införliva dem på en webbplats, de är en praktisk sak att ha.
Clay Mockups 3D är en av många fantastiska mockup-plugins. Se vår guide om Figma smartphone mockups för att se vad mer som finns tillgängligt. Du kan infoga mockups för telefoner, datorer och andra enheter samt händer för att hålla dem.
Detta enkla plugin låter dig anpassa dina ramar, städa och hålla dina konstverk organiserade. Välj bara dina element, kör insticksprogrammet och ditt Figma-fönster kommer att vara superstädat.
Den beställer inte bara en rörig rityta, den numrerar även om ramarna om ordningen ändras. Sluta leta efter bildruta 5 efter att den har flyttats, du hittar den inbäddad bredvid 4 och 6.
Håll ditt arbete flytande med Figma-plugins
Med dessa 16 fantastiska verktyg kan du enkelt förvandla din arbetsström. Plugins låter dig göra mer utan att lämna Figma designfönster.
Dessa plugins är de mest användbara som finns, och om du använder dem alla kan du vektorisera bilder, lägga till bilder från Unsplash, lägg till HTML-designer till Figma och tillbaka igen med Webflow Labs, lägg till anpassade kartor och ändra storlek på din mönster. Alla med plugins.