En Sketch-brugers perspektiv på at skifte til Figma

Alt hvad du har brug for at vide

Illustration oprettet til Figma-blog af Peter Barnaba

Figma-editorens note: Vi lægger normalt ikke Figma-anmeldelser på vores blog, men her lavede vi en undtagelse. Marco Pacifico forklarede vores værktøjs fordele bedre, end vi kunne have, så vi ønskede, at hans artikel (som oprindeligt blev vist på Prototypr.io) skulle være en ressource for vores brugere. Tak Marco for at have lader os krydse det !

Jeg brugte Figma i en måned, og jeg blev sprængt væk af dens funktioner og hvor godt det fungerer. Jeg kunne godt lide det så meget, at jeg har kampagne for, at mit team skiftede fra Sketch. Dette indlæg er tilpasset fra samtaler, jeg har haft på arbejdet, og det er en slags tonehøjde for produkthold, især distribuerede, der taler om, hvorfor Figma er bedre på mange måder, der betyder noget.

Lad os først få det grundlæggende ud af vejen

Figma er et webbaseret designværktøj med realtidssamarbejde

Det er som Craft Freehand, men med alle funktioner i Sketch (og mere). Det fungerer i webbrowsere, og der er også indbyggede apps, der lader dig arbejde offline.

Hvorfor er webbaseret en god ting?

  • Der er ingen software til at downloade, installere og løbende opdatere.
  • Der er ikke behov for at gemme og organisere dine filer. Dit arbejde gemmes automatisk på et delt rum i skyen.
  • En URL bliver kilden til sandheden, som alle får at se. Hvilket betyder…
  • Det er ikke nødvendigt at kontinuerligt uploade, synkronisere og arrangere PNG'er flere steder.

Men er Figma langsom?

Nix. Folk oplever, at Figma er mere performant end Sketch. Dette har også været min oplevelse, selv når jeg arbejder med en stor fil.

Men hvad med Sketch-økosystemet? Sketch har så mange plugins, som vi stoler på til vores arbejdsgang

Nå, jeg er her for at fortælle dig, at vi ikke mister noget væsentligt ved at bruge Figma; vi ville kun vinde.

Figma har alle funktioner og funktioner i Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox alt sammen, plus en masse mere. Her er blot nogle af de funktioner, som Figma har:

  • En lignende grænseflade og alle de samme tegneværktøjer som Sketch.
  • Prototyping. Figma har en klikbar prototypefunktion, der ligner Craft + InVision.
  • Indbygget kommentar. Enhver med linket kan tilføje kommentarer hvor som helst på designet, svarende til hvordan kommentarer fungerer i InVision. Du kan tagge folk i kommentarer, markere kommentarer som løst og endda integrere med Slack.
  • Udvikler Handoff. Enheder kan få dimensioner, stilarter og downloade ikoner og billeder fra projektets URL. Det er som Zeplin, men igen, behøver du ikke at synkronisere dine tegnebræt, hver gang du opdaterer dine designs.
  • Versionskontrol. Figma inkluderer versionhistorik for alle samarbejdspartnere. Du kan rulle tilbage til eller gaffel fra en tidligere tilstand. Dette fungerer som en tidsmaskine på en Mac.
  • Multiplayer-samarbejde. Flere mennesker kan samarbejde i realtid. I lighed med Freehand ser vi alle hinandens markører på skærmen og kan tegne ting og komme med kommentarer.
  • LiveShare. Hvis du klikker på andres avatar, får du se, hvad de ser på deres skærm og følger deres markør rundt. Dette fungerer ligesom InVision Liveshare (RIP Liveshare).
  • Komponenter. Ligner symboler i skitse, men mere fleksible og lettere at designe med. (Mere om dette nedenfor)
  • Begrænsninger. Ligner størrelse i størrelse, men mere intuitivt.
  • Holdbiblioteker. Du kan dele og opdatere samlinger af komponenter på tværs af projekter.
  • Bonus: du kan endda integrere Figma-projekter i Dropbox Paper.

Lad os komme til de virkelig gode ting ...

Figma dækker alle baser med de funktioner, der er nævnt ovenfor. Men det bliver virkelig interessant, når du overvejer, hvordan det forbedrer vores arbejdsgang.

Nedenfor er fire måder Figma grundlæggende kan forbedre, hvordan vi arbejder.

1. Vi kan iterere WAY hurtigere med realtidssamarbejde

Du kan foretage en designanmeldelse, foretage opdateringer på farten og straks få feedback om dine ændringer. Tiden mellem iterationer kan gå fra dage ned til minutter, fordi der er nul tid spildt upload eller synkronisering af skærme, oprettelse af delingslinks, messaging-folk til at se på linkene osv. Da jeg oplevede denne førstehånds var det så forbløffende, at jeg udgød en enkelt glæde.

Nedenfor er nogle af de virkelige livsscenarier, der kan gøre arbejdet langsomt og kedeligt på de bedste tidspunkter og utroligt frustrerende i de værste tider. Alle disse scenarier forsvinder ved hjælp af Figma:

  • Når du, efter at du har synkroniseret alle dine skærme til InVision, indser, at du vil øge skriftstørrelsen lidt i en headerkomponent, så du foretager ændringen i din designfil og derefter skal synkronisere alle skærmbilleder til InVision igen.
  • Når du bruger Craft til at synkronisere en kompleks, multi-screen prototype til InVision og derefter skal bruge, hvad der føles som en times tid på at trække og droppe skærmene i den rigtige rækkefølge i InVision, fordi Craft uploader dem i en tilfældig rækkefølge.
  • Når nogen i en anden tidszone glemmer at begå eller uploade deres arbejde, så skal du vente til de er tilbage online for at få de nyeste designs.
  • Når der er en softwareopdatering, og alle tredjeparts plugins går i stykker, og du mister timer.

2. Vores designproces bliver mere inkluderende og problemfri

Pludselig bliver designfilen et sted, hvor enhver kan mødes og diskutere designene. Dette betyder, at det er lettere for designere at arbejde parallelt, udforske muligheder og iterere i kortere trin. Dette betyder, at udviklere kan få øje på og tale tekniske problemer tidligere end senere. Og det betyder, at interessenter, projektledere eller enhver med linket kan se, hvordan designet udspiller sig fra en idé til et poleret visuelt, snarere end at vente på en stor afsløring.

I stedet for at fragmentere designprocessen på tværs af flere filer, er der nu et sted, der kan fortælle hele historien og udvikle sig, når designprocessen udfoldes.

Jeg kan godt lide hvad Thomas Lowry, en designer hos OpenText, skrev om, hvordan hans designproces er ændret ved hjælp af Figma:

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.

3. Vores overgang fra design til kode vil sandsynligvis være hurtigere og mere konsistent

Det er fordi med Figma er det lettere at strukturere vores designs på en måde, der reflekterer, hvordan disse designs bliver kodet.

For at forstå hvorfor, skal du vide, hvordan rammer fungerer. Figma bruger rammer i stedet for tegnebræt. Rammer er forskellige, fordi du kan indlejre rammer inden i en ramme. Når du placerer en mindre ramme over en større ramme, grupperes de to rammer automatisk, og den mindre ramme bliver barnet til den større overordnede ramme. Børns rammer er placeret og begrænset i forhold til deres forælder. Dette er en af ​​de ting, der tager nogle at vænne sig til, men når du først gør det, undrer du dig over, hvordan du nogensinde har gjort det uden det.

Du kan bruge rammer til at opdele en skærm i indholdsområder og derefter rede komponenter (som i sig selv er en masse indlejrede rammer) inde i disse sektioner. Denne tilgang kombineret med autogruppering, relativ positionering og begrænsninger gør det nemt at hurtigt udbygge ensartede og lydhør design.

Brug af rammer som dette er nyttigt for udviklere, fordi en ramme i Figma svarer til en container i HTML. Når udviklere inspicerer designene, vil de være i stand til at se brugergrænsefladeelementer, der er indlejret i deres respektive containere, hvilket betyder, at de har en mere nøjagtig plan, som de kan referere til, når de skriver deres kode.

4. Vores designsystemer vil være mere fleksible og lettere at designe med, hvilket betyder, at vi sparer tid og får konsistens på tværs af projekter

Skitse har symboler, og Figma har komponenter. Forskellen er, at komponenter er mere fleksible end symboler, hvilket betyder, at vi kan gøre mere med mindre af dem, hvilket betyder, at vi er mere tilbøjelige til faktisk at bruge dem i stedet for at bryde dem eller starte fra bunden.

Hvordan er komponenter mere fleksible end symboler?

I Sketch kan du bruge Symboloverskridelser til at redigere tekst eller udskifte indlejrede symboler. Men hvis du vil ændre noget andet - sig, tekststørrelse, kantvægt eller baggrundsfarve - bliver du nødt til at løsne fra symbolet og oprette en lidt anden version af det samme brugergrænseflade. For at løse dette kan du indlejre enhver variation i et symbol, men så ender du med et overstyringspanel fra helvede. Med store projekter og komplekse brugergrænseflader bliver organisering og vedligeholdelse af alle permutationer hurtigt uholdbar.

Med Figma kan du få adgang til og ændre egenskaberne for ethvert lag i en komponent uden at løsne det fra masteren. Den samme ting gælder for indlejrede komponenter. Hver gang du ændrer en egenskab for et lag i masterkomponenten, spreder disse ændringer kun sig til tilfælde, hvor ejendommen ikke allerede er tilsidesat.

Jeg synes, disse tre gifs gør et godt stykke arbejde med visuelt at beskrive, hvordan det fungerer.

1. Opret en komponent, og kopier den derefter for at oprette to forekomster af masteren.2. Ændringer af masterkomponenten udbredes øjeblikkeligt til alle dens forekomster.3. Bortset fra, at enhver overstyret ejendom forbliver tilsidesat, også når master ændres.

Hvordan er komponenter lettere at designe med end symboler?

Først og fremmest behøver du ikke bekymre dig om en navnestruktur (dvs. ikoner / søgning), mens du opretter komponenter. Du kan omdøbe en masterkomponent senere, og den vil opdatere alle tilfælde - ikke tilfældet i Sketch. Og for at oprette en kategori af komponenter, skal du bare gruppere dem i en ramme og navngive den ramme, uanset hvilken kategori der er. Det betyder, at det er let at omorganisere ting senere bare ved at trække komponenter rundt. For mig reducerede dette virkelig den kognitive omkostning ved både at skabe komponenter og holde styr på dem.

For det andet er det lettere at få adgang til komponenter i Figma end at få adgang til symboler i Sketch. Igen behøver du ikke at tænke på en navnestruktur for at navigere i en indlejret menu med symbolnavne. I stedet kan du finde (og se!) Komponenter som en liste med miniaturebilleder. For at føje en komponent til en skærm eller til at bytte en instans skal du bare trække og slippe til lærredet. Eller du kan kopiere-indsætte masterkomponenten for at oprette en ny instans - du kan ikke engang gøre dette i Sketch uden at oprette et nyt symbol.

Se og få adgang til komponenter fra en fane i lagpanelet

En anden ting, der gør design med komponenter lettere, er, at du i Figma kan redigere masterkomponenten i sammenhæng med den større visning, snarere end at skulle gå til en separat side for at udføre redigeringer. Jeg synes det er meget irriterende at blive hoppet til en anden side i Sketch hver gang jeg ønsker at redigere et symbol og derefter skulle skifte tilbage til designet for at se, om mine ændringer stiller op.

Fra https://blog.figma.com/components-in-figma-e7e80fcf6fd2

Afslutter

Jo mere jeg bruger Figma, jo flere grunde synes jeg om at kunne lide det. Der er masser af detaljer, som du ender med at opdage, når du begynder at arbejde med det. Generelt føles det som et mere udviklet og gennemtænkt værktøj til interface design.

Andre ressourcer

Redaktørens note: Oprindeligt offentliggjort på blog.prototypr.io den 6. april 2018. Figma sponsorerede ikke oprettelsen af ​​dette indlæg.