Figma vs Sketch vs Adobe XD: Welches ist das bessere Design-Tool?

Figma vs Sketch vs Adobe XD: Welches ist das bessere Design-Tool?

Figma vs Sketch vs Adobe XD: Welches ist das bessere Design-Tool?
СОДЕРЖАНИЕ
02 июня 2020

Warum sollten Sie sich für Figma vs Sketch vs Adobe XD interessieren? Es ist nicht zu leugnen, dass die Verfügbarkeit von UI-Designtools in den letzten Jahren enorm zugenommen hat. Als Sketch zum ersten Mal herauskam, änderte sich die Vorgehensweise für alle Designer grundlegend. Nur zwei Jahre nach seiner ersten Veröffentlichung, Sketch wurde mit dem Apple Design Award ausgezeichnet.


Sketch ist jedoch nicht die einzige Anwendung dieser Art, auf die Designer besonders achten. Figma und Adobe XD haben sowohl hinsichtlich des Umfangs der Funktionen als auch des globalen Marktanteils schnell aufgeholt.

In ihrer jährlicher Entwurfsbericht, Avocode stellte fest, dass Sketch 56% aller hinzugefügten Designs ausmachte, wobei Figma und Adobe XD den Rest des Prozentsatzes teilen.

Es scheint, dass der größte Engpass für Sketch der reine Mac-Softwareansatz ist. Figma und Adobe XD können auf Windows- und sogar Linux-Systemen verwendet werden.

Darüber hinaus berücksichtigen die meisten Designer den Kostenfaktor. Und in dieser Abteilung herrscht definitiv viel Rivalität.

Figma vs Sketch vs Adobe XD

Schauen wir uns genauer an, wie Figma vs Sketch vs Adobe XD miteinander verglichen werden, und gehen wir zunächst das Problem Nr. 1 an:

Die Preise von Figma vs Sketch vs Adobe XD

Können kostenlose UI-Designtools mit kostenpflichtigen Alternativen konkurrieren? Wie in dieser umfassenden Überprüfung gezeigt wird, ja – sie können. Figma und Adobe haben den Ansatz eines Freemium-Geschäftsmodells gewählt und es zahlt sich aus.

  • Skizzieren Sie erhalten 99 US-Dollar für den Erstkauf zurück. Anschließend können Sie das Programm für bestehende Kunden verwenden, um eine Verlängerung um 69 USD pro Jahr durchzuführen. Eine solche Lizenz umfasst ein Jahr lang Updates und ein Jahr lang Zugriff auf Sketch Cloud. Studenten und Bildungseinrichtungen können von einem großzügigen Rabatt von 50% profitieren.
  • Figma Sie haben freien Zugang, wenn Sie ein unabhängiger Designer sind. Der Starter-Plan ermöglicht drei Projekte und unbegrenzten Speicherplatz. Für Teams beginnt der Professional-Plan bei 12 US-Dollar pro Monat und bietet uneingeschränkten Zugriff auf alles und zusätzliche Funktionen.
  • Adobe XD kommt mit einem kostenlosen Starterplan. Als solches kann das Tool ohne damit verbundene Kosten für Einzelpersonen verwendet werden. Designteams können das volle Adobe XD-Erlebnis für 23 US-Dollar pro Monat nutzen.

Die Plattformunterstützung von Figma vs Sketch vs Adobe XD

Alle drei Tools unterscheiden sich in der Plattformunterstützung. Dies trägt auch erheblich zur Anzahl der Benutzer bei, die jedes Tool hat. Hier finden Sie eine Übersicht über die spezifischen Betriebssysteme, auf denen Sie die einzelnen Tools verwenden können.

  • Skizzieren. Nur für Mac-Benutzer (OS X) verfügbar. Keine Ausnahmen.
  • Figma. Browser-basiert! Desktop-Apps für Mac und Windows ohne Offline-Unterstützung verfügbar. Kann auf Linux-Computern im Browser verwendet werden!
  • Adobe XD. Unterstützt Mac- und Windows-Systeme.

