Figma – min nya favorit
Jag minns tiden där designers satt i Photoshop och arbetade med webbdesign. Lager tändes och släcktes för att kunna exportera olika sidtyper och leveransen till utvecklarna var ofta en zippad mapp med bilder. Som tur är går tekniken framåt i en rasande fart och program anpassat för just digital design släpps på löpande band.
Mitt senaste favoritprogram är Figma. Jag var absolut lite tveksam till en början då jag använt Adobe XD i flera år och trivdes väldigt bra med det. Men ett nytt kundprojekt krävde att Figma användes som verktyg, så det var bara kasta sig in Figmas värld.
Och visst är verktygen lika, båda är anpassade för UX/UI. Det tog dock en liten stund att vänja sig vid nya kortkommandon och få till ett workflow som passade mig. Men när polletten trillade ner insåg jag hur kraftfullt Figma faktiskt är och vad mycket coolt man kan göra!
Mina fem Figma-favoriter
Så, vad är det jag gillar med Figma? Här kommer fem grejer:
Samarbete
När pandemin kom tvingade vi oss till en välbehövlig push när det gäller samarbete och där tekniken verkligen har fått visa vad den går för. Just samarbetsdelen är faktiskt det som jag gillar mest med Figma.
Figma är ett webbaserat verktyg, vilket betyder att du kan använda det direkt i din webbläsare. Detta gör att det enkelt går att samarbeta mellan olika kompetenser i teamet, genom att bara dela en länk. Din copy-kollega kan fylla designskisserna med bra innehåll och utvecklarna kan vara inne och hämta bilder, färger och kodexempel. Samarbetet i filerna sker dessutom i realtid, lite likt Google docs, så du ser vad dina teammedlemmar jobbar med.
Du kan såklart sätta olika behörighet på de du bjuder in i filen så att inte någon råkar radera alla komponenter du har byggt upp. Men skulle det ske finns det å andra sidan en inbyggd versionshantering så att du lätt kan återställa dina filer.
Struktur
En annan sak som jag gillar extra mycket med Figma, är möjligheten till att strukturera dina filer på ett smidigt sätt. Allt ditt team arbetar med finns samlat på ett ställe. Du behöver aldrig ta reda på vem i teamet som har projektfilen på sin dator eller försöka hitta den senaste versionen, detta sköter Figma åt dig. Dessutom är det lätt att bryta ner varje projekt i mindre beståndsdelar, men ändå ha allt samlat på ett ställe. Förutom att underlätta ens dagliga arbete, är det även lätt för nya teammedlemmar att hitta rätt filer att börja jobba i.
Prototyping
Det är superlätt att få till kraftfulla prototyper med hjälp av Figmas inbyggda funktioner. Med relativt lite ansträngning kan du även få till effektfulla animationer. Detta är perfekt för att du ska kunna föra vidare dina visioner när du lämnar över designen till utvecklarna. Det är alltid lättare att visa exempel på en animation, än att försöka förklara hur du vill att något ska upplevas.
För att få en ännu mer ”äkta upplevelse” går det dessutom att välja vilken device din prototyp ska visas i. Det går även att koppla upp din prototyp till en riktig device, vilket underlättar vid användartester av exempelvis appar. Då kan actions som ”swipe” testas, en funktion som är svårare att testa på en dator.
Komplexitet
Figma har potential att användas i hela designprocessen; från konceptskisser och wireframes, till detaljerad UI-design där prototypfunktionen möjliggör att användartester går att genomföra på ett enkelt sätt. Med Figmas inbyggda kommentarsfunktion går det även att på ett smidigt sätt iterera fram lösningar med direkt feedback från kunden.
Något annat som är väldigt effektfullt är användandet av komponenter, alltså återanvändbara element. Dessa komponenter går även att göra responsiva med hjälp av funktionen ”auto layout”. Så när du ändrar bredden på din komponent kommer alla delar att lägga sig på rätt ställe beroende på vilka regler du har satt upp i figma. Perfekt när man arbetar med hemsidor som ska fungera både i mobile, tablet och desktop.
Plugins
För att underlätta ditt arbete ytterligare, finns en hel drös av användbara plugins! Jag har listat några av mina mest använda:
Unsplash
Ett bildbibliotek som du kan använda för att fylla din design med härliga bilder. Figma "resizear" även bilden beroende på vilket element du väljer att bilden ska läggas till.
Lorem ipsum (den heter så)
Arbetar du med webb känner du garanterat till Lorem Ipsum. Det är text som du kan använda för att fylla ut din design innan det riktiga innehållet är på plats.
Feather icons/material icons
Två olika designbibliote som laddar in svg-ikoner direkt i din Figmafil.
Contrast checker
Jag försöker att se till att alla projekt jag jobbar i har tillräckliga kontrastvärden för att det ska gå att se allt innehåll. Då är detta verktyg perfekt då det hjälper till att kolla kontrastvärden på alla dina design-element.
Nackdelar?
Självklart finns det funktioner jag saknar, men trots det så är Figma ändå mitt favoritverktyg för webb och appdesign. Jag hoppas på att kunna fördjupa mig ytterligare i Figmas alla funktioner så att jag en dag kan kalla mig för Esattos Figma-ninja!
