Figma: vad är det och hur fungerar det?
Figma är en innovativ och intressant vektorgrafikredigerare utformad för webben, vars användning har ökat mer och mer under åren: idag är det en av de mest använda plattformarna av UX/UI-designers, kommunikationsbyråer och företag över hela världen!
Den första versionen av Figma lanserades 2015 med det uttalade målet att göra det möjligt för alla att “vara kreativa med hjälp av en webbläsare“. År 2022 köpte Adobe, den amerikanska jätten som är känd för sin svit av digitala grafikprogram, Figma för cirka 20 miljarder dollar.
Vi vet fortfarande inte hur framtiden för Figma kommer att se ut, men plattformen är utan tvekan ett av de mest populära grafiska redigeringsverktygen för webbplatser och appgränssnitt idag. Idag ska vi ta en titt på vad Figma är och hur det fungerar: en guide för dem som fortfarande inte känner till programmet eller bara har hört talas om det!
Vad är Figma?
Figma är en plattform för grafisk redigering och gränssnittsdesign: den är webbaserad och kollaborativ. Med Figma kan man göra lite av varje grafiskt – från att designa webbplatser och grafiska användargränssnitt för appar till att skapa inlägg på sociala medier och presentationer – och är därför ett allt populärare verktyg för företag och grafiska designstudior.
En av de mest innovativa egenskaperna hos Figma är utan tvekan det faktum att det är ett samarbetsverktyg. Olika medlemmar i ett team arbetar på samma fil och i realtid. Detta innebär att olika grafiska formgivare kan samarbeta för att skapa en design, men också att utvecklare och copywriters redan är involverade i de tidiga stadierna av arbetet.
Resultatet? Mycket tid sparas: inga fler ändlösa filutbyten. Dessutom främjar samarbete kreativiteten.
Att Figma är webbaserat – det vill säga att man helt enkelt kommer åt det via sin webbläsare – är en annan egenskap som är mycket uppskattad: man behöver inte installera och uppdatera program eller köpa licenser; alla teammedlemmar kan arbeta från vilket operativsystem som helst utan att behöva oroa sig för bland annat teckensnitt som är installerade på maskinerna eller byte av datorer.
Allt sparas i molnet och i realtid, vilket gör att man undviker olika problem – som att slarvigt arbeta med föråldrade filer eller slösa mycket tid på att utbyta även mycket tunga dokument. För att använda Figma måste du naturligtvis vara online praktiskt taget hela tiden och ha en bra, stabil internetanslutning.
Nu har du en bättre uppfattning om vad Figma är. Slutligen måste vi säga att Figma är ett gratisprogram, åtminstone i sin grundversion. Det kostnadsfria Starter-paketet ger teamen möjlighet att arbeta med tre filer inom ett projekt och lagrar tidigare versioner i 30 dagar. Det bör noteras att studenter och lärare också kan begära gratis tillgång (härifrån) till den professionella versionen av Figma – som annars kostar 12 dollar per månad och användare.
Sammanfattningsvis, vad är Figma:
- Figma är ett program för grafisk redigering och prototypframställning.
- Figma används främst för digital design, dvs. design av webbplatser och gränssnitt för appar.
- Figma är webbaserat: det innebär att det inte finns någon programvara att ladda ner och installera, utan programmet används via webbläsaren och en internetanslutning.
- Figma är kollaborativt: flera användare med olika roller kan arbeta med ett projekt samtidigt.
- Figma är realtidsbaserat: allt sparas hela tiden i molnet.
- Figma är gratis i sin grundversion.
Hur fungerar Figma?
Har du en klarare uppfattning om vad Figma är och dess potential? Innan vi tillsammans tittar på hur Figma fungerar – åtminstone i sina grundläggande och mest innovativa element – låt oss klargöra en viktig aspekt direkt: Figma visar all sin effektivitet inte bara för den slutliga utformningen av en grafisk produkt, utan också och framför allt i alla föregående faser.
Brainstorming, utvärdering av olika grafiska alternativ, prototyper, insamling och implementering av feedback: du kan använda Figma mycket effektivt i alla dessa skeden! I Figma kan ett team av designers t.ex. tillsammans bygga en trådram för en webbplats, dvs. det enkla skelettet av en design utan färger eller stilar, och omedelbart samla in inledande feedback från andra teammedlemmar eller låta dem rösta på det bästa alternativet. Eller prototypa gränssnittet för en app, dvs. simulera navigering och interaktion inom en design i ett tidigt skede.
Låt oss nu förklara hur de grundläggande aspekterna av Figma fungerar. I slutet av artikeln kommer vi att rekommendera några kurser och resurser för att fördjupa dina kunskaper och bli ett Figma-proffs!
Skapa ett konto
För att skapa ett konto registrerar du dig helt enkelt gratis på figma.com. När du är registrerad kan du skapa team, projekt och jobb (filer). Bjud in andra användare till ditt team så att du kan ge dem tillgång till de projekt som ni kommer att samarbeta om.
Arbetsområdet
Arbetsområdet i Figma är en enorm miljö – en kvadrat på upp till 65 000 pixlar – inom vilken du kan placera de olika skärmarna för den design du arbetar med.
För att skapa skärmar använder du ramverktyget: du kan välja mellan dussintals fördefinierade storlekar, t.ex. iPhone 14, Apple Watch 41 mm eller ett Facebook-inlägg. På så sätt kan du t.ex. samla de olika sidorna på en webbplats i en fil eller visa hur samma sida ska visas på olika enheter.
Bibliotek och gemenskaper
En annan intressant aspekt av Figma är komponentbiblioteken. Om du inte vill slösa tid på att bygga element från grunden kan du påskynda skapandet av en design – eller ett utkast – genom att använda de mest olikartade grafiska elementen som redan finns i biblioteken. I biblioteken hittar du t.ex. ett färdigt navigeringsfält, ikoner eller de vanligaste knapparna.
I Figmas community – en av de mest intressanta och användbara platserna för dem som använder plattformen – kan du söka efter dessa och andra element. Här kan du hitta inspiration, brainstormingmaterial, grafiska element och så kallade designsystem, dvs. en uppsättning regler, riktlinjer och grafiska element som hjälper till att ge din grafiska produkt sammanhang.
Prototypframställning
I avsnittet Prototype i Figma kan du länka samman olika skärmar eller grafiska element genom att identifiera noder: en nod kan t.ex. placeras på “om”-objektet i en meny som tar användaren till motsvarande sida. Eller på en “registrera dig för nyhetsbrev”-knapp. Genom att starta prototypen kan du simulera hur en webbplats eller ett appgränssnitt fungerar i ett tidigt skede, så att du kan förstå vad som fungerar och vad som behöver förbättras!
Insamling av feedback
När filen har delats med resten av teamet är det möjligt att ta emot och placera feedback genom praktiska färgade post-it-lappar. Post-it-lappar används för att rösta, rapportera problem eller ge råd genom mer strukturerade kommentarer. Du kan t.ex. presentera tre olika alternativ för hur hemsidan ska se ut och i realtid se vad dina kollegor tycker.
Kommentarer kan också lämnas muntligt till programmet, som sedan skriver ut dem. Bekvämt, eller hur?
Kurser och annat användbart material för att använda Figma
Har du sett vad Figma är och hur det fungerar? Potentialen är, som du säkert har insett, oändlig! Vi slår vad om att du redan känner för att ta tag i programmet och göra dina första kreativa experiment tillsammans med ditt team.
Om du sedan vill bli ett proffs finns det en mängd kostnadsfria resurser online för att lära dig hur du använder Figma ännu bättre.
En användbar första introduktion är den som Figma själv tillhandahåller och som du hittar nedan: på drygt en timme ger de olika videorna en omfattande översikt över plattformen.
Online finns det också en mängd kurser, de flesta av dem gratis. Vi vill till exempel nämna den här kursen från Sherpa Design, det italienska UX/UI Designer-communityt. Sedan har vi de officiella kurserna från Figma, med moduler på cirka tio minuter vardera, och nybörjarkursen från The Designer Ship.
Visst är det trevligt? Nu när vi förstår vad Figma är och hur det fungerar, för vilket av dina nästa projekt kommer du att använda det?