Mariana Berga
Sofia Gomez

Februar 23, 2024

Min Read

Figma vs Sketch: er der et rigtigt valg?

Produktdesignere og UI udviklere er ansvarlige for at skabe produkter, der leverer løsninger til brugerne ved at vurdere specifikke virksomheder/markedsbehov. Faktisk er webdesign en vigtig komponent i et produkts succes, fra dets oprettelse til efterlancering vedligehold. Derfor er det vigtigt for designere at regne med det rigtige sæt værktøjer til at udvikle og levere et produkt i topkvalitet.

Blandt nogle af de mest populære værktøjer er Sketch og Figma. Disse værktøjer varierer meget på trods af at de opfylder lignende formål med hensyn til informationsarkitektur, visuel design, og branding. I denne artikel ser vi nærmere på deres forskelle og forklarer yderligere, hvilken der er det rigtige valg.

blue arrow to the left
Imaginary Cloud logo

Hvad er Sketch?

Udbredt i webdesign er Sketch et softwareværktøj, der bruges til at oprette UI og UX komponenter. Det blev udgivet i 2010 og blev snart ekstremt populært blandt produktdesignere, efter at have modtaget en Apple Design Award i 2012. En af de væsentligste fordele er, hvordan brugervenlig og intuitivt dette værktøj bruges således bredt af begyndere eller erfarne produktdesignere.

Sketch interface.
kilde: Sketch.com
blue arrow to the left
Imaginary Cloud logo

Hvad er Figma?

Det tog ikke lang tid, før andre webdesignapps, som Figma og Adobe XD, begyndte at gøre deres vej som stærke Sketch-konkurrenter. Indført i 2016, Figma er et skybaseret interface designværktøj, hvor brugere nemt kan samarbejde og bidrage til et projekt.

Figma - Collaborative Interface Design Tool
Kilde: Figma.com
blue arrow to the left
Imaginary Cloud logo

Figma vs Sketch: nøgleforskelle

I løbet af de sidste år har der været en berygtet vækst i UI designværktøjer. Ikke alene er der flere apps tilgængelige, men de bliver også mere konkurrencedygtige ved at introducere nye funktioner og tilpasse sig designernes komplekse (og forskelligartede) behov.

For at levere et fremragende og værdifuldt produkt er det vigtigt at være bekendt med de forskellige trin i produktdesignproces. I den forstand er de fleste produktdesignere ikke udelukkende afhængige af kun en app for at opfylde forskellige formål, men snarere af flere værktøjer, der supplerer hinanden. Derfor er det ikke ualmindeligt, at designere bruger både Figma og Sketch: deres valg afhænger ofte af, hvordan hver app udfører en bestemt opgave.

Ifølge en undersøgelse udviklet i 2020, 1975 respondenter ud af 4100 bruger Figma som et primært værktøj, hvilket gør det til det førende værktøj til interface design. For det andet er det hovedsageligt anvendte interface designværktøj Sketch (med 1152 deltagere, der bruger det som et primært værktøj).

Most used software tools for interface design
Kilde: uxtools.co

Fortsæt med at læse for at finde ud af de største forskelle mellem Figma og Sketch vedrørende kompatibilitet, priser, og funktioner, som begge apps leverer.

Kompatibilitet

Med hensyn til kompatibilitet er Sketch kun kompatibel med MacOS-operativsystem. Der er en Windows-app, hvorigennem det er muligt at fortolke Sketch-filer; en Mac-enhed er dog iboende påkrævet for at arbejde og redigere designfiler.

På den anden side er det muligt at arbejde med Figma på ethvert operativsystem (macOS, Windows og Linux), der kører en webbrowser. På trods af at have større tilgængelighed end Sketch, kan Figma være en problematisk løsning for designere, der også har brug for at arbejde offline. Selvom det er muligt at arbejde med Figma uden en internetforbindelse, er ikke alle funktionaliteter tilgængelige. Desuden skal designere være forsigtige og huske at fortsætte med at gemme filen, da den ikke gør det automatisk (som det sker, når brugeren er online).

Prisfastsættelse

For dem, der starter eller arbejder i små teams, tilbyder Figma en gratis version. Denne version giver to personer mulighed for at redigere et dokument på én gang og har et ubegrænset antal seere. Desuden kan den håndtere op til tre projekter og giver ubegrænset skylagring. For større teams med flere projekter til rådighed koster den professionelle version dog 12 $/måned pr. redaktør. Ud over gratisversionens frynsegoder håndterer den professionelle ubegrænsede projekter, giver brugerdefinerede fil/brugertilladelser og delbare teambiblioteker. Sidst men ikke mindst er der også en organisationsversion tilgængelig. Denne version inkluderer yderligere SSO + avanceret sikkerhed, design systemanalyse, plugin administration, blandt andre fordele.

I modsætning til Figma tilbyder Sketch ikke en gratis version. Ikke desto mindre giver de en engangsbetaling på 99$ (valgfri fornyelse er 79$ om året), der inkluderer alle funktionerne plus et års opdateringer. For Sketch Teams kræver prisfastsættelsen et månedligt abonnement på 9$ pr. redaktør. Dette abonnement dækker Mac-appen og et delt Cloud-arbejdsområde til samarbejde. Desuden har både Figma og Sketch rabatter til studerende og undervisere.

Funktioner

Sketch og Figma deler lignende funktioner med forskellige varianter. Selvom begge værktøjer måske kan gøre det samme, kan de overgå hinanden på den måde, de gør det på.

stilarterStilarter er afgørende elementer i en designsystem. Designere kan gemme stilarter, der svarer til et sæt designelementer og anvende dem på tværs af tavlerne. Denne funktion kan spare dyrebar tid, især når man udvikler mere omfattende projekter.

Figmas stilarter følger en kaskadetilgang. Med andre ord kan brugeren oprette og gemme stilarter til forskellige elementer (tekst, farver og effekter) og derefter blande og matche dem med andre sæt elementer. Det betyder, at elementer er uafhængige af stilen, og den samme stil nemt kan have for eksempel en anden tekstblok eller farve. Denne evne gør Figma mere fleksibel end Sketch.

I Sketch etableres elementerne for hver stil. Appen har to typer stilarter: tekst eller lag. Tekstformater omfatter tekstelementer som farver, effekter og skrifttyper. På den anden side integrerer lagformater lagelementer som kanter, effekter og udfyldninger. Imidlertid giver Sketchs nyeste versioner allerede brugeren mulighed for at redigere symboler for elementer inden for typografier.

Symboler og komponenterSketch og Figma inkluderer symbolelementer, der kan replikeres på tværs af sider og redigeres samtidigt, hvilket sparer besværet med at ændre en efter en, når det er nødvendigt. Ikke desto mindre varierer måden, hvorpå disse symbolers operationer udføres.

Når der oprettes et nyt symbol (f.eks. ikon, knap) i Sketch, går dets oprindelige version til „Symbolsiden“. Eventuelle ændringer, der foretages på siden Symboler, gælder automatisk for hver forekomst af det pågældende element i hele projektet.

I Figma svarer et symbol til en komponent. I modsætning til Sketch indeholder dette værktøj ikke en separat side til komponenter. I stedet forbliver den originale masterkomponent på plads, og for at oprette en ny skal brugeren blot kopiere den. Da komponenterne strømlines, opdateres hver forekomst også, når masteren redigeres.

VektorværktøjerSelvom både Sketch og Figma har gode værktøjer til at designe elementer, konkurrerer de ikke med andre softwaremuligheder, der er lavet eksplicit til vektortegning, såsom Adobe Illustrator. Derfor er det som tidligere nævnt almindeligt, at produktdesignere bruger flere softwareværktøjer.

Begge interface-apps giver brugerne en fri form vektorværktøj, såvel som formværktøjer (rektangel, polygon og ellipse) og boolske operationer. Disse muligheder giver designere mulighed for at håndtere designutfordringer og være kreative med hensyn til interfacedesign.

