Figma transformerer hele min arbejdsgang

Og det er fantastisk!

Figma sendte for nylig den første fulde udgivelse af deres Team Libraries-system. Det er ingen hemmelighed, at jeg har været besat af udviklingen af ​​dette produkt. Jeg gik skeptisk til en webbaseret cloud-app som et dagligdags designværktøj og kom over-the-top imponeret over ikke kun ydeevnen (i det at den føles mere lydhør og indfødte end du nogensinde ville forvente, at en web-app skulle føle ), men også med hensyn til, hvor meget mening det giver for denne type værktøj at leve fuldstændigt i skyen. Hvis du nogensinde var ved hegnet - Team Libraries er den perfekte grund til at komme om bord.

Så i min tredje del af Figma-centriske artikler, her er hvad jeg gerne vil dække:

  1. Mindre værktøjer, mere design
  2. Teambiblioteker og komponentorganisation
  3. Hvordan jeg bruger Figma i et kreativt team

Mindre værktøjer, mere design

Jeg læser ofte kommentarer, der spreder samtalen om designværktøjer kun for at gøre det indlysende punkt, at bedre værktøjer ≠ bedre design. Dette har altid været tilfældet - værktøjerne vil altid tage bagsædet til gode ideer. Jeg tror dog, at ethvert værktøj, der reducerer friktion under designprocessen, har potentialet til at omdirigere tid og energi tilbage til rent faktisk at designe. Siden jeg flyttede til Figma, er der færre forhindringer, som jeg er nødt til at overvinde. Dette betyder, at der kan bruges mere tid på at forbedre og itereere, i stedet for at tackle logistikken med at opbygge, dele, samarbejde og vedligeholde filer. En del af dette er reduktion af yderligere værktøjer og tjenester, der kræves for at få arbejdet gjort.

Nogle eksempler på yderligere værktøjer eller tjenester, som jeg ikke længere har brug for:

  • tredjeparts prototypingværktøjer med lav troværdighed (eller dårligt integrerede plugins) for at lave enkle klikfiler
  • tredjeparts tjenester / værktøjer til at lette samarbejde og kommentarer
  • tredjeparts tjenester / værktøjer til at lette udviklerens hånd-off
  • cloud / netværklagringstjeneste til at dele filer eller værtbiblioteker
  • tredjeparts version kontroltjenester / værktøjer

Alt dette sker problemfrit i Figma, og det blev bare bedre - de nye Team Libraries introducerer et brugervenligt komponentudgivelsessystem, der lever i skyen sammen med dine designdokumenter. Hvad betyder det? Enhver komponent, du designer, kan offentliggøres på dit teams bibliotek og trækkes ind i ethvert af dine projekter. Hver forekomst opretholder et link tilbage til den originale masterkomponent (som bliver din eneste sandhedskilde). Hvis du foretager ændringer, giver du de opdaterede komponenter til dit teams bibliotek muligheden for at opdatere dem i enhver fil, der indeholder en forekomst. Dette betyder naturligvis mindre tid på vedligeholdelse af komponenter, men vigtigere er det, det gør det meget lettere at skabe justering og konsistens, når alle bruger de nyeste komponenter.

Alle komponenter i dit Team Library kan let offentliggøres og opdateres i ethvert projekt, der bruger dem.

Figmas sidste store opdatering (kun 2 måneder før!) Introducerede den første iteration af klik-prototype. På få sekunder kan du begynde at linke skærme sammen for at levere en prototype. Det er kombineret med smarte funktioner, hvor sammenkoblede komponenter vil huske, hvilken ramme du har knyttet til, og automatisk oprette disse forbindelser i alle tilfælde. Dette er kun en af ​​mange ”små store detaljer” i Figma, der sparer dyrebar tid.

Oprettelse af klik-prototyper er lige så let som at skifte til prototype-tilstand og knytte objekter til skærme.

Sammen med denne opdatering leverede de også udviklerhånd-off-funktioner, der gjorde det muligt for udviklere, selv uden en betalt konto, at inspicere og eksportere aktiver. Hvis du ikke allerede har gjort matematikken, er Figmas økonomi meget tiltalende, når du tager hensyn til mængden af ​​andre abonnementstjenester, som du ikke længere har brug for.

Og på denne note vil jeg også tilføje, at jeg værdsætter, hvordan Figma skelner mellem seere og redaktører - at give seerne mulighed for at kommentere og inspicere filer er en enorm fordel og reducerer en masse friktion, når du ikke behøver at bekymre dig om at tilføje betalte brugere til dit team bare så de kan efterlade et par kommentarer. At skulle konstant håndtere licens- og budgetgodkendelser på min arbejdsplads ville være nok til at få mit hoved til at eksplodere .