Figma vs Sketch vs Adobe XD haben interessante Preispunkte und Ansätze. Und es gibt viele verschiedene Gründe, warum einer dem anderen überlegen ist.

Wenn Sie über ein leistungsstarkes Setup verfügen, können Sie eines dieser Tools technisch über a ausführen Virtuelle Maschine Umgebung. Z.B. Mac-Benutzer können Windows auf ihren Apple-Geräten mithilfe von installieren Boot Camp App.

In Ordung. Jetzt, da wir alle kleinen Details aus dem Weg haben, Schauen wir uns genauer an, was jedes dieser UI-Design-Tools so besonders macht:

Skizzieren: intuitiv & schnell

skizzieren

Einer der vielen Gründe, warum Designer Sketch lieben, ist nicht nur die klare und robuste Benutzeroberfläche.

Bohemian Coding, die Muttergesellschaft, veröffentlicht außerdem schnell neue und innovative Updates für das Tool. Allein im letzten Jahr gab es 19 bemerkenswerte Updates. Diese Art von Entwicklungstempo hilft sicherlich dabei, die damit verbundenen Kosten für Sketch auszugleichen.

Dies ist jedoch nicht der einzige Grund, Sketch zu lieben. Das Tool ist bekannt für seine Plugin-Funktionalität. Stellen Sie es sich so vor Paket-Manager für Sublime Text – Sie können Pakete finden, die nicht nur Ihre Entwicklungszeit verbessern, sondern Ihnen auch helfen, besseren Code zu schreiben. Für Sketch sind es Plugins, mit denen Sie besser und schneller entwerfen können.

Sketch vs Figma aufstrebendes Plugins-System

Sie können Plugins in Bezug auf Grid nachschlagen oder Plugins wie verwenden Lazyboard. Mit Lazyboard ist es möglich, mehrere Skizzierebenen in einer einzigen Zeichenfläche zu verpacken, sodass Sie Zeit bei der Anpassung und anderen Stapelaufgaben sparen können.

Wrap-in-ZeichenflächenGif Quelle: GitHub

In einer der neueren Versionen (Skizze 55) – Das Unternehmen hat Funktionen wie “Kopieren” eingeführt & Fügen Sie SVG-Code, Smart Distribution und Anpassungen ein, wie Elemente zwischen gitterbasierten Layouts ausgerichtet werden.

Angenommen, Sie haben diesen SVG-Code (ein Polygon mit drei Seiten):

Normalerweise müssen Sie dieses Dokument als .svg-Dokument speichern und dann in Sketch laden, damit es gerendert werden kann. In der neuen Version können Sie dieses SVG-Code-Snippet einfach kopieren und einfügen. Es wird automatisch als neue Ebene gerendert.

Skizzieren Sie SVG Copy Paste

Erwarten Sie in Sketch noch viele weitere produktivitätsorientierte Edelsteine.

Übergabe von Spezifikationen an Entwickler

Wir kommen zu einem Punkt im UI-Design, an dem Designer ein gesamtes Design mit einer voll funktionsfähigen Spezifikation für Entwickler exportieren können. Obwohl dies nicht als native Funktion für Sketch verfügbar ist, gibt es Apps und Plugins von Drittanbietern, die dies ermöglichen. Nämlich, Zeplin wurde entwickelt, um die Übergabe von Spezifikationen extrem einfach und unkompliziert zu gestalten. Und das mit großer Genauigkeit.

Zeplin Spec Handoff

Was ist, wenn Sie etwas möchten, das direkt in Sketch integriert ist? Schauen Sie dazu in die Skizzenmaß Plugin. Auf diese Weise erhalten Sie umfassende Funktionen zum Erstellen von Spezifikationen für Ihre Entwickler in Echtzeit.

Sketch Measure Spec Handoff

In diesem Beispiel sehen Sie, dass das Plugin hochpräzise Elementinformationen liefert. Einschließlich Schriftfamilie, Positionierung und dem entsprechenden CSS-Code, den Entwickler sofort verwenden können.

Es fühlt sich wirklich so an, als ob wir an einem Punkt angelangt sind, an dem UI-Designtools von Anfang an voll funktionsfähige Designs importieren können.

Sketch liefert eine enorme Ressourcenbibliothek

Einer der Gründe, warum Sketch für neue und erfahrene Designer so attraktiv ist, ist die immense Verfügbarkeit kostenloser Designressourcen.

Skizze gegen Adobe XD-Ressourcen

Auf Ihrer Dokumentation Auf dieser Seite hat Sketch Hunderte verschiedener Abschnitte aufgelistet, um das Erlernen dieser Software zu vereinfachen. Darüber hinaus gibt es aber auch Websites wie Skizzieren Sie App-Ressourcen, und Skizze Repo, und viele andere. Im Wesentlichen sind dies "Open Source" Websites, auf denen Designer ihre endgültigen Entwürfe zum Herunterladen für alle einreichen können.

Dies stellt sicher, dass Sie ein Projekt nie von Grund auf neu starten müssen. Möglicherweise fehlen Ihnen auch Informationen darüber, wie Sie mit Ihrem Design ein bestimmtes Ergebnis erzielen können.

Skizzieren Sie Repo-freie Ressourcen

Informationen hierzu finden Sie auf den Websites mit Sketch-Ressourcen, um die gewünschte Lösung zu finden. Oh, und ja, lizenzfrei!

Sketch bietet noch viel mehr, was es zu einem der weltweit führenden Design-Tools für die Benutzeroberfläche macht. Schauen wir uns bei einem Vergleich jedoch die Funktionen an, mit denen sich Tools wie Figma und Adobe XD von der Masse abheben.

Figma: browserbasiert & robust!

figma

Figma kam 2015 auf die Bühne mit einer Anfangsfinanzierung von 14 Mio. USD.

Mit seiner nahtlosen Benutzeroberfläche und der schlanken Funktionspalette wurde das Tool schnell zu einem berüchtigten Konkurrenten für ähnliche Lösungen auf diesem Gebiet.

Designer von Marken wie Twitter, Microsoft, GitHub und Dropbox schwören auf Figma als das ultimative Design-Tool für die Benutzeroberfläche.

Liegt es daran, dass Figma einen kostenlosen Plan anbietet, dass es so früh in seiner Roadmap einen solchen Erfolg hatte? Sicherlich nicht.

Das Tool bietet mehrere Lösungen, die in eine Benutzeroberfläche integriert sind:

  • Benutzeroberfläche & UX-Design
  • Prototyp entwickeln
  • Grafikdesign
  • Wireframing
  • Vorlagen

Und das sowohl im Browser als auch in seinem Desktop-basierte Anwendung. Die Tatsache, dass Figma für den Browser entwickelt wurde, bedeutet, dass Linux-Benutzer Figma auch auf ihren Unix-basierten Systemen verwenden können. Ein riesiges Plus!

Sie müssen auch nicht viel Zeit in Ihren Designprozess investieren. Figma kümmert sich darum durch seine Vorlagen Angebot. Hierbei handelt es sich um Drahtmodelle, Flussdiagramme, Diagramme, Story Maps und vollständige Website-Vorlagen, die nur für Sie erstellt wurden.

Figma kostenlose Vorlagen

Hier haben Sie eine vorgefertigte SaaS-Website-Vorlage, die Sie sofort bearbeiten und nach Ihren Wünschen optimieren können. Solche Vorlagen (Ebenen, Gruppen usw.) können auch zur späteren Verwendung gespeichert werden, um den Import zu vereinfachen.

Figma bietet Platz für freien Speicherplatz auf Ihrer Festplatte

Das Schöne an Figma ist, dass Sie nichts auf Ihrem Computer speichern müssen. Alle Dateien werden in der Cloud gespeichert und sind überall verfügbar. Als Sketch- oder sogar Adobe XD-Benutzer haben Sie möglicherweise gewöhnte sich an über 50 GB Ordner mit Designdateien. Dies ist bei Figma nicht mehr der Fall.

Figma vs Sketch Dateiverwaltungsvergleich

Wie hier gezeigt, sind Dateien fünf Monate alt und sofort verfügbar. Unabhängig davon, welches kleinste Element Sie für ein anderes Design benötigen, können Sie in Sekundenschnelle darauf zugreifen und es in Ihrem aktuellen Projekt verwenden.

Zusammenarbeit in Echtzeit

Das vielleicht bekannteste Merkmal von Figma sind die Tools für die Zusammenarbeit. Im Zentrum der Arbeit mit mehreren Personen steht die Zusammenarbeit. In den alten Photoshop-Tagen mussten Sie Ihren Kollegen endlose Überarbeitungen senden, um auf dieselbe Seite zu gelangen. Mit Figma ist die Zusammenarbeit sowohl leistungsstark als auch unmittelbar!

Tools für die Zusammenarbeit mit Figma

So löst Figma Aufgaben der Zusammenarbeit in Echtzeit:

  • Kommentieren. Verwenden Sie die Benutzeroberfläche, um einen Kommentar-Tab auszuwählen und jemandem sofort einen Link zu Ihrem Kommentar zu senden. Die Markierung kann genau in dem Bereich belassen werden, den Sie kommentieren.
  • Bearbeitung für mehrere Personen. Bearbeiten Sie eine Datei zusammen mit mehreren Personen und sehen Sie deren Aktionen in Echtzeit. Die Bearbeitung für mehrere Personen kann auch deaktiviert werden, wenn Sie selbst an einer Funktion arbeiten.
  • Werbetexten. Wenn Sie einen separaten Texter oder einen Inhaltseditor haben, können Sie diesen den Zugriff gewähren, um ihre Kopie neben Ihrer Arbeit in Echtzeit zu schreiben.
  • Plattformvielfalt. Da Figma im Browser arbeitet, können Ihre Mitarbeiter mitmachen, unabhängig davon, ob sie ein Mac-System oder einen Linux- oder Windows-Computer verwenden. Es ermöglicht wirklich Freiheit!

Zum größten Teil lässt Figma sowohl Sketch als auch Adobe XD zu weit zurück, um als zuverlässige Alternativen für die Zusammenarbeit in Echtzeit angesehen zu werden.

Die browserbasierte Benutzeroberfläche ermöglicht eine nahtlose Zusammenarbeit, ohne dass Sie sich individuell darauf vorbereiten müssen. Ich würde erwarten, dass ähnliche Funktionen in naher Zukunft in anderen Tools eingeführt werden!

Adobe XD: fehlerfreie Benutzeroberfläche & UX-Design

Adobe XD

Adobe wird nicht oft mit dem kostenlosen Preisschild in Verbindung gebracht. Das Unternehmen hat den berüchtigten Ruf, erstklassige Produkte zu Premiumpreisen anzubieten.

Aber es scheint, dass sogar Adobe erkennt, dass es etwas tun muss, um nicht einen massiven Marktanteil von Designern weltweit zu verlieren. Ihre Antwort ist, Adobe XD zu einem kostenlosen Design-Tool für die Benutzeroberfläche zu machen.

Ebenso außer dem Hinzufügen neuer Funktionen, Adobe war auch beschäftigt um XD so steckbar wie möglich zu machen. Plugins machen es schließlich einfacher, schneller die besten Ergebnisse zu erzielen.

Adobe XD-PluginsFotoquelle: Adobe

Viele der vorhandenen Sketch-Plugins wurden bereits auf XD portiert, aber als eigenständiges Tool bietet XD auch Integrationen mit bekannten Diensten wie Trello, Google Sheets, Airtable und vielen anderen.

Design und Prototyp mit Leichtigkeit

Der Fokus von Adobe auf XD scheint es einfach und intuitiv zu machen. Von der Erstellung eines neuen Projekts bis zur Verwaltung von Prototypen sind die meisten Funktionen nur einen Klick entfernt.

Prototyp und Design mit Adobe XD

Sobald Sie einen Projekttyp (Web / Telefon / Tablet) ausgewählt haben, können Sie sofort mit der Arbeit an Ihrem Design beginnen. Assets für Ihr Projekt können entweder vorinstalliert oder von anderen XD-Benutzern in Ihrem Team freigegeben werden.

Adobe XD-Assets

