Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Tool-Tipp

Supernova Studio: Vom Sketch-Entwurf zur nativen App in nur 4 Minuten

Supernova Studio. (Grafik: Supernova Studio)

Sich Code aus Design-Entwürfen anzeigen zu lassen, funktioniert bereits mit vielen Tools. Doch mit Supernova Studio könnt ihr aus eurem Sketch-Entwurf eine komplette native App erstellen lassen.

Marvel, Mockingbot und Figma haben alle etwas gemeinsam: ein sogenanntes Developer-Handoff-Feature. Doch diese Funktion geht eigentlich nie über das Anzeigen von kurzen Code-Schnipseln hinaus. Das Anzeigen der Höhe, Breite und Farbcodes für den Hintergrund spart beim Entwickeln einer nativen App nach einer Design-Vorlage nur wenig bis gar keine Zeit ein.

Developer-Handoff-Feature bei Figma. (Grafik: blog.figma.com)
Developer-Handoff-Feature bei Figma. (Grafik: blog.figma.com)

Das kann Supernova Studio

Wer jedoch mit Sketch arbeitet, bekommt mit dem Tool Supernova Studio mehr als nur ein Handoff-Feature. Mit diesem Tool kann in wenigen Minuten aus einem Sketch-Entwurf eine native Android-, iOS- oder auch React-Native-App erstellt werden.

Aus vier Entwürfen inklusive Animationen, Layouts und Navigation soll mit Supernova Studio in nur vier Minuten eine native App erstellt werden können. Dafür werden im ersten Schritt die einzelnen Design-Elemente als passende Komponente markiert. Dafür steht eine große Komponenten-Auswahl bestehend aus Tabellen-, Button-, Text- und Tab-Elementen sowie vielen weiteren zur Verfügung.

Supernova macht aus den Entwürfen ein komplett responsives Design. Entsprechende Anpassungen können jedoch ohne Probleme vorgenommen werden. Dafür steht eine Vorschau für verschiedene Bildschirmgrößen zur Verfügung. In einem weiteren Schritt können mit der zur Verfügung stehenden plattformübergreifenden Engine passende Animationen erstellt werden. Im abschließenden Schritt muss nur noch die Navigation durch die verschiedenen Bildschirme eingerichtet werden. Danach kann das gesamte Konstrukt über den entsprechenden Menüpunkt für die gewünschte Plattform exportiert werden.

Funktionen in der Übersicht

Für einen groben Überblick hier einmal die wichtigsten Features aufgelistet:

  • direkte Konvertierung von Sketch-Designs
  • native Komponenten
  • Erstellung von User-Flows und Navigation
  • Erkennung und direkter Export der benötigten Resourcen
  • plattformübergreifende Animations-Engine
  • Kollaboration
  • Export einer nativen App für Android, iOS und React Native
Zuweisung der passenden View-Komponenten. (Screenshot: Supernova Studio/t3n.de)

1 von 4

Auf der Website von Supernova Studio gibt es außerdem eine gut sortierte Dokumentation, über die ihr alle Features finden könnt.

Passend dazu:

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst