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.

https://vimeo.com/258111918

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.

https://vimeo.com/259599872

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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung