In der Welt des User Interface- und User Experience-Designs war Sketch jahrelang der unangefochtene König. Es war die bevorzugte Plattform für Website-Designer, die hochwertige Oberflächen entwerfen wollten. Seine einzigartigen Funktionen (flexible Vektorbearbeitung, einfache Raster, intelligente Hilfslinien usw.) brachten die UI-Design-Branche auf ein ganz neues Niveau.
Als sich die Branche weiterentwickelte, kam Figma auf den Markt, ein webbasiertes, plattformübergreifendes System für die Zusammenarbeit – eine neue Alternative zu Sketch. Aber das wirft die Frage auf: Welches Tool hat bei einem Vergleich zwischen Figma und Sketch die Nase vorn?
Es gibt viele wichtige Unterschiede, die darüber entscheiden, ob du Sketch oder Figma für deine UI-Design-Anforderungen wählen solltest.
In diesem Artikel vergleichen wir Figma und Sketch, damit du eine fundierte Entscheidung treffen kannst, welches der beiden Tools für dein nächstes responsives Webdesign-Projekt am besten geeignet ist.
Was ist Figma?
Figma wurde von vielen als eine revolutionäre Entwicklung in der Welt der UI-Design-Tools angesehen. Es war die erste große Alternative zu Sketch und wurde 2016 veröffentlicht. Seine Erschaffung machte es für Webdesigner/innen viel einfacher, ihr Gehalt zu verdienen.
Im Gegensatz zu Sketch, einer lokalen Design-Software, die du herunterladen musst, ist Figma ein Online-Tool, das über einen Browser funktioniert. Es ist auch vielseitiger, was dein Betriebssystem angeht: Es kann auf Windows- und Mac-Systemen verwendet werden, während Sketch nur auf Mac verfügbar ist.
Figma verfügt über eine kollaborative Designfunktion, die es dir ermöglicht, Designs mit Mitgliedern deines Teams zu teilen, die in Echtzeit mit dir zusammenarbeiten können. Das macht Figma viel attraktiver für Designteams und Kunden, die mitgestalten wollen.
Außerdem gibt es bei Figma keine umständliche Softwareinstallation. Da du über einen Browser auf den Dienst zugreifst, musst du dir keine Sorgen machen, dass er Speicherplatz auf deinem Gerät verbraucht oder einen komplizierten Installationsprozess durchlaufen muss. Da Figma online ist, bist du natürlich auf das Internet angewiesen und kannst nicht an deinen Entwürfen arbeiten, wenn du dich in einem Gebiet ohne Internetverbindung befindest.
Wenn du schon einmal mit Sketch gearbeitet hast, wirst du schnell feststellen, dass die Benutzeroberfläche von Figma dem Design von Sketch sehr ähnlich ist. Das war eine bewusste Entscheidung der Entwickler. Indem sie ihre Benutzeroberfläche an eine Oberfläche anlehnen, die schon seit Jahren zum Industriestandard gehört, machen sie den Umstieg leicht.
Was ist Sketch?
Sketch ist ein System, mit dem die meisten UI-Designer gut vertraut sind. Es hat jahrelang den Goldstandard im UI-Design gesetzt und ein neues Universum an Funktionen eröffnet.
Bevor Sketch eine beliebte Plattform für das UI-Design wurde, benutzten Designer/innen in der Regel Adobe Photoshop, um ihre Kreationen zum Leben zu erwecken. Aber jeder, der Photoshop schon einmal benutzt hat, kann dir sagen, dass es nicht dafür geschaffen wurde, eine kundenfreundliche Website zu gestalten, und dass es für diese Aufgabe völlig ungeeignet ist. Es eignet sich vielleicht hervorragend für die Gestaltung von Fotos oder E-Mails, aber es ist nicht für Webdesigner/innen gedacht.
Sketch ist eine native Desktop-App; das bedeutet, dass sie lokal auf deinem Computer installiert werden muss. Es braucht keine Internetverbindung, aber man kann auch nicht von überall darauf zugreifen, anders als bei einem webbasierten Tool wie Figma.
Sketch ist ein Vektorgrafik-Editor, der 2010 zum ersten Mal der Öffentlichkeit zugänglich gemacht wurde. Er hat die Designwelt verändert, weil er speziell für digitale Designs entwickelt wurde und nicht für Druckdesigns wie Photoshop.
Die Software muss zwar immer noch lokal installiert werden, aber es gibt auch eine synchronisierte Web-App für die Zusammenarbeit mit Designteams.
Die wichtigsten Funktionen von Figma
Figma hat viele Schlüsselfunktionen, die es zu einem herausragenden und beliebten Dienst in der UI-Designbranche machen. Zunächst einmal ist es ein kollaboratives System, mit dem Designer/innen ihre Arbeit mit Mitgliedern ihres Teams und ihren Kunden teilen können.
Designteams können in Echtzeit zusammenarbeiten, um Projekte zu bearbeiten oder Notizen zu verschiedenen Designelementen zu machen. Diese Funktion ist in der modernen Geschäftswelt, in der viele Designteams an verschiedenen Orten auf der Welt arbeiten, von großem Nutzen.
Die Funktion zum kollaborativen Teilen, die es den Mitarbeitern ermöglicht, überall dort Kommentare zu hinterlassen, wo Notizen gemacht werden müssen, ist in das System integriert und wird ohne zusätzliche Kosten angeboten.
Diese Funktion kann im Umgang mit Kunden sehr nützlich sein, da sie dich während des gesamten Entwurfsprozesses begleiten können. Wenn du einen Weg einschlägst, der dem Kunden nicht gefällt, kann der Kunde das Problem frühzeitig erkennen und eine Notiz machen, bevor du zu weit in den Prozess einsteigst und Zeit verlierst.
Du kannst auch Entwickler/innen einladen, deine Prototypen zu erkunden und Assets über einen einzigen Link zu exportieren.
Einer der Hauptvorteile von Figma ist, dass das System nicht direkt auf ein Gerät heruntergeladen werden muss. Es ist eine webbasierte Anwendung, auf die du über einen Browser zugreifst. Software-Downloads sind oft kompliziert und verbrauchen wertvollen Speicherplatz auf der Festplatte. Wenn du die Anwendung online verwendest, sparst du eine Menge Platz, was sich letztendlich positiv auf die Geschwindigkeit und Leistung deines Geräts auswirkt.
Außerdem ist es ganz einfach, den Umgang mit Figma zu erlernen, denn es gibt mehrere Tutorials, die speziell für neue Benutzer/innen entwickelt wurden. So kannst du von Anfang an den vollen Funktionsumfang von Figma nutzen, ohne viel zu raten.
Für Figma gibt es eine Plugin-Bibliothek, die allerdings noch nicht sehr umfangreich ist. Diese Funktion ist erst seit 2019 verfügbar, die Entwicklergemeinschaft wächst also noch.
Die flexible Vektorbearbeitung ist eine äußerst nützliche Funktion von Figma. Bei diesem System wird der Vektoreditor Vektornetzwerke genannt. Du kannst Vektornetzwerke verwenden, um mehrere Linien mit einem einzelnen Punkt zu verbinden. Das erhöht letztlich die Produktionsgeschwindigkeit beim Vektorzeichnen und hilft dir, dein Projekt schneller fertig zu stellen.
Die Komponentenfunktion ist Figmas Version der Signalfunktion von Sketch. Diese beiden Funktionen sind Elemente, die über mehrere Seiten hinweg wiederholt und gemeinsam bearbeitet werden können. Figma hat eine Hauptkomponente, die an ihrem Platz bleibt. Diese kann auch geändert werden, indem du die Masterkomponente kopierst und sie bearbeitest. Auf diese Weise wird jede Instanz der Komponente in deiner Arbeit aktualisiert.
Die wichtigsten Funktionen von Sketch
Sketch ist auch im Bereich der Funktionen nicht zu verachten und verfügt über leistungsstarke Elemente, die es seit Jahren zu einer festen Größe in der Branche gemacht haben.
Im Jahr 2021 hat das Unternehmen eine App für die Zusammenarbeit in Echtzeit eingeführt. Diese relativ neue Funktion ähnelt im Wesentlichen der Kollaborationsfunktion von Figma. Allerdings müssen alle Mitwirkenden ein kostenpflichtiges Abonnement für Sketch haben und die Mac-App auf ihren Geräten installiert haben, um die Echtzeit-Zusammenarbeit nutzen zu können.
In Sketch kann die Versionsgeschichte der Entwürfe eingesehen werden, sodass Nutzer/innen zu früheren Versionen zurückkehren können, wenn sie ihre Meinung ändern und entscheiden, dass sie zurückgehen und von einem früheren Punkt aus beginnen müssen.
Wenn du Sketch verwendest, kannst du Betrachter/innen in das System einladen, um deine Prototypen auf ihre Benutzerfreundlichkeit zu testen. Das ist nützlich, denn deine Tester/innen können dich auf Mängel oder Designfehler hinweisen, die dir völlig entgangen sind.
Sketch-Benutzer haben den Luxus einer riesigen Auswahl an Integrations-Plugins von Drittanbietern, die im Laufe der Jahre zusammengestellt wurden. Damit hat Sketch einen großen Vorsprung vor Figma, das seine Plattform erst 2019 für die Entwicklung von Integrationen geöffnet hat.
Dank dieser Integrationen ist Sketch eine sehr anpassungsfähige Plattform. Zu den Plugins gehören Übersetzungen, Prototyping, Entwicklerübergabe und Animationen.
Sketch ermöglicht die Bearbeitung von Vektoren durch verbundene Punkte, die sogenannten Nodes. Außerdem verfügt es über Webinspektor-Funktionen, mit denen Entwickler/innen Assets prüfen und exportieren können.
Mit Sketch kannst du unabhängige Stile erstellen. Dazu gehört die Personalisierung durch verschiedene Farben, Text und eine Bibliothek mit Effekten.
Das System verwendet außerdem eine Drag-and-Drop-Oberfläche, mit der du Elemente anklicken und auf der Seite verschieben kannst. Das macht es sehr leicht zu erlernen.
Vor- und Nachteile der Verwendung von Figma
Figma Vorteile
Figma hat mehrere Vorteile, die es zu einer der begehrtesten Sketch-Alternativen auf dem Markt machen.
Zunächst einmal ist es sehr zugänglich und kann auf mehreren Plattformen genutzt werden. Außerdem bietet es flexible Vektorbearbeitung und Echtzeit-Zusammenarbeit, was die Arbeit mit einem externen Team erleichtert und die Erstellung von wirklich meisterhaften UI-Designs ermöglicht.
Außerdem können Entwickler/innen mit nur wenigen Klicks zum nächsten Schritt übergehen.
Außerdem ist es unglaublich einfach, den Umgang mit Figma zu erlernen, da es eine Fülle von Lernressourcen für neue und erfahrene Nutzer gibt.
Figma Nachteile
Trotz der vielen Vorteile von Figma gibt es auch einige Nachteile, die du bei deiner Suche nach einer UI-Design-Plattform nicht außer Acht lassen darfst.
Figma ist ein viel neuerer Dienst als Sketch und hat erst 2019 mit der Einführung von Integrationen und Apps begonnen. Das bedeutet, dass Figma eine kleine Integrationsbibliothek hat, die im Vergleich zu dem, was die Konkurrenz anbietet, verblasst. Mit der Zeit wird sie aber wahrscheinlich wachsen, und dieser Nachteil wird sich in einen Vorteil verwandeln.
Obwohl die Nutzung von Figma über das Internet ideal ist, brauchst du eine Internetverbindung, um auf die Funktionen zugreifen zu können. Einen Offline-Modus gibt es nicht.
Vor- und Nachteile der Nutzung von Sketch
Vorteile von Sketch
Die Verwendung von Sketch hat viele Vorteile. Es gibt mehrere Gründe, warum es seit über einem Jahrzehnt ein beliebtes Produkt in der Designwelt ist.
Einer der Vorteile ist seine Langlebigkeit. Weil es schon so lange auf dem Markt ist, sind viele Leute daran gewöhnt. Das bedeutet, dass es eine Menge Anleitungen gibt. Es ist ein System, mit dem viele Website-Designer/innen gelernt haben, daher gibt es Ressourcen für alle, die das volle Potenzial von Sketch ausschöpfen wollen.
Sketch verfügt außerdem über eine unglaubliche Anzahl von Integrationen von Drittanbietern, die im Laufe der Zeit entwickelt wurden, um das bestmögliche, personalisierte Sketch-Erlebnis zu bieten.
Da es sich um ein lokal installiertes Programm handelt, kann es auch offline arbeiten. Das ist ein großer Vorteil für alle, die nur sporadisch mit dem Internet verbunden sind oder die unterwegs arbeiten müssen, wo nicht immer WLAN verfügbar ist.
Nachteile von Sketch
Sketch hat auch einige Nachteile, die angehende Nutzer/innen vor dem Kauf zurückschrecken lassen könnten.
Zum Beispiel ist Sketch nur für den Mac verfügbar. Wenn du also an die Arbeit am PC gewöhnt bist oder dir einfach keinen teuren Mac-Laptop leisten kannst, wird dieses System für dich nicht in Frage kommen.
Es ist zwar toll, dass das Unternehmen eine Web-App für die Zusammenarbeit in Echtzeit entwickelt hat, aber der Dienst ist noch neu und begrenzt. Mit der Zeit wird er sich zu einem großen Vorteil entwickeln, aber im Moment ist es viel einfacher, mit Figma zusammenzuarbeiten.
Du musst die Sketch-Software lokal auf deinem Computer installieren. Das beansprucht Festplattenspeicher und kann sich negativ auf die Geschwindigkeit deines Macs auswirken.
Figma vs. Sketch: Ein Kopf-an-Kopf-Vergleich
Nachdem wir nun die grundlegenden Vor- und Nachteile von Figma und Sketch kennen, wollen wir die beiden Programme in verschiedenen Kategorien miteinander vergleichen.
Kollaboration
Wenn es um kollaboratives Entwerfen geht, hat Sketch diese Funktion erst 2021 durch die Verwendung einer Web-App eingeführt. Alle deine Mitwirkenden brauchen ein kostenpflichtiges Sketch-Abonnement, und die Funktion ist, genau wie die Software selbst, nur auf dem Mac verfügbar.
Diese cloudbasierte, kollaborative Funktion funktioniert eher wie ein Dropbox-Dateifreigabesystem.
Figma ermöglicht die Zusammenarbeit in Echtzeit auf jeder Plattform. Das System funktioniert ähnlich wie Google Docs, wo Nutzer/innen gemeinsam an einem Projekt arbeiten und sichtbare Änderungen und Kommentare in Echtzeit vornehmen können. Du kannst sogar die Mausbewegungen der anderen Nutzer/innen sehen, ohne dass es Probleme mit der Synchronisierung oder Verzögerungen gibt.
Kosteneffizienz
Die Software von Sketch ist in zwei verschiedene Preispläne unterteilt.
Der Sketch Standard Plan kostet $9 pro Editor und Monat. Außerdem gibt es eine unbegrenzte Anzahl kostenloser Betrachter. Der Business Plan kostet $20 pro Editor und Monat.
Der Preis ist auf ein Jahr begrenzt – es gibt keine Option für eine monatliche Nutzung. Das bedeutet, dass es sich um eine hohe Anfangsinvestition handelt.
Der Sketch Business Plan beinhaltet Single Sign-On, unbegrenzten Speicherplatz in der Cloud, Rechnungsstellung, technischen Live-Chat-Support, einen eigenen Customer Success Manager und individuelle Sicherheitsüberprüfungen und -bedingungen.
Die Preisgestaltung von Figma ist sehr viel transparenter und es gibt verschiedene Preispläne.
Der Starter-Plan von Figma ist kostenlos, hat aber einige Einschränkungen. Du kannst nur mit drei Figma-Dateien und drei FigJam-Dateien arbeiten.
Dafür gibt es aber auch eine unbegrenzte Anzahl an persönlichen Dateien und Mitwirkenden. Du kannst Plugins, Vorlagen und Widgets kostenlos nutzen. Der kostenlose Plan beinhaltet sogar die Nutzung der Figma Mobile App.
Der Professional-Plan von Figma kostet 12 US-Dollar pro Editor und Monat bei jährlicher Abrechnung. Wenn du dich für eine monatliche Option entscheidest, kostet dich das 15 US-Dollar pro Editor und Monat.
Mit dem Professional-Tarif erhältst du eine unbegrenzte Anzahl von Figma-Dateien, einen unbegrenzten Versionsverlauf und die Erlaubnis zum Teilen. Du kannst sogar bestimmte Projekte als privat kennzeichnen, wenn du den Zugang beschränken willst. Außerdem erhältst du Team-Bibliotheken und die Möglichkeit, Audiogespräche mit deinen Mitstreitern aufzuzeichnen.
Der Organisationstarif kostet 45 US-Dollar pro Redakteur und Monat und wird nur jährlich abgerechnet.
Mit diesem Plan kannst du organisationsweite Bibliotheken erstellen. Außerdem kannst du Systemanalysen erstellen und Verzweigungen und Zusammenführungen vornehmen.
Die zentrale Dateiverwaltung und die einmalige Anmeldung sind im Organisationstarif enthalten, und die Verwaltung und Abrechnung sind vereinheitlicht. Du kannst auch private Widgets und Plugins verwenden.
Der teuerste Plan von Figma ist der Enterprise Plan. Er kostet 75 US-Dollar pro Editor und Monat und 5 US-Dollar pro FigJam-Editor und Monat. Dieser Plan bietet nur eine jährliche Abrechnung und ermöglicht flexiblere Kontrollen und erweiterte Sicherheit.
Benutzerfreundlichkeit/Einstieg
Die beiden Dienste haben ähnliche Benutzeroberflächen, was bedeutet, dass es sehr einfach ist, zwischen ihnen zu wechseln, wenn du einmal gelernt hast, wie man einen der beiden Dienste benutzt.
Figma bietet Anleitungen und Lehrvideos, um neue Nutzer/innen schnell in die Bedienung einzuführen. Für Sketch gibt es nur wenige Anleitungen über die offiziellen Kanäle, aber das System gibt es schon lange, und es gibt viele Informationen.
Erweiterbarkeit (Plugins & Integrationen)
Sketch verfügt über eine große Anzahl von Plugins und Integrationen. Diese riesige App-Bibliothek ähnelt der beeindruckenden Bibliothek an Themes und Plugins von WordPress. Sie ist für die verbesserte Personalisierung verantwortlich, die du in Sketch nutzen kannst.
Figma hat bereits 2019 Integrationen hinzugefügt, aber leider sind nur noch wenige Optionen verfügbar.
Zu den üblichen Integrationsfunktionen gehören unter anderem:
- Prototyping
- Übersetzungen
- Animationen
- Entwickler-Übergabe
Funktionen
Figma eignet sich aufgrund seiner Funktionen für die Zusammenarbeit in Echtzeit hervorragend für Remote-Teams.
Außerdem sind die Raster und Beschränkungen flexibel, so dass du responsive und größenveränderbare Layouts erstellen kannst.
Sketch verwendet eine Funktion zur Größenanpassung von Gruppen, aber sie beschränkt dich auf nur vier Optionen.
Die Vektornetzwerke von Figma verbessern das Pfadmodell. Linien und Kurven müssen nicht mehr eine einzige Kette bilden. Stattdessen können sie zwischen zwei beliebigen Punkten verlaufen.
Figma verfügt außerdem über hervorragende Funktionen für die Übergabe an die Entwickler, wenn es an der Zeit ist, die Benutzeroberfläche für die Veröffentlichung bereitzustellen.
Sketch kann mit seinen Integrationen viele seiner Funktionsmängel ausgleichen. Zeplin ist zum Beispiel eine App, die für die Übergabe an Entwickler genutzt werden kann.
Leistung und Geschwindigkeit
Die Geschwindigkeit kann von vielen Dingen beeinflusst werden, vom Speicherplatz auf deiner Festplatte bis hin zum WordPress-Theme, das du für deine Website auswählst. Bei Figma gibt es keine Probleme mit der Geschwindigkeit oder Verzögerungen, und die gemeinsamen Designsitzungen können in Echtzeit stattfinden.
Sketch ist eine lokal auf dem Mac installierte Software, so dass die Internetgeschwindigkeit keinen Einfluss auf die Leistung hat. Daher ist es sehr leistungsfähig und schnell und funktioniert auch, wenn dein Gerät offline ist.
Prototyping
Figma bietet mehr UI-Trigger für das Prototyping. Zu diesen Triggern gehören:
- Bei Klick
- Beim Hovering
- Beim Ziehen
Figma bietet auch eine stabile Prototyp-Vorschau, die besser ist als die von Sketch. Du kannst die Standardübergänge zwischen den Prototyp-Bildschirmen nutzen. Dazu gehört auch, dass du nach Belieben ein- oder ausblenden kannst.
Figma verwendet sogar eine Smart Animate-Funktion, mit der du mit wenigen Klicks fortgeschrittene Animationen erstellen kannst. Allerdings bietet Figma keine Verlinkung zwischen Seiten, um deine Frames zu verbinden.
Sketch verfügt über Prototyping-Plugins, die den gesamten Prozess reibungsloser gestalten. Dazu gehören Mockplus Cloud, InVision Craft und Flinto.
Zusammenfassung
Figma und Sketch sind beliebte UI-Design-Plattformen, mit denen du viele hervorragende, kundenfreundliche Websites entwickeln kannst. Welche du verwenden solltest, hängt vor allem davon ab, wonach du suchst. Das gilt für die Wahl deines UI-Design-Tools genauso wie für deinen E-Mail-Client.
Wenn du hauptsächlich auf einem Mac arbeitest und es vorziehst, offline zu arbeiten und dabei eine große Bibliothek von Integrationen zu nutzen, die dir dabei helfen, ein noch persönlicheres Erlebnis zu schaffen, dann ist Sketch das Richtige für dich.
Wenn du eine kostenlose Option möchtest, am PC arbeitest, flexible Zusammenarbeit brauchst und flexible Vektorbearbeitung nutzen willst, dann könnte Figma die Antwort sein, nach der du suchst.
Wenn du nach einem hochwertigen Hosting für die WordPress-Websites suchst, die du mit diesen Systemen erstellst, bist du bei Kinsta genau richtig. Vereinbare noch heute einen Demo-Termin, um zu sehen, wie Kinstas Managed-Hosting-Angebot für Agenturen Hand in Hand mit deiner UI-Design-Plattform arbeiten kann, um ein nahtloses Erlebnis von Anfang bis Ende zu schaffen.
Du brauchst Hilfe bei einem Designprojekt? In unserem Agenturverzeichnis findest du eine vollständige Liste von vertrauenswürdigen Agenturen. Suche nach Projektpreis, Frameworks und mehr.
Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.
Schreibe einen Kommentar