Ja, designtools zijn er tegenwoordig in overvloed. Waar Photoshop jaren geleden dé klok sloeg, is dat tegenwoordig wel anders. Zo heb je tegenwoordig onder andere Sketch, Adobe XD, Photoshop en dus Figma. Met name laatstgenoemde is bezig met een enorme opmars en dat is ook niet zo gek…
Sketch
Wij gebruiken nu al enkele jaren Sketch, maar daarvoor maakten wij onze designs standaard in Photoshop. Ik kan je een heleboel vertellen over waarom wij de overstap van Photoshop naar Sketch maakten, maar laten we geen oude koeien uit de sloot halen. Voornaamste reden: Sketch sluit perfect aan op de behoeften van webdesigners en Photoshop simpelweg niet.
Sketch beviel mij de afgelopen 5 jaar altijd enorm goed en heeft door de jaren heen zelf ook enorme stappen gezet. Het maakte mijn werk als visual (web)designer ook ontzettend soepel. Overstappen op een andere tool zal ik dan ook niet snel doen, tenzij…
Figma
Figma is een cloud-based design tool dat in veel ontzettend op Sketch lijkt. Maar toch zijn er voldoende verschillen, misschien zelfs wel voordelen ten opzichte van Sketch.
Let’s take a closer look.
Figma werkt op ieder platform
Figma werkt, in tegenstelling tot Sketch, op ieder systeem dat een web browser ondersteunt. Macs, Windows PCs, Linux, zelfs Chromebooks! Met elk systeem kun je gebruik maken van Figma. Is dit zo bijzonder? Ja! Figma is tot nu toe de enige design tool dat dit kan. Mijn geliefde Sketch kan ik bijvoorbeeld alleen gebruiken op een Mac.
Collaboration in Figma is makkelijk en voelt vertrouwd
Omdat Figma browser-based is, kunnen teams binnen een bedrijf makkelijk samenwerken, zoals ze bijvoorbeeld zouden doen met Google Docs. Je kan zien wie zich allemaal in een document bevinden, door bovenin het scherm naar de verschillende avatars van de deelnemers te kijken. Ook heeft iedereen zijn eigen cursor met zijn/haar naam erboven. Zo zie je precies wie waar mee bezig is, super makkelijk dus.
In de praktijk zouden dus meerdere mensen aan één en hetzelfde document kunnen werken. Voordeel is dus dat je bijvoorbeeld als lead designer kan zien wie wat doet en wat de voortgang is.
Veel designers vinden het niet fijn om op de vingers gekeken te worden, dus het is belangrijk om de voordelen hiervan goed uit te leggen. In de praktijk zien de meeste designers al vrij snel de plustpunten in.
Met Figma wordt feedback geven en vergaren een makkie!
Met Figma kun je binnen de app comments maken. Zowel in de designs als in de prototypes en je kan dit zelfs koppelen met je e-mail of Slack. Je bent dan altijd op de hoogte blijft van de laatste comments. Zo hoeven we bijvoorbeeld onze design niet eerst te uploaden in InVision.
Tijdens het reviewen van designs kunnen meerdere design teams hun werk doornemen op een groot scherm, feedback noteren en punten oplossen. Allemaal binnen Figma. Deze vorm van live-feedback leveren is niet mogelijk in Sketch, waar je eerst moet uploaden naar een cloudservice om feedback te krijgen.
Figma voor developers
Ja, ook voor developers kan ik genoeg redenen bedenken om voor Figma te kiezen. Figma toont code snippets van ieder geselecteerd object in CSS, iOS of Android format zodat developers makkelijk kunnen reviewen en het kunnen gebruiken. Wij ontwikkelen veel in Magento en het is heerlijk dat de design componenten in onze webshop thema's gemakkelijk door iedere developer bekeken kunnen worden in ieder document waartoe zij toegang hebben. Zo hoef je dus geen third-party tool te gebruiken om informatie te verzamelen. Bovendien is Figma volledig geïntegreerd met Zeplin voor wanneer teams meer willen doen dan enkel measurement en het tonen van CSS.
Designen in Figma vs. designen in Sketch
Als je Sketch gewend bent, is de stap naar Figma niet zo groot. Uiteraard moet je aan bepaalde dingen wat wennen, maar in het algemeen is de interface vrijwel hetzelfde. De verschillen zijn voornamelijk:
- De manier waarop Figma bestanden opslaat (in de cloud vs lokaal): Figma bewaart alle bestanden in de cloud. Sketch bewaart ze lokaal (cloud is overigens wel mogelijk). Dit is goed én fout. Voordeel is dat iedereen altijd en overal bij de bestanden kan. Nadeel is dat je een stabiele Wi-Fi verbinding moet hebben om ze openen of te bewerken.
- Hoe je ‘Libraries’ toepast en update: Dit is een groot verschillen ten opzichte van Sketch en ik geef toe, daar zal je misschien even aan moeten wennen. Maar wanneer je dit eenmaal gewend bent wil je niet meer terug. De manier waarop Figma dit afhandelt geeft zoveel meer flexibiliteit.
- Hoeveelheid plug-ins: Sketch was hier altijd de onbetwiste nummer één in. Maar sinds Figma tegenwoordig ook plug-ins ondersteunt kunnen we wel stellen dat Figma bezig is met een behoorlijke inhaalslag.
- De ‘collaboration’ mogelijkheden: Deze wint Figma dik. Het is nu zo ontzettend makkelijk om binnen je design comments te plaatsen, te overleggen en een keuze te maken. Het maakt aanpassingen, ad hoc taken en tekstuele aanpassingen nu zoveel makkelijker en zal je algehele ervaring verbeteren.
- Prototypes en animatie: Toch weer een punt waarbij Sketch de boot gemist heeft. Met Figma is het super makkelijk om de flow en zelfs (micro) animaties toe te passen. Hierdoor kan je het proces van wireframing versnellen, waar je voorheen eerste naar tools als InVision nodig had.
Conclusie
Hoewel wij nog niet volledig de overstap naar Figma hebben gemaakt, denken we hier wel serieus over na. Figma is voor bedrijven wel wat prijziger dan Sketch, maar over het algemeen lijkt het de vraagprijs meer dan waard. Wil je het gat tussen designer en developer verkleinen, dan lijkt Figma hiervoor de perfecte brug. Bovendien denk ik dat Figma en Sketch elkaar continu proberen in te halen, wat in beide gevallen hopelijk resulteert in een steeds beter ontwikkelde tool.
Ook interessant

Project Gezond PWA Case


