Sketch (Design-Tool)
Definition: Sketch ist eine macOS-exklusive Vektorgrafik- und UI-Design-Anwendung die als erstes dediziertes professionelles UI-Design-Tool den Markt für Digitales-Interface-Design definierte und Konzepte wie Symbols (wiederverwendbare Komponenten), Shared Styles (zentral verwaltete Farb- und Text-Stile), Artboards (mehrere Screens in einem Dokument) und Plugins (Erweiterbarkeit durch Drittanbieter) popularisierte. Entwickelt von Bohemian Coding (Pieter Omvlee und Emanuel Sá; Niederlande; gegründet 2010; heute: Sketch B.V.; Amsterdam; Niederlande; sketch.com); zunächst als Einmalkauf ($99); ab 2016 Abonnementmodell ($9/Monat oder $99/Jahr für aktive Updates; ältere Versionen bleiben funktionsfähig ohne Abonnement). Sketch-Kernfunktionalität: Vektor-Zeichenwerkzeuge (Pfade; Boolean-Operationen; Bezierkurven); Symbols (Komponenten mit Override-Möglichkeiten für Text, Icons, Zustände); Shared Styles und Text Styles (zentrale Farbpaletten und Typografie; Design-Token-Vorläufer); Artboards für mehrseitige Designs; Auto-Layout (seit 2021: Sketch 72; ähnlich Figma); Prototype-Linking (seit 2019; rudimentär gegenüber Figma); Libraries für teamweiten Komponenten-Austausch; Inspector-Panel für präzise Maße und CSS-Export; Handoff-Funktion für Entwickler-Übergabe. Exklusiv macOS: kein Windows/Linux-Client; Browserbasierte Viewing-Funktion für Nicht-Mac-Nutzer vorhanden aber keine vollständige Editing-Funktion; dies war zentrale Schwachstelle gegenüber Figma.
Erläuterung
Sketch wurde am 7. September 2010 als Version 1.0 für macOS veröffentlicht (Pieter Omvlee und Emanuel Sá; Bohemian Coding; Amsterdam; Niederlande) und gewann 2012 den Apple Design Award – die erste Würdigung eines UI-Design-Tools durch Apple und Bestätigung seiner Bedeutung für den Mac-Design-Workflow. Sketch löste Adobe Photoshop als De-facto-Standard für UI-Design ab durch einen entscheidenden Paradigmenwechsel: während Photoshop als Pixel-Bildbearbeitungsprogramm für Web-Design adaptiert worden war, war Sketch von Anfang an für Vektor-basiertes Interface-Design auf Retina-Displays konzipiert; das Ergebnis war ein drastisch vereinfachter Workflow für UI-Designer. Adobe Fireworks (Adobe Systems; San Jose; CA; übernommen von Macromedia 2005; eingestellt 2013) war ein direkter Vorgänger: Fireworks kombinierte ebenfalls Vektor und Pixel für Web-Design; die Einstellung von Fireworks 2013 trieb viele Designer zu Sketch. Die Symbol-Funktion (Sketch Version 3.0; 2014) war der entscheidende Innovationssprung: erstmals konnten UI-Komponenten als wiederverwendbare, zentral aktualisierbare Elemente definiert werden – jede Änderung am Master-Symbol aktualisierte alle Instanzen im Dokument und alle Dokumente die diese Library nutzten; dieses Konzept wurde zur Grundlage moderner Design-Systeme und war Jahre vor Figma's Component-System. Sketch erreichte seinen Marktanteil-Höhepunkt um 2017–2018: UXtools.co Design Tools Survey 2018 zeigte Sketch mit 65% als primäres Design-Tool unter befragten UX-Designern; Zeplin (Istanbul; Türkei; Pelin Kenez/Şeremet Çelikkol; 2014; zeplin.io) wurde zum Standard-Handoff-Tool für Sketch-Entwickler-Übergaben und machte Sketch zum Zentrum eines Design-Delivery-Workflows. Dylan Field und Evan Wallace gründeten Figma (San Francisco; CA; 2012; öffentlicher Launch 2016; Series-C 2018: $90 Mio. bei $440 Mio. Bewertung; Adobe-Übernahmeversuch 2022 $20 Mrd. scheiterte an EU-Kartellbehörden Dezember 2023) als Browser-natives Kollaborationswerkzeug: Figma's Echtzeit-Kollaboration (mehrere Designer arbeiten gleichzeitig am selben Dokument), Plattform-Unabhängigkeit (Windows/macOS/Linux/Browser) und freier Einstiegstier (kostenloser Account für bis zu 3 Projekte) machten es strukturell überlegen für Teams; die UXtools.co Design Tools Survey 2023 zeigte Figma mit 79% als primäres Tool; Sketch fiel auf 14%. Sketch reagierte mit Browser-basierten Collaboration-Features (2021) und Sketch für Teams-Webinterface; jedoch blieb die macOS-Exklusivität des vollen Editors ein struktureller Nachteil. Abstract (San Francisco; CA; Josh Brewer/Kevin Smith; 2016; abstractapp.com) war als Git-basiertes Versions-Management für Sketch-Dateien ein wichtiger Teil des Sketch-Ökosystems; Abstract wurde 2022 auf reine Dokumentationsplattform pivotiert als Sketch-Marktanteil schwand.
Sketch-Kernfunktionen und Design-System-Integration
- Symbols, Overrides und Libraries: Symbols (eingeführt Sketch 3.0; 2014): Master-Symbol-Definition einmal erstellen; beliebig viele Instanzen platzieren; jede Instanz kann lokal überschrieben werden (Text, Icon, Farbe – «Overrides»); Änderung am Master propagiert zu allen Instanzen; Symbol-Organisierung: verschachtelte Symbols (Nested Symbols) für komplexe Komponenten (z.B. Button enthält Symbol für Icon); Symbol-Libraries seit Sketch 47 (2017): Symbols aus externem Sketch-Dokument in aktuelles importieren; Library-Updates werden an alle Nutzer der Library propagiert; Basis für teamweite Design-Systeme vor Figma-Teams; Text-Styles und Layer-Styles: zentrale Definitionen für Typografie (Font, Größe, Gewicht, Farbe, Zeilenabstand) und Shapes (Füllfarbe, Border, Schatten, Blur); Styles werden in Library-Dokument verwaltet; Änderungen propagieren; funktional äquivalent zu CSS-Variablen im Design-Tool; Sketch-Runner Plugin (2016): Spotlight-ähnliche Befehlspalette für Sketch; Symbol-Einfügen ohne Mausbedienung; einer der beliebtesten Sketch-Plugins; Plugin-Ökosystem: über 700 Plugins im Sketch-Plugin-Directory; Craft by InVision (Prototyping), Anima (Responsive Layout), Stark (Accessibility-Kontrast-Check), Sketch2React (Code-Export)
- Artboards, Handoff und Prototyping: Artboards: benannte Rahmen auf dem unendlichen Sketch-Canvas; ein Dokument enthält beliebig viele Artboards; verschiedene Gerätegrößen nebeneinander (iPhone 14; iPad; Desktop; Artboard-Presets für alle Standard-Gerätegrößen); Export: alle Artboards auf einmal als PNG/SVG/PDF; Prototype-Links (seit Sketch 49; 2017): Klick-Verknüpfungen zwischen Artboards für einfache Screen-Flows; Übergangsanimationen; Vorschau im Browser; für komplexe Prototypen InVision oder ProtoPie als Erweiterung; Sketch Handoff/Inspect (eingebaut seit Sketch 52; 2018): HTML-Export mit CSS-Werten für alle Elemente; Entwickler sehen Abstände, Farben, Schriftgrößen, Assets als Code-Werte; Zeplin als Drittanbieter-Alternative mit besserer Entwickler-Erfahrung; Measure Plugin (Alternative): zeigt Abstandsmaße automatisch; Sketch Mirror (iOS-App): Echtzeit-Preview von Sketch-Designs auf iPhone während der Bearbeitung; ähnlich Figma's Mirror; für Device-Preview ohne Export
- Sketch vs. Figma – Funktionsvergleich 2024: Sketch-Vorteile gegenüber Figma: Performance bei sehr großen Dokumenten (lokal gespeichert vs. Cloud-basiert); macOS-native Performance und Tastenkürzel; günstigeres Preismodell für solo-Designer ($9/Monat vs. Figma Professional $15/Monat); Libraries-Workflow für macOS-Teams etabliert und gewohnt; offline-fähig (keine Internetverbindung notwendig); Figma-Vorteile gegenüber Sketch: Echtzeit-Kollaboration ohne Merge-Konflikte; Windows/macOS/Linux/Browser; kostenloser Einstiegstier; Dev Mode (seit 2023; direkte Entwickler-Ansicht ohne Handoff-Export); Advanced Prototyping (Variables, Conditions, Expressions; seit Figma Config 2023); Community-Templates und Component-Libraries; bessere Auto-Layout-Implementierung; Migrationspfade: Sketch-zu-Figma-Migration: Figma importiert .sketch-Dateien direkt; alle Symbols werden zu Figma-Components; alle Layer-Styles zu Figma-Styles; manuelle Nacharbeit für komplexe Komponenten und Constraints; Workflow-Änderungen beim Switch: keine lokalen Dateien mehr; Cloud-Versionierung statt Abstract; Echtzeit statt Merge-Reviews
Sketch im aktuellen Design-Tool-Markt
- Marktentwicklung und aktuelle Positionierung: UXtools.co Design Tools Survey (jährlich seit 2016; größte Branchenbefragung; 2023: n=2.700+ UX-Designer weltweit): 2018 Sketch 65% primäres Tool; 2019 Figma überholt Sketch erstmals; 2021 Figma 77% / Sketch 12%; 2023 Figma 79% / Sketch 14%; Sketch-Marktanteil stabilisiert sich in macOS-affinen Unternehmen (Apple-Ökosystem-Teams; Agenturen in Europa/UK); Sketch als Team-Tool: Sketch für Teams bietet Browser-basiertes Viewing und Commenting; jedoch kein vollständiges Browser-Editing; schließt Windows-Entwickler und -Stakeholder aus vollständiger Zusammenarbeit aus; Sketch Workspace (seit 2020): Cloud-Speicherung und Sharing; Browser-Preview; Comment-System; Version-History; kein vollständiger Browser-Editor; Sketch-Community: Sketch App Sources (sketchappsources.com) und Sketch App Resources bieten Community-Templates und UI-Kits; jedoch deutlich kleinere Community als Figma Community (öffentliche Templates/Plugins direkt in Figma-App); Adobe XD (Adobe Systems; San Jose; CA; März 2016 – Oktober 2023; eingestellt): direkter Sketch-Wettbewerber für kurze Zeit; kostenlos für Adobe-CC-Abonnenten; jedoch nie über ~8% Marktanteil hinausgekommen; offiziell eingestellt Oktober 2023