Når du bruger Sketchs vektorværktøj, skal designere kombinere og knytte punkter sammen. Begge apps giver mulighed for forskellige typer punkter, som i Sketch kan være lige, spejlede, frakoblede eller asymmetriske. På samme måde kan linjerne i Figma enten være lige eller buede (ved hjælp af bøjningsværktøjet). Figma og Sketchs vektorfunktioner er næsten på samme niveau, selvom Sketch måske har en lille fordel, da den kan tegne vektorer med mere strenghed og detaljer.

Derimod er Figma ikke så præcis, når det kommer til redigering af vektorer og respektive punkter.

Drawing vectors at Sketch.
kilde: Sketch.com

Figmas vektornetværk giver imidlertid designere mulighed for at forbinde flere linjer på et enkelt punkt. Plus, for at plotte og forme yderligere punkter, kan vi også bruge penværktøjet. Alt i alt er den væsentligste fordel, at når man bruger Figmas Vector Networks, kan designeren arbejde i forskellige retninger uden at skulle opdele et stiobjekt. Derfor kan designobjekter oprettes inden for det samme objekt, hvilket gør tegningsprocessen hurtigere end traditionelle vektorstiværktøjer.

Purple circles designed at Figma.
kilde: figma.com

PluginsMens plugins for nogle designere er et „must-have“, er det ikke nødvendigvis en vigtig funktion for andre. Plugins er en fantastisk måde at inkludere animationer, prototyping, tilvejebringelse af data, og så videre. Deres brug afhænger af hver bruger. For dem, der er ivrige efter at tilpasse designprogrammet, er Sketch det mest passende valg, da det tilbyder flere tredjeparts plugins end Figma.

Faktisk var det først i 2019, at Figma begyndte at introducere sine første plugins. Selvom det ikke har mange plugins som Sketch, inkluderer Figmas tilgang til plugins incitament udviklere at skabe mere. Det gør det ved at præsentere indhold på appens udgivelsesside og organisere „Figma Plugins Show & Tell“, som består af en live stream, hvor udviklere kan dele, hvad de arbejder på, og levere live demoer af de nyeste plugins.

PrototypingHverken Figma eller Sketch havde prototypefunktioner, da de oprindeligt blev lanceret, men efterhånden som markedet bliver mere konkurrencedygtigt, har apps også brug for konstante opgraderinger for ikke at blive efterladt. Således introducerede Figma en prototyping-funktionalitet i 2017, og i det næste år gjorde Sketch det samme.

I dette aspekt kan Figma være mere fleksibel end Sketch, da den understøtter overlays, når objekter knyttes til andre tegnebrætter. Desuden skiller Figma sig ud for sin intuitive bygning, da designere nemt kan forbinde UI-elementer og vælge de respektive interaktioner (f.eks. Tryk på en knap) og animationer. Derudover er Figma mobiloptimeret, hvilket er meget gavnligt for enhedsrammer og momentumrulning. Denne kvalitet gør det muligt for designere at forstå, hvordan brugeren vil opleve prototyperne.

Da Figma er skybaseret, er deling af prototyper et enkelt link væk. I Sketch er processen også ganske enkel, men det kræver, at designere uploader filerne til Sketch Cloud, før de deles.

Samarbejde

Det nemme samarbejde, når du bruger Figma, adskiller det fra andre UI designværktøjer. Mens Sketch giver designere mulighed for at arbejde individuelt og kun dele designs, når de er klar, blev Figma på den anden side skabt med samarbejde i tankerne fra første dag.

En anden stor fordel ved Figmas samarbejdsfunktion er, at det også letter deling inden for fællesskab. Med andre ord kan Figma-brugere nemt udveksle og dele designsystemer, ikoner eller andre designelementer enten med kolleger eller med nogen fra samfundet. Derudover bidrager dette samarbejde til gratis ressourcer Figma giver, hvilket betyder, at enhver designer (når de deles med tilladelsesrettigheder) kan bruge dem.