Teambiblioteker og komponentorganisation

Da jeg begyndte at migrere min arbejdsgang fra Sketch til Figma, må jeg indrømme, at jeg oprindeligt følte mig lidt tabt uden et sted at placere mine komponenter, eller en nem måde at få adgang til dem. Jeg savnede virkelig “Symboler” -siden. Gå ind i teambiblioteker. Nu kan du ikke kun udgive komponenter fra ethvert projekt til Teambiblioteket, du kan også nemt få adgang til enhver komponent i din fil fra komponentpanelet. Den venstre sidebjælke, der tidligere kun var forbeholdt lag, har nu tre faner: en til lag, en til komponenter (lokal til dit dokument) og en til adgang til komponenterne i dit Team Library (Tip: tastaturgenveje alt + 1, alt + 2, og alt + 3 er virkelig praktisk til hurtigt at navigere mellem faner).

Komponenter (lokal til dit dokument og fra dit teams bibliotek) kan trækkes og slippes ind i dit dokument fra sidebjælken.

Introduktionen af ​​komponentflikene ridset på "Symbolsiden" kløe, som jeg nævnte før. Disse faner gør det virkelig let at få adgang til de komponenter, der muligvis ikke er en del af dit teams bibliotek endnu. Disse kan være engangskomponenter eller de, der stadig er i designfasen.

Organisering af dine komponenter i dit teams bibliotek kan udføres på en række forskellige måder. Du kan vælge at opsætte et hoveddokument til at huse hele dit designsystem eller opdele det i flere filer. Du kan også blot offentliggøre komponenter fra de dokumenter, hvor du har skrevet dine masterkomponenter, uden at migrere dine komponenter til deres egen fil. Dette fungerer godt, men jeg synes, det er meget lettere at vedligeholde dokumenter dedikeret til komponenter, hvis du har et stort UI-system. På grund af den måde, Figma vil organisere komponenter i ruden Teambiblioteker, kan du bruge rammer eller grupper til at sortere dem i logiske spande (f.eks .: knapper, faner, formelementer, alarmer osv.). Ændring af baggrundsfarve på rammer eller grupper opdaterer forhåndsvisningen i sidebjælken. Naturligvis er mulighederne uendelige, når det kommer til hvordan du organiserer dit system. William Newton skrev en stor artikel om, hvordan han organiserer sine komponenter på Gusto her.

Hvordan jeg bruger Figma i et kreativt team

Da mange af de Figma-succeshistorier, jeg har læst om, er produktcentriske, tænkte jeg, at jeg indtil videre ville dele mine oplevelser med at arbejde med Figma i et kreativt team. Holdet, jeg arbejder med, er lille, og jeg er den eneste dedikerede digitale designer. Du spørger måske ... hvilket behov har en enkelt designer til et skybaseret værktøj med multiplayer- og komponentbiblioteker?

Præsentationer og deling
Lad os starte med multiplayer. Jeg ser diskussion om manglen på behov for, at flere designere arbejder på den samme fil. Selvom jeg allerede har oplevet stor succes med at bruge det til at samarbejde med andre designere til hurtigt at generere og afskrive ideer, ser jeg en masse fordele for ikke-designere. For eksempel har vi ofte check-ins ugentligt eller hver anden uge på projekter, hvor jeg er forpligtet til at præsentere en statusopdatering. Tidligere i disse opdateringer ville jeg ofte dele min skærm (lav kvalitet, skaleringsproblemer, yderligere software, "vær venlig at promovere mig til præsentator!"), Eller jeg er nødt til at eksportere stadig comps og distribuere dem, så samarbejdspartnere og interessenter kunne se dem på 100 % størrelse. Det var vanskeligt at anmode om feedback, og det involverede mig normalt at skribbe masser af noter eller kæmpe gennem kommentarer i PDF-filer.

Ved at introducere mine samarbejdspartnere til Figma kan jeg blot dele en URL til projektet forud for opkaldet. Jeg behøver ikke at forberede en præsentation eller eksportere noget. Jeg kan bare bruge Figma! De, der ringer op, kan blot klikke på URL-adressen, og de ser nu på den samme fil, som jeg har arbejdet med direkte fra værktøjet.

Ved at klikke på min avatar øverst til højre kan de se min skærm, og jeg kan levere min præsentation. Undervejs kan enhver bruger, der ønsker at gå tilbage og undersøge noget mere detaljeret, blot slukke for at observere mig og gennemse de forskellige rammer uden at forstyrre præsentationen. Eventuelle spørgsmål eller feedback er let at adressere, fordi jeg bare kan skifte til deres syn for at se, hvad de ser på og følge deres markør. Hvis det er nødvendigt, kan jeg også fremstille variationer, redigeringer eller forslag lige i dokumentet, så alle med det samme kan give feedback på. Hvis noget er for stort til at tackle i realtid, efterlader jeg ofte kommentarer i hele designet med kommenteringsværktøjet, så jeg kan henvise til dem senere. Alle disse ting fører til hurtigere iterationer, mindre notater, mindre frem og tilbage og i sidste ende til hurtigere godkendelser.

Præsentere, iterere og samarbejde live fra et værktøj! At observere andre er en god måde at finpudse på bestemte områder af et design.

Det samme er tilfældet, når man deler arbejde for feedback uden for live-præsentationer. Figma har støt tilføjet understøttelse af levende embeds (hovedsagelig en iframe, der viser dit Figma-dokument) til mange førende projektstyringsværktøjer. Der er ingen eksporterende comps til dit skrivebord og uploades for at dele. Du opretter blot et link tilbage til dit live-dokument, hvilket eliminerer forvirring omkring, om nogen ser på den nyeste version eller ej.

Retningslinier
Vi har også brugt Figma til at fremstille specifikationsdokumenter til forskellige webejendomme. I stedet for at producere og vedligeholde en tidskrævende PDF, kan vi dele en Figma-url, der inkluderer en skala-version af webejendommen, med noter og designretningslinjer for interne indholdsskabere, udviklere og webstedsforfattere til reference. Undervejs, hvis vi er nødt til at foretage ændringer, fordi Figma URL er live, er vi bare nødt til at foretage ændringer i designet og det er klar til at gå.

Retningslinjer for brand-konsistens og bedste praksis for forfattere, indholdsskabere og webadministratorer. Et live link til Figma betyder, at alle altid har adgang til det nyeste.

En proces under udvikling
Når vi begynder at dykke ned i et massivt webstedsprojekt, bliver Figma hurtigt en vigtig del af vores proces. Vi vil producere vores wireframing- og lavtidelighedsprototyper i Figma helt frem til den visuelle designfase. Under denne proces vil vi begynde at etablere komponenter og skubbe dem til teambiblioteket til brug på tværs af mange filer. Når vi udsætter komponenterne i forskellige scenarier, og designet udvikler sig, vil det være en enorm tidsbesparelse at kunne foretage ændringer, der er globale på tværs af alle filer. Kom tid til udvikling, når vi tester komponentdesignerne i kode, vil enhver ændring af designet på grund af implementering bede os om igen hurtigt at opdatere vores komponenter til at afspejle produktionsmiljøet.

At have det komplette bibliotek med komponenter, der afspejler produktion, vil være en spiludveksler for vores interne processer, når det kommer til at offentliggøre nyt webindhold. Ikke længere er processen fanget i web-teamet, hvor designteamet kun er involveret i at give designanbefalinger eller en håndfuld aktiver, vores team kan nu svare ved hurtigt at spotte sider i forskellige visningsstørrelser ved at udnytte vores forud godkendte og udviklet komponentsystem fra Teambiblioteket. Indkøb og godkendelse findes nu i vores team (langs side brand håndhævelse), og webstedsadministratorer har nu en pixel-perfekt blåprint for nem implementering.

Brug af dette værktøj og interaktion med teamet hos Figma undervejs har været en fantastisk oplevelse. Holdets smidighed er imponerende, når du overvejer, hvor hurtigt de tilføjer innovative og stabile funktioner til produktet og ikke kun lytter, men faktisk hurtigsporende implementering af brugerfeedback. Det giver et tillidsniveau, at alle ønskede funktioner, der muligvis mangler, sandsynligvis ikke er så langt nede ad vejen, og det er sandsynligvis grunden til, at et link til deres udgivelsesnotater har fundet et sted i min bogmærkelinje. Min tid tilbragt i Figma er normalt den mest underholdende og mest produktive del af min dag. Jeg håber, at min spænding på kontoret er smitsom, når vi får flere samarbejdspartnere til.

Del dine oplevelser!

For dem, der ligger tæt på Waterloo, ON, vil jeg være vært for en aften i Accelerator Center, hvor jeg vil præsentere en live demo om Figma og dens evner den 24. oktober. Mere info her.

Ansvarsfraskrivelse: Figma fandt, at denne artikel var nyttig for andre designere, så de annoncerer den på Twitter og Facebook med min tilladelse.