Dies macht es auch einfach, mit allen vorhandenen Designspezifikationen Schritt zu halten, mit denen Ihr Team arbeitet. Verbringen Sie weniger Zeit mit dem Finden von Dateien und mehr Zeit mit dem Entwerfen!

Die Funktionen für die Zusammenarbeit von Adobe XD sind fair

Bei der Zusammenarbeit bietet Adobe zwei Möglichkeiten: Arbeiten Sie gemeinsam an einem Cloud-Dokument oder laden Sie ein Dokument von Ihrem PC hoch. Die erstere Option beschleunigt die Zusammenarbeit. Und neue Leute einzuladen ist auch extrem einfach.

Funktionen für die Zusammenarbeit mit Adobe XD

In der oberen rechten Ecke Ihres Werkzeugs befindet sich die Schaltfläche Teilen. Hier finden Sie verschiedene Möglichkeiten, um Ihre XD-Designs zu teilen.

Die Optionen sind:

  • Zum Bearbeiten einladen
  • Zur Überprüfung freigeben
  • Teilen für die Entwicklung
  • Ein Video aufnehmen

Rückblickend sind dies alles Optionen, die auf einen reibungsloseren Design-Workflow zugeschnitten sind. XD kann die von Ihnen verwendete Spezifikation automatisch verstehen, sodass Sie sie an Entwickler senden können. Außerdem können Sie ein Video aufnehmen, um bestimmte Funktionen des von Ihnen erstellten Objekts zu präsentieren. Letzteres ist praktisch für Teams, die hauptsächlich in entfernten Umgebungen arbeiten.

Zugriff auf das umfangreiche Ressourcennetzwerk von Adobe

Adobe ist die Marke hinter großen Hits wie Photoshop, Illustrator, aber auch Behance, Spark, Adobe Fonts und Adobe Stock. Dies sind alles ressourcenbasierte Websites, die Sie direkt mit Adobe XD verwenden können.

Nehmen wir also an, Sie haben die Adobe-Schriftarten Wenn das Abonnement aktiv ist, können Sie einfach alle verfügbaren Schriftarten mit Ihrem XD-Dashboard synchronisieren. Auf diese Weise erhalten Sie Zugriff auf Tausende interessanter, einzigartiger und designdefinierender Schriften auf Ihrer Handfläche.

Adobe XD bietet Adobe Creative Cloud

Das Urteil: Figma vs Sketch vs Adobe XD

Hier schließen wir also unseren Test von Figma vs Sketch vs Adobe XD ab.

Alle drei Werkzeuge eignen sich hervorragend für moderne Designeranforderungen. Ich würde sagen, dass Sketch hier einen großen Verlust aufweist, da es nur für Mac-Benutzer verfügbar ist. Auf diese Weise können Tools wie Figma und Adobe XD über die Grundbedürfnisse hinaus innovativ sein.

Wenn Ihr Werkzeug am Ende des Tages etwas besser als das andere macht, ist es oft genug Grund, umzuschalten. Der browserbasierte Ansatz von Figma ist ebenfalls sehenswert. In meinem Freundeskreis von Designern ist es immer Figma, die das höchste Lob erhält.

Und was Adobe XD betrifft – ich denke, Adobe ist gerade an einem guten Ort. Sie haben viel Flexibilität, um ihr Werkzeug zu verbessern und neue Funktionen hinzuzufügen. Trotzdem sind auch die Integrationen von Drittanbietern genau richtig, was es zu einer guten Wahl für Teams macht, die ständig nach Änderungen oder Anpassungen suchen.

Wenn wir diese drei wirklich bewerten müssen, muss es so sein:

  1. Figma ��
  2. Skizzieren ��
  3. Adobe XD ��

Da alle drei Tools kostenlos oder als Testversion verfügbar sind, hindert Sie nichts daran, die perfekte Lösung für Sie zu finden. Nachdem ich mit jedem einzeln gearbeitet habe, kann ich mich darauf beziehen, dass sich Workflows von Werkzeug zu Werkzeug unterschiedlich anfühlen.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout, Präsentation und Bearbeitung von Karol K..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector