Ditt arbetsflöde i Figma?

TLDR: Hur ser ditt arbetsflöde ut i Figma där du tillämpar "Auto Layout" så du slipper ändra storleken i din valda "Frame" när du slänger in "Components" som kan innehålla hopfällbara delar (exempelvis en Default-komponent med en Variant-komponent som fälls ut och då tar upp mer plats)?

Hej! Jag håller på med prototypande i Figma och jag har nyss upptäckt det här med "Auto Layout" men får inte till det riktigt. Det verka kunna hjälpa en att kunna stoppa in "Components", "Frame Selections", "Group Selections" och liknande så att en "Frame":s storlek kan justeras av sig själv när man lägger till. Jag arbetar just nu med mobilprototyp: 320x863px i Frame-storlek.

Så här ser det ut just nu: Figma Prototyp Artboard

Här kan mobilprototypen provköras: Provkör Figma Mobilprototyp

Lägg märke till att texten är alldeles för liten. Jag upptäckte detta och fick återkoppling från klasskamrater att texten är liten, och många delar ligger för "klottrigt" ihop. I början av Webbutvecklingsprogrammet hade vi en kurs vid namn Webbutveckling I och där fick cirka en timmes genomgång av Figma på Zoom.

Detta visade sig genomföras av en lärare som fått kritik för att ha varit alkoholpåverkad under en lektion (förra året enligt en år 2-elev jag pratat med) men ändå fått behålla jobbet. Personen verkade knappt själv kunna hålla reda på vad denne gjorde inuti Figma.

Jag börjar få känslan av att Figma kommer att genomsyras resten av Webbutvecklingsprogrammet där prototypande är en viktig del av arbetsflödet. Vi i klassen fick som sagt var ingen vidare genomgång av detta fundamentala program. Jag har missat en inlämning i tid men det blir inte IG, utan bara lägre prioritering i rättningen. Haken är att jag måste få godkänt på min Figma-prototyp innan jag ens får börja koda det som visas i Figma och det är vad jag stör mig på.

I Webbutveckling I-kursen kodade jag först hemsidan och sedan avbildade den i Figma så det såg ut som om jag hade gjort tvärtom. Så dålig var jag på Figma då. Titta gärna i min prototyp, jag är lite bättre nu!

Men jag måste få förståelse om hur jag sätter en Auto Layout vertikalt i en mobil-Frame och sedan så att skapade "Components" expanderar ut dess storlek. Kan man ha så att den expanderar ut även om man har en <footer> längst ned i Frame:n? Se i min prototyp hur varje webbsida har en <header> och en <footer>.

Sedan så verkar jag också få problem med element som jag vill ska Auto Layoutas från vänster till höger grupperat men bara Auto Layoutas vertikalt i själva Frame:n eftersom en mobiltelefon har sådan layoutstruktur.

Till sist så känner jag att jag lider lite av "Imposter Syndrome" då jag tycker att min design ser så jädrans ful ut? Jag valde inte programmet för att bli webbdesigner utan webbutvecklare varav namnet. Ändå sitter man här i Figma och håller på som någon amatöraktig visuell designer innan man ens får tillstånd att få börja koda?! 😂

Mvh,
WKL.

Jag har haft min "Figma-inkörning" nu och i efterhand så var det en matnyttig upplevelse. När jag började förstå tänket med Components, Frames och Auto Layout så blev det rätt intuitivt efter ett tag!

En Frame kan ses som en Div och Auto Layout är som Display: flex; för dess inre Frames och HTML-element. Man väljer då att visa som en Column eller Row (begränsat i Auto Layout, mer flexibelt i den faktiska webbkoden såklart) och sedan får man fortsätta så med alla Frames och dess innehållande HTML-element (rubriker, paragrafer, grafikelement).

justify-content och align-items simuleras i Figma med hjälp av den där 9-punktsfältet där man kan välja hur innehållet i en given Frame ska justeras (topp vänster, topp mitten, topp höger, och så vidare).

Detta fick mig också att fundera om display: inline; och display: block; är förlegade (förutom för gamla webbläsare) eftersom allt skulle kunna ses som display: flex; i Kolumner och Rader? Jag tänker att body som Parent kan använda display: flex; som en enda stor kolumn för alla Children-element såsom header, main och footer?

Components är bra för att skapa återkommande delar och sedan Variants (exempelvis en engelsk version av komponenten). Detta hjälper också till att strukturera webbsidornas olika delar. Kruxet var när jag ville förflytta om delar i en Component Instance. Då upptäckte jag att man kan högerklicka på den och välja "Dettach component" och vips så blev den som om jag hade copy&paste en Frame med allt dess innehåll!

I Prototype kan man lägga till interaktivitet med hjälp Interactions för att simulera länkar. Och en sak som inte ens mina lärare visste om var att när man kör prototypen och andra kör den samtidigt så kan klicka på deras användarikon och följa deras körning som om man observerar dem.

När man väljer en Flow starting point så är det en startpunkt för när man kör prototypen var man vilja börja någonstans. Det har dock ingenting med interaktiviteten att göra. Sistnämnda måste lösas med Interactions för varje givet element som ska vara "navigerbar-/interaktivt" på något vis. I prinbcip behöver man bara en startpunkt för varje webbplatsvariant (exempelvis till startsidan i mobilversionen, till startsidan i desktopversionen, och liknande) och så sköter man hoppandet mellan olika webbsidor med hjälp av "Prototype" -> "Interactions" -> "Navigate to" -> välj rätt Frame/webbsida.

Jag bara skriver min sammanfattning här så någon annan stackare som känner sig lika borta som jag gjorde först får en mycket snabb genomgång om tänket med Figma. Självfallet kan det förekomma faktafel här så de mer insatta webbdesigners som livnär sig på Figma får gärna rätta mig där jag har angett faktafel!