Figma för writers – föreläsning av Please copy me

Det var Mattias Åkerberg på Please copy me som arrangerade föreläsningen Figma for writers.

Johan Lindqvist på Montis, just nu UX Lead på PostNord, höll i föreläsningen och berättade om de smartaste funktionerna och hur vi löser de vanligaste problemen.

Under föreläsningen fick vi lära oss mer kring de grundläggande verktygen i Figma och en massa smidiga kortkommandon.

Lära oss mer kring de grundläggande verktygen i Figma och en massa smidiga kortkommandon.

Vi fick även tips för att arbeta i team med designers och utvecklare. Hur du strukturerar en fil är A och O för att samarbetet och samskapandet ska bli bra och fungera.

Just den här matiga föreläsningen var anpassad för både nybörjare och den som arbetar mer avancerat i programmet.

Jag befinner mig (än så länge) någonstans mitt emellan och jag vill verkligen bli bättre.

Vi började med att presentera oss i Figma för de andra deltagarna. Vi bytte bild, skrev texter och markerade hur erfarna vi kände oss med programmet.

Så här presenterade jag mig själv (skärmdump från min presentation i Figma):

Det är smått otroligt att jag glömde (förträngde?) mina sex månader som förskollärare på Borgaregatans förskola i Olskroken i Göteborg.

Det var egentligen mitt första jobb efter att jag tagit min lärarexamen 2005. Men tillbaka till Figma och föreläsningen.

Först, vad är Figma?

Figma är ett UX-designprogram där UX-writers och UX-designers kan jobba ihop, samtidigt i samma dokument.

Glöm olika versioner och förvirrade avstämningar.

Hur många Word-dokument har jag inte skickat till kollegor och kunder som de har redigerat, sen lagt till sina initialer och skickat tillbaka?

Vissa dokument sågs aldrig mer, förlorade för alltid.

Vissa dokument sågs aldrig mer, förlorade för alltid.

Google docs förändrade detta och vi kunde arbeta i samma dokument samtidigt. Och visst, det går också att arbeta i samma Word-dokument samtidigt via OneDrive.

Detta är ju toppen! Om du vill jobba med dokument.

I Figma behöver du inte dela Google docs eller skicka Word-dokument till en designer som lägger in texterna i designen. Du som UX-writer skriver texterna direkt i Figma.

Ingen behöver fundera över vilken fil som är den senast uppdaterade; ni jobbar tillsammans i Figma. Dessutom sparas allt automatiskt.

Content + design = Figma

Figma för ihop och förenar content och design, utan att det skaver. Programmet är webb-baserat men du kan också ladda hem desktop-appen.

Figma för ihop och förenar content och design.

Så här skriver Figma själva: Figma is great for people who are new to design because it’s free and works everywhere (including computer labs).

Unlike other design tools you don’t need a masters degree, the features are simple and intuitive so you spend more time learning how to design instead of how to use a design tool.

Bra plugins för Figma

Johan tipsade om flera bra plugins såsom Ditto, HTML to Figma, Unsplash och Blush.

Bra plugins såsom Ditto, HTML to Figma, Unsplash och Blush.

Ditto hjälper teamet att samarbeta kring text. Det kan ses som en central sanningskälla för text och det hjälper dig som UX-writer att hantera orden i hela produkten.

Ditto gör det enkelt att hantera text till olika filer och att samarbeta kring texterna i teamet.

Du kan bland annat söka efter text i dina moduler, visa detaljerad redigeringshistorik för din text samt se framsteg och granska status (är texten godkänd eller inte).

Unsplash-plugin:et hjälper dig att infoga bilder direkt från Unsplash.

Infoga bilder direkt från Unsplash.

Tack vare Unsplash-licensen kan du använda bilderna fritt för såväl personliga som kommersiella projekt. Hur smidigt?

HTML to Figma konverterar webbplatser till Figma-lager genom URL. Det här plugin:et kommer jag sannolikt använda flitigt framöver.

Vi fick även tips om Blush som hjälper dig att skapa och anpassa illustrationer.

De har en “forever free” plan som gör att du kan använda illustrationerna i både personliga och kommersiella projekt.

Övning: hantera text i Figma

En övning handlade om att hantera text.

Vi skulle applicera en layout grid, ändra antalet kolumner, linjera texten inom arbetsytan och applicera en lämplig formatering på texten.

När jag var klar skulle jag släcka min layout grid tillfälligt med ögat. Resultatet:

Vad lärde jag mig?

🖥️ Grunderna i Figma: att hantera frames, komponenter (och döpa dem smart från början så jag kan hitta dem sen), constraints och många smarta kortkommandon.

👩‍💻 Att jobba själv: att importera sidor och presentera ord och meningar för min uppdragsgivare.

👯 Att jobba i team: förstå UI libraries och hur jag kommunicerar status (med UX-designers och utvecklare).

🛠️ Massa smarta plugins och verktyg.

💻 Grunderna i att göra prototyper.

🔑 Varför ett design-system är nyckeln för att göra ett bra jobb.

Framöver kommer jag även gå loss och använda färdiga wireframe kit från Figma communityt. Communityt är verkligen en guldgruva och vi behöver inte uppfinna hjulet på nytt.

Communityt är verkligen en guldgruva.

Vi fick även tips om att skapa en inspiration page i Figma. Idén kommer ursprungligen från Yuval Keshtcher på UX Writing Hub.

Tanken är att kategorisera och strukturera upp inspiration med till exempel bra mikrocopy på knappar. Detta blir bättre än mitt nuvarande oöverskådliga sätt med skärmdumpar åt höger och vänster.

Det var en matig eftermiddag i designens tjänst. De fyra timmarna gick otroligt snabbt och jag önskar bara vi haft tid för fler övningar.

Figma och UX-writing är otroligt kul!

Figma Tutorials och min fösta kontakt med programmet

Jag kom först i kontakt med Figma under UX Writing Hubs kurs. Det var kärlek vid första ögonkastet om man nu kan ha det till ett program.

Jag förstod direkt hur Figma kan hjälpa mig (och de UX-designers som jag jobbar med) så vi kan göra ett bättre jobb.

Jag förstod direkt hur Figma kan hjälpa mig.

Jag har hittills gjort en handfull projekt i Figma. Den här webbplatsen är ett av de projekten.

Förstod jag hur jag skulle jobba i Figma direkt? Nej, absolut inte. Jag har varken jobbat i Sketch eller Adobe XD förut, så startsträckan var längre för mig än någon som har förförståelse för sådana typer av program.

Men det är ett enkelt program att jobba i.

Är du nyfiken på Figma?

Kolla in Figmas tutorials på Youtube. Dessutom erbjuder DesignLab en gratis sju-dagars-kurs i Figma.

Du behöver lägga ner cirka 30 minuter om dagen.

Jag gillar Figma eftersom det är transparent. Det är lätt att samarbeta och samskapa i programmet.

Jag gillar Figma eftersom det är transparent.

På så vis kan ledtiderna bli kortare och det är även enklare att få feedback från kund och användare. Det är bara att skicka en länk.

Vill jag sadla om och bli UX-designer nu? Kommer jag bli Mrs Pixel perfection? Nej, jag tycker fortfarande alldeles för mycket om att skriva.

Däremot har jag en större förståelse och mer kunskaper i hur jag och UX-designers kan arbeta tillsammans i Figma. Jag längtar till nästa projekt där jag får gå loss i Figma.

Vill jag sadla om och bli UX-designer?