For ikke længe siden begyndte Sketch at indse, hvor værdifuld samarbejdsfunktionen er for designere. Således i juli 2020, Skitse til teams Offentlig beta blev lanceret. Det giver en bedre måde for brugerne at samarbejde om de samme filer. Ud over at tilføje deltagere til at se eller redigere filen, har Sketch for Teams også en kommentarsektion, hvor designere kan chatte.

blue arrow to the left
Imaginary Cloud logo

Figma vs Sketch: er der et rigtigt valg

Kort sagt, svaret på dette spørgsmål er nej; der er intet rigtigt eller forkert valg. Figma og Sketch er begge fremragende apps med hensyn til brugervenlighed, ydeevne og de medfølgende funktioner. De har dog forskellige måder at fungere på, og i den forstand kan designernes præferencer for den ene app frem for den anden variere. For eksempel, mens nogle foretrækker plugins, kan andre være mere bekymrede over samarbejde.

I sidste ende afhænger den software, en designer vælger at bruge, også af eksterne faktorer. Arbejder designeren som freelancer eller i en virksomhed? Hvilke computere bruger designere til at arbejde? Hvor stort er holdet? Hvilke andre værktøjer vil designeren bruge? Dette er nogle af de mest afgørende spørgsmål, man skal huske på, når man beslutter, hvilke designsoftware at gå efter.

Begge softwareværktøjer har konkurreret om designernes opmærksomhed i de sidste år. Siden lanceringen fortsætter Figma og Sketch med at innovere og introducerer nye funktioner og opdateringer, der overgår hinanden. Derfor bliver disse apps så komplette, at designere i sidste ende kan være mindre afhængige af andre komplementære designværktøjer, men vi er der ikke endnu!

Figma vs Sketch
blue arrow to the left
Imaginary Cloud logo

Konklusion

Figma og Sketch er designværktøjer med utroligt potentiale. Siden deres introduktion til markedet fortsætter begge med at levere nye funktioner og forbedre de eksisterende, hvilket gør det virkelig svært for designere at beslutte, hvilken de skal bruge.

En af de største forskelle mellem disse apps er, at mens Figma er skybaseret og kan bruges i enhver Operativsystem (så længe den har en internetforbindelse), tværtimod er Sketch kun kompatibel med macOS-operativsystemet.

På trods af at de har lignende funktioner, kan Figma og Sketch for nogle designere overgå hinanden på forskellige træk. I sidste ende kommer det ned til designerens præference. Mens nogle måske foretrækker Sketchs „Symbols Page“, foretrækker andre Figmas komponenter. Plus, Figmas vektornetværk kan være hurtigere til tegning, men også mindre strenge og præcise end Sketchs vektorværktøjer. Når det kommer til prototyping, har Sketch desuden flere tredjeparts plugins, og Figma er mere begrænset til Principles indbyggede integration. Alligevel giver Figmas prototyping mere avancerede integrerede funktioner end Sketch.

Som man kan se, afhænger valget mellem begge værktøjer af balancen mellem fremførelse, funktion og funktioner som hver designer søger. Ud over den enkeltes præferencer bør eksterne faktorer såsom antallet af teammedlemmer, tilgængelighed af operativsystemer i en virksomhed og samarbejdsevner også overvejes.

Grow your revenue and user engagement by running a UX Audit! - Book a call

Fandt du denne artikel nyttig? Du kan måske også lide disse!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Mariana Berga
Mariana Berga

Marketing praktikant med særlig interesse for teknologi og forskning. I min fritid spiller jeg volleyball og forkæler min hund så meget som muligt.

Read more posts by this author
Sofia Gomez
Sofia Gomez

Jeg er produkt- og servicedesigner, der brænder for skandinavisk design og alle dets former for samarbejde, deltagelse og innovation!

Read more posts by this author

People who read this post, also found these interesting:

Dropdown caret icon