Om du gillar gränssnittsdesign eller är engagerad i mobilappar och digitala produkterDu har förmodligen hört talas om Figma förut... och en hel del. Det som inte alltid är så tydligt är dess fulla potential, särskilt när man kombinerar skrivbordsversionen med Android-appen och hela ekosystemet av verktyg som omger den.
I den här artikeln får du se i detalj Vad kan man skapa med Figma, hur får man ut det mesta av appen på Android att granska, prototypa och samarbeta varifrån som helst, och varför det har blivit de facto-standarden för UX/UI-design år 2025. Vi kommer att täcka allt från de praktiska aspekterna (hur man använder mobilappen) till bredare koncept som komponenter, prototyper, FigJam, Slides, AI och Dev Mode.
Vad är Figma och varför använder alla det?
Figma är i grunden en 100 % molnbaserad samarbetsbaserad designplattform Utformad för att skapa webbgränssnitt, mobilappar, digitala produkter och interaktiva prototyper. Den fungerar direkt från webbläsaren, utan behov av installation, även om den även har skrivbordsapplikationer för Windows och macOS.
Dess stora styrka är att centraliserar hela produktdesignprocessenNi kan gå från en första skiss till en wireframe, till ett komplett gränssnitt och slutligen till en navigerbar prototyp utan att byta verktyg. Allt detta medan ert team ser ändringarna i realtid, kommenterar arbetsytan och delar arbetet med utvecklingsavdelningen eller kunden.
På en praktisk nivå består Figma av flera delar som är viktiga att förstå: designfiler (för användargränssnitt och prototypframtagning), FigJam (gemensam whiteboardtavla), Diabilder (presentationer inom själva miljön), den Dev-läge för utvecklare och en mobilapp som, även om den inte är lämplig för att designa från grunden, är perfekt för att granska, kommentera och testa prototyper.
Vad kan man skapa med Figma: olika typer av projekt?
Med Figma kan du bygga i princip vad som helst digitalt gränssnitt eller material som visas på skärmen. Den genererar inte produktionsklar funktionell kod (med det experimentella undantaget för Figma Sites), men den täcker all preliminär design.
Till att börja med är verktyget utformat för att designa kompletta webbplatserMarknadsföringssidor, landningssidor, bloggar, dashboards, e-handel… Du kan skapa responsiva designer genom att styra hur kolumner, texter och komponenter anpassar sig till olika skärmupplösningar.
Det används också flitigt för design av mobilappar på Android och iOS, inklusive skärmar, navigeringsflöden, tomma tillstånd, felmeddelanden, återanvändbara komponenter, layouter anpassade till olika pixeltätheter och enhetsstorlekar.
Förutom rena gränssnitt används Figma dagligen för Lågkonforma wireframes, användarflödeskartor, kompletta designsystem (med typsnitt, färgpaletter, designkomponenter och tokens), enkla illustrationer, lättviktig vektorikonografi och alla typer av UI-resurser som senare kommer att integreras i en riktig webbplats eller app.
Figma skrivbordsgränssnitt: hur allt är organiserat
När du öppnar Figma i din webbläsare eller skrivbordsapp möts du av en startskärm med din Senaste filer, utkast och favoriterDärifrån kan du komma åt ditt teams arbetsytor, projekt organiserade efter mappar eller bläddra i dina egna personliga dokument.
När du öppnar en designfil hittar du ett gränssnitt som är uppdelat i flera områden: i den centrala delen finns duk där du bygger ramar och skärmar; till vänster har du en kolumn med sidorna och lagerstrukturen; högst upp finns verktygsfältet med ramar, former, penna, text, kommentarer och markering; och till höger visas Inspector med egenskaperna för det valda elementet.
Inspektören är grupperad i tre flikar: i Design Du kan justera teckensnitt, färger, fyllningar, ramar, automatisk layout, skuggor och andra visuella detaljer; i Prototype definierar interaktioner, navigering mellan skärmar, animationer och gester; och i Inspektera Utvecklingsteamet hittar tekniska egenskaper, variabler och kodavsnitt som är redo att överföras till CSS, Android eller iOS.
Från denna grundläggande struktur kan du starta projekt från grunden med "Ny designfil", skapa samarbetstavlor med "Ny FigJam-fil" eller importera externa filer (som Sketch, PNG/JPG/HEIC/GIF-bilder etc.) för att integrera dem i din process.
Komponenter, bibliotek och återanvändning
En av Figmas superkrafter är dess system av återanvändbara komponenter och delade bibliotekvilket gör att du kan bibehålla visuell konsistens i komplexa produkter utan att behöva bli galen i att byta knappar en efter en.
För att skapa en komponent, välj helt enkelt en grupp lager (till exempel en komplett knapp med dess ikon och text) och använd alternativet "skapa komponent" eller motsvarande kortkommando. Från och med då, vilken kopia som helst kommer att vara en instans av huvudkomponenten, med egen identifierare och åsidosättningsalternativ för text, ikoner, varianter etc.
Magin händer när du redigerar huvudkomponenten: Ändringarna sprids till alla instanser. distribuerad över hela filen eller över flera projekt, vilket sparar timmar av repetitivt arbete och drastiskt minskar visuella konsistensfel.
Dessutom kan du gruppera dessa komponenter i delade bibliotek Så att hela teamet använder samma knappar, formulär, kort eller navigeringsmönster. När en komponent i biblioteket uppdateras får resten av teamet ett meddelande och kan acceptera ändringarna i sina filer med ett enda klick, vilket upprätthåller ett dynamiskt och kontrollerat designsystem.
Samarbete i realtid och Figma Community
Figma är tänkt från början som en samarbetsprogramvara i molnetFlera designers, produktchefer eller utvecklare kan öppna samma fil och arbeta samtidigt utan överlappning, och se varandras markörer i realtid.
Knappen "Dela" högst upp tillåter dela projekt Du kan samarbeta med andra genom att lägga till deras e-postadresser och tilldela redigerings- eller skrivskyddsbehörigheter. Du kan också generera offentliga eller begränsade länkar så att kunder eller intressenter kan se designen utan att behöva installera något.
För att kommentera, välj helt enkelt kommentarsverktyget och förankra ett meddelande direkt på arbetsytanassocierade med ett specifikt lager eller område. På så sätt kopplas konversationer till det visuella sammanhanget och går inte förlorade i e-postkedjor eller chattar.
Utöver dina egna projekt har Figma Figma-gemenskapenDet är ett enormt arkiv där användare från hela världen delar mallar, designsystem, ikonpaket, fördefinierade arbetsflöden och plugins. Du kan duplicera dessa resurser i ditt konto och använda dem som en grund för dina projekt, vilket avsevärt påskyndar starten av nytt arbete.
FigJam: gemensamma whiteboardtavlor för brainstorming
FigJam är den "mjukare" sidan av Figma: en samarbetsinriktad whiteboard online Utformad för brainstorming, UX-workshops, kundresor, flödesscheman, teamretrospektiv och alla typer av visuella aktiviteter.
På FigJam kan du kombinera Post-it-lappar, former, kopplingar, text, emojis, timers och mallar för att leda teammöten i realtid. Det är särskilt användbart i de tidiga skedena av ett projekt, när du fortfarande definierar problemet, arbetsflödena och informationsarkitekturen innan du går vidare till en detaljerad visuell design.
Du kan också använda Figma-mobilappen på Android Öppna och redigera FigJam-panelerÄven om det naturligtvis finns vissa begränsningar på grund av skärmstorleken, är det perfekt för att granska ett diagram, flytta ett par post-it-lappar eller lägga till snabba kommentarer medan du är på tåget eller inte är på kontoret.
Figma Slides: presentationer utan att lämna verktyget
Ett annat nytt tillskott är Figma Slides, som låter dig skapa presentationer direkt i Figma-ekosystemet, och utnyttjar samma komponenter, teckensnitt och stilar som du använder i dina produktprojekt.
När du öppnar en bildsamling ser du huvudbilden som tar upp större delen av skärmen och längst ner en remsa av miniatyrer med alla bilder. För att navigera, tryck helt enkelt på den miniatyrbild du vill ha, utan att behöva gå igenom dem en efter en i rätt ordning.
Precis som med andra filtyper kan du zooma in med nyprörelser Om du använder en mobil enhet eller styrplatta kan du lägga till kommentarer genom att trycka och hålla nere ett område på bilden och visa eller dölja feedbackindikatorerna beroende på om du föredrar en ren eller mer samarbetsinriktad vy.
Figma år 2025: AI, utvecklingsläge och webbplatser
Under senare år har Figma införlivat funktioner från Artificiell intelligens och verktyg för utvecklare vilket avsevärt utökar vad som kan göras inom plattformen.
Å ena sidan, Dev-läge Det erbjuder ett dedikerat utvecklingsutrymme där programmerare kan inspektera design, visa exakta egenskaper, kopiera CSS-kod, ladda ner resurser, hantera designsystemvariabler och granska implementeringsanteckningar utan att gå vilse bland mer designorienterade verktyg.
Å andra sidan har Figma börjat introducera AI-funktioner som hjälper till att generera innehåll, gränssnittsstrukturer eller variationer designa automatiskt, alltid med målet att snabba upp arbetsflödet men hålla den kreativa kontrollen i designerns händer.
Dessutom utförs experiment med Figma-webbplatserEtt betaverktyg som låter dig skapa webbplatser på ett mer visuellt och integrerat sätt inom designarbetsflödet. Det är inte en direkt ersättning för ett utvecklingsramverk, men det för visuell design ännu närmare att skapa funktionella sidor.
Abonnemang och priser: vad som ingår i gratisversionen
En viktig anledning till Figmas popularitet är att den har en mycket omfattande gratisplan, perfekt för nybörjare, för personliga projekt eller för de som utbildar sig inom UX/UI.
I gratisversionen kan du skapa upp till ett visst antal designfiler, använd FigJam obegränsat, samarbeta i realtid med andra människor och få tillgång till en stor del av de viktigaste funktionerna för design och prototypframtagning.
Dessutom erbjuder Figma en gratis utbildningsplan För studenter och lärare låser den upp avancerade funktioner i den professionella planen i utbyte mot att de verifierar sin akademiska status med ett institutionellt e-postmeddelande eller registreringsdokumentation.
För produktteam, byråer eller frilansdesigners som arbetar med flera kunder lägger betalda planer till mer aktiva filer, hanteringsalternativ, behörighetskontroll, bibliotek i större skala och företagsfunktioner som SSO eller centraliserad hantering av organisationer.
Hur man använder Figma på Android: vad du kan göra från appen
Figma-appen för Android fokuserar på att låta dig konsultera, granska och testa design Var som helst är det inte för djupgående design som man skulle göra på en stationär dator. Ändå erbjuder det mycket fler möjligheter än det först verkar.
Med appen kan du söka och öppna senaste filerUtforska projekt och team, granska interaktiva prototyper, delta i FigJam-whiteboards, visa presentationer och lämna kommentarer på arbetsytan. Det är idealiskt för att ge snabb feedback till teamet, validera arbetsflöden från en riktig mobil enhet och kontrollera dynamisk färgpalett eller visa ett förslag för en kund utan att ta fram din bärbara dator.
Den innehåller även fliken för SpegelramarDen här appen förvandlar din Android-enhet till en slags förhandsvisningsskärm i realtid för de designer du arbetar med på din dator. När du flyttar element, ändrar text eller justerar avstånd på skrivbordet uppdateras resultatet direkt på din mobila enhet.
Installera Figma på Android och logga in
För att börja använda Figma på en Android-mobil, gå bara till Google Play och ladda ner den officiella appen Utvecklad av Figma, Inc. Det är lämpligt att verifiera att utvecklaren är rätt utvecklare för att undvika inofficiella applikationer eller applikationer från tredje part.
Det rekommenderas att din enhet har den senaste versionen av Android som din mobila enhet tillåter, eftersom Figma förlitar sig på systemets WebView för att rendera filer. Ett uppdaterat system förbättrar prestanda, stabilitet och kompatibilitet med stora projekt.
När du öppnar appen för första gången blir du ombedd att Logga in eller skapa ett kontoDu kan använda samma metoder som du redan använder på din dator: e-post och lösenord, Google-inloggning, företags-SSO eller andra system som är konfigurerade i din organisation. Allt du gör från appen synkroniseras automatiskt med ditt molnkonto.
Organisationer, team och förändring på arbetsplatsen
Om du arbetar på ett företag, en myndighet eller en skola tillhör du förmodligen flera organisationer eller team inom Figma. I mobilappen ser du bara innehållet från en organisation åt gången, så om du inte hittar en fil kanske du helt enkelt letar på fel ställe.
För att ändra organisationen, tryck på Din organisations logotyp i det övre högra hörnet Välj sedan det utrymme eller personliga konto du vill komma åt. Du kommer att se listan över senaste filer, projekt, team och tillhörande aviseringar ändras direkt.
Om du ofta växlar mellan ett arbets- och ett personligt konto är det en bra idé att vänja sig vid att kontrollera den ikonen innan du antar att en fil har försvunnit. Ofta är problemet att Du är i fel organisation. och inte i den som innehåller projektet du letar efter.
Språk, grundläggande inställningar och aviseringar på Android
För närvarande erbjuder Figma-appen på Android officiellt gränssnittet i engelska och japanskaÄven om din telefon är inställd på spanska kommer menyerna och knapparna fortfarande att visas på engelska om du inte ändrar hela systemet till japanska.
Figmas språk är inte konfigurerat i appen, utan snarare... Den känner automatiskt av enhetens språk.Om du ändrar systemspråket anpassar sig appen därefter.
Angående grundkonfigurationen är det värt att granska aviseringsbehörigheter Direkt efter att du har installerat appen. Om Android har blockerat aviseringar för Figma får du inte aviseringar om nya kommentarer, omnämnanden eller filändringar.
Genom att trycka på din organisations logotyp i appen kan du öppna avsnittet aviseringar och justera vad du vill få som push-notiser: direkta omnämnanden, kommentarer på filer du följer, övergripande aktivitet etc. Helst bör du hitta en balans mellan att hålla dig uppdaterad om det som är viktigt och att inte överbelasta din telefon med ständiga aviseringar.
Sök, utforska och öppna filer från din mobila enhet
Huvudskärmen i Figma-appen på Android visar ett urval av dina senaste filer, prototyper och kortlekar, organiserad i sektioner så att du snabbt kan fortsätta där du slutade.
Du kan navigera runt fliken på Senaste för att hitta öppna designer från både skrivbordet och webbläsaren, eller använd alternativet "visa alla" för att få åtkomst till en bredare lista. Du har också en flik för sök vilket låter dig hitta filer och prototyper efter namn och komma åt objekt markerade som favoriter.
När du väl hittat önskad fil behöver du bara Tryck för att öppnaBeroende på dokumenttyp (design, FigJam, Slides eller prototyp) kommer appen att ladda motsvarande arbetsyta, tavla eller interaktiva vy. Tänk på att prestandan vid hantering av mycket stora filer i hög grad beror på din enhets kraft och kvaliteten på din internetanslutning.
Visa designer och kommentera på pekskärmen.
När du öppnar en designfil på Android anpassar appen den Canvas för vardagsbruk med pekgesterDu har ingen mus eller tangentbord, men du kan navigera mycket bekvämt för att granska och kommentera.
För att flytta runt på arbetsytan, tryck och håll ner en tom punkt och dra fingret i önskad riktningPå så sätt kan du flytta mellan olika ramar och områden i mockupen, även om filen är stor eller har många skärmar.
Om du behöver mer information eller en översikt, använd den klassiska gesten nyp med två fingrar för att zooma in eller ut. Det är särskilt användbart för att kontrollera textstorlekar, ikoner, justeringar och fina avstånd som lätt missas i en allmän vy.
När du vill lämna feedback, tryck och håll ner ett område på arbetsytan tills alternativet visas. Lägg till en kommentar förankrad till den specifika punkten. Detta gör att du kan påpeka fel, begära ändringar eller ställa frågor utan att förlora visuell kontext. Från arkivmenyn kan du också visa eller dölja kommentarsindikatorer, visa hela listan eller hantera andra användares åtkomstbehörigheter.
Arbeta med FigJam från Android
Figma-mobilappen tillåter Öppna och redigera FigJam-anslagstavlor På Android är detta utmärkt för att granska diagram, flytta post-it-lappar eller lägga till snabba anteckningar under ett möte eller när du är borta från kontoret.
På små skärmar är upplevelsen mer begränsad och kräver lite tålamod, men för lättare uppgifter som justera ett flöde, lägga till feedback eller ändra ordning på element Detta är oftast mer än tillräckligt. För långa brainstormingsessioner, komplexa ritningar eller intensiva workshops är det fortfarande bekvämare att använda en dator eller en stor surfplatta.
Om du arbetar med en iPad finns det till och med en specifik FigJam-app optimerad för stylus och multitouch, men på Android klarar du dig utmärkt med... Figma allmän app, som integrerar brädor tillsammans med resten av filtyperna.
Visa och testa prototyper på en riktig Android-enhet
En av appens huvudsakliga användningsområden är testning interaktiva prototyper på en riktig Android-enhetDet är viktigt när man designar mobilappar eller responsiva webbplatser, eftersom det låter dig uppleva användarupplevelsen på nära håll.
När du öppnar en prototyp kan du trycka på skärmen för att navigera mellan skärmarna baserat på de interaktioner du har definierat på fliken Prototyp. Om prototypen inte har några kopplingar går appen vanligtvis vidare till nästa skärm. nästa bildruta med varje beröringvilket också tjänar till att granska skärmsekvensen.
Prototyperna har också en dold menyrad Detta visas när du trycker och håller ner två fingrar på skärmen i några sekunder. Därifrån kan du ändra visningsalternativ, hoppa till andra skärmar eller justera detaljer utan att nödvändigtvis följa det etablerade interaktionsflödet.
Detta arbetssätt är perfekt för lära en kund ett arbetsflöde, genomföra snabba användbarhetstester med riktiga användare eller verifiera att animationerna och tiderna känns naturliga på Android-hårdvara, där pixeltätheter, prestanda och storlekar varierar avsevärt.
Spegla skrivbordsramar till mobilen
Spegelfunktionen är ett av de mest användbara knepen för mobilappdesigners: genom fliken Spegla från Android-appenDu kan visa de ramar du har valt i skrivbordsfilen i realtid på din telefon.
Det betyder att om du ändrar text, justerar utfyllnad eller flyttar en knapp på datorn, Du ser det direkt på din mobilskärm.med enhetens faktiska dimensioner och densitet. Det finns inget behov av att exportera bilder eller generera prototyper varannan minut.
Att arbeta på det här sättet hjälper dig att upptäcka saker i farten. läsbarhetsproblem, löjliga teckenstorlekar, för små knappar eller element som är svåra att trycka på med tummen. Det här är saker som kan verka okej på skärmen, men som känns obekväma i handen.
Det är också till stor hjälp för granskning komplexa komponenter, navigeringsfält, flytande menyer eller typiska Android-mönster i olika skärmstorlekar och upplösningar, finjustera dina designer innan du går vidare till utveckling.
Aviseringar, kommentarer och teamaktivitet
Fliken Aktivitet i Android-appen Den fungerar som en kontrollpanel för allt som händer i dina filer: nya kommentarer, direkta omnämnanden, relevanta ändringar eller projektinbjudningar.
Varje avisering presenteras som ett separat objekt. Genom att trycka på den visas en Sammanfattning av kommentar eller ändring utan att behöva ladda hela filen, vilket är väldigt praktiskt om du bara vill svara snabbt och fortsätta med det du höll på med.
Från den snabba svarsvyn kan du svara direkt, lägg till reaktioner (som en tummen upp) eller markera kommentarer som lösta om ändringen redan har tillämpats. Om du behöver mer sammanhang finns det ett alternativ att öppna kommentaren i hela filen för att se den omgivande designen.
Genom att kombinera dessa aviseringar med Android-systembehörigheter kan du justera "bruset" du får på din telefon, vilket är särskilt viktigt när du är en del av stora system med dussintals aktiva filer och konstant aktivitet.
Prototyper, Android-surfplattor och andra arbetsflöden
Utöver mobila funktioner överväger många designers att använda en Android-surfplatta som arbetsverktyg Delvis för prototypframställning, granskning eller ritning. Upplevelsen beror till stor del på enhetens kraft och om den har en penna med bra känslighet.
En vanlig kombination är att använda illustrations- eller bildredigeringsappar (Photoshop, digitala ritalternativ etc.) på surfplattan för den mer konstnärliga delen, medan Figma används för wireframes, gränssnittslayout och prototyper.antingen från webbläsaren eller från appen om det är tillgängligt.
Om du redan arbetar med hårdvara som en Wacom Cintiq kommer surfplattan knappast att ersätta skrivbordet helt, men den kan bli en Ett mycket användbart tillägg för att granska, skissa eller göra framsteg med lättare uppgifter. från soffan, på en resa eller i ett möte ansikte mot ansikte med klienten.
I alla dessa scenarier ligger nyckelvärdet i makt testa prototyper på riktiga skärmarAnvänd Android-appen för att se hur dina designer beter sig, justera detaljer direkt och ta skärmdumpar eller videor av dina arbetsflöden för presentationer och portfolios.
Felsökning av vanliga Android-problem
Precis som alla komplexa appar som förlitar sig på webbkomponenter kan Figma på Android drabbas oväntade stängningar eller isolerade fel, särskilt på gamla enheter, med lite minne eller föråldrade.
Om du märker att appen stängs av sig själv är ett av de första rekommenderade stegen att uppdatera Android-systemets webbvy från Google Play. Det här är den del som Figma använder för att visa innehållet i dina filer och prototyper.
Efter uppdatering av WebView är det lämpligt att Starta om enheten och öppna Figma igenI många fall korrigerar dessa två åtgärder stabilitetsproblem som orsakas av ändringar i operativsystemet eller äldre versioner av komponenter.
Om problemet kvarstår, kontrollera att din mobiltelefon har Tillräckligt med lagringsutrymme, stäng bakgrundsappar som förbrukar mycket resurser, och se till att du använder den senaste versionen av Figma-appen. Det är också viktigt att kontrollera att ingen säker webbläsare, VPN eller företagsprogramvara blockerar figma.com, särskilt om du använder företags-SSO för att logga in.
Med allt som Figma erbjuder – från visuell design, återanvändbara komponenter, avancerad prototypframställning, FigJam, Slides, AI, Dev Mode och mobilappen med bildspegling, testning på riktiga enheter och kontinuerligt samarbete – har det blivit en centralt verktyg för alla som designar digitala produkterAtt bemästra det, och lära sig att kombinera dator och Android effektivt, gör en tydlig skillnad i hastigheten, kvaliteten och robustheten i dina projekt. Dela den här Figma-handledningen så att fler kan lära sig hur man använder den.
