Als wir bei Píldoras UX erfuhren, dass das Ironhack-Team einige Designvorträge im Auditorium des Matadero-Kulturzentrums in Madrid organisiert hatte, zögerten wir nicht, an der Veranstaltung teilzunehmen. Wir waren gespannt auf die neue Framer X-Prototyping-Software.
Einen Tag vor der Veranstaltung erhielten alle Teilnehmer als Überraschung Zugang zur Beta-Version. Die Organisatoren empfahlen uns auch, unsere Laptops mitzubringen, da sie uns einen Workshop geben wollten, um die Anwendung des neuen Programms zu erlernen.
Für diejenigen unter Euch, die Framer nicht kennen, sage ich Euch, dass dieses Programm vor einigen Jahren in die Design-Szene eingeschlagen hat und eine neue Art der Erstellung navigierbarer Prototypen mit nie dagewesenen Möglichkeiten bietet. Sein großer Vorteil war, dass man animierte Prototypen erstellen konnte, die fast identisch mit einer realen Anwendung waren.
Aber nicht alles war schön und glänzend in Framer. Um es benutzen zu können, mussten sich die Designer ein Mindestmaß an Kenntnissen in der Front-End-Programmierung (CSS, HTML5 und etwas Javascript) aneignen. Viele von ihnen waren nicht bereit, sich dieses Wissen anzueignen und zogen es vor, weiterhin andere Programme zur Erstellung interaktiver Prototypen wie Marvel oder Invision zu verwenden.
Während des Gesprächs wurde uns erklärt, dass die Gründer von Framer zwei Designer von Facebook waren, die es leid waren, nicht-interaktive Prototypen zu erstellen, und beschlossen, ein neues Programm zu schaffen. Erst später bemerkten sie das Problem, dass Framer ein schwierig zu benutzendes Programm für Designer war, die kein JavaScript kannten. Viele Designer loggten sich zwei- oder dreimal ein und kamen nie wieder zurück. Letztendlich wurde die Software nur dann verwendet, wenn es notwendig war, komplexe Prototypen zu erstellen, und von Designern, die etwas Code kannten.
Aus diesem Grund kündigten die Gründer vor einigen Monaten die Entwicklung von Framer X an, einer Anwendung, die dieselben Möglichkeiten wie das Mutterprogramm bietet, aber viel einfacher zu bedienen ist.
Auf den ersten Blick erinnert die Oberfläche ein wenig an Sketch, nicht nur visuell, sondern auch in ihrer Benutzerfreundlichkeit.
In ihrer Präsentation erläuterte Aroa Gil, dass man Entwürfe aus Sketch importieren oder sogar direkt mit Sketch entwerfen kann. Die Software hat auch Vorteile, wie die Möglichkeit, Elemente innerhalb eines Entwurfs unter Beibehaltung der Abstände zu verschieben, wodurch Designer viel Zeit sparen. Framer X soll es den Designern ermöglichen, die Prototypen nicht nur zu animieren, sondern auch direkt in diesem Werkzeug zu entwerfen.
In der linken Seitenleiste befinden sich mehrere Menüoptionen: Werkzeuge, Schichten, Komponenten und ein Store mit Zugriff auf bereits verwendete Komponenten.
Die Komponenten überraschten das Publikum, weil sie etwas Neues in Framer waren; diese können von 2 Typen sein: Design oder Code. Framer X-Komponenten sind vollständig interaktive und wiederverwendbare Elemente, die alles von Live-Karten bis hin zu echten Daten und Medienabspielprogrammen umfassen können. Es besteht auch die Möglichkeit, eigene Komponenten zu erstellen, mit dem Vorteil, dass Framer sie responsiv macht. Durch Drücken von Befehl + K erzeugst Du eine Master-Komponente (entspricht einem Symbol in Sketch).
Der Store ist kostenlos und verfügt auch über einen privaten Bereich. Er bietet sowohl grundlegende als auch komplexere Komponenten wie die für YouTube oder Spotify. Diese funktionieren wirklich nur durch das Ändern der URL, was großartig ist!
Und hier kommt ein interessanter Punkt... Framer X ermöglicht es Designern, visuell zu arbeiten und React-Code ohne einen Entwickler zu generieren. Sie können UI-Elemente und Animationen erstellen, die TypeScript für die Übergabe senden. Ich kann mir vorstellen, dass dies eine bequeme Möglichkeit für visuelle Designer ist, in die Tiefe der Arbeit mit Code zu springen.
Damit ist unsere Einführung in Framer X abgeschlossen. Ich überlasse Dir weiteres Referenzmaterial über erste Eindrücke von Framer X als potenziellem Konkurrenten von Sketch sowie einen Artikel über die Vorteile für Designer und Entwickler.
Ursprünglich in Spanisch in "Píldoras UX" veröffentlicht.
trendig
