Figma: Design, Prototyp und Zusammenarbeit im gesamten Unternehmen

Figma

In den letzten Monaten habe ich geholfen, eine hochgradig angepasste WordPress-Instanz für einen Client zu entwickeln und zu integrieren. Es ist eine gute Balance zwischen Styling und der Erweiterung von WordPress durch benutzerdefinierte Felder, benutzerdefinierte Beitragstypen, ein Design-Framework, ein untergeordnetes Thema und benutzerdefinierte Plugins.

Der schwierige Teil ist, dass ich es anhand einfacher Modelle von einer proprietären Prototyping-Plattform mache. Obwohl es eine solide Plattform für Visualisierung und Design ist, lässt es sich nicht einfach in HTML5 und CSS3 übersetzen. Fügen Sie alle anderen Iterationen hinzu, und meine Tage werden ziemlich frustrierend, da der Fortschritt extrem langsam ist.

Ein Teil des Puzzles ist, dass die Designagentur die Prototypen einfach übergeben hat, ohne irgendeine Art von Master-Stylesheet bereitzustellen. Deshalb arbeiten wir daran, dies zu erreichen, indem wir die Prototypen in exportieren Luftschiffund dann das CSS in WordPress übersetzen. Die Anzahl der erforderlichen Schritte und die Lücken zwischen den Plattformen machen es schwierig. Ganz zu schweigen von dem Versuch, die Komplexität hinsichtlich Geschwindigkeit und Skalierbarkeit zu vereinfachen

Figma

Figma zentralisiert einen Großteil dieser Arbeit mit einer Plattform, die Design, Feedback und Zusammenarbeit in jedem Mitglied Ihres Teams ermöglicht, einschließlich:

  • Designer - Arbeiten Sie im Kontext und in Echtzeit zusammen. Machen Sie sich niemals Sorgen, dass Ihre Dateien veraltet sind oder sich gegenseitig die Arbeit überschreiben.
  • Stakeholder - Senden Sie einen Link, um Feedback zu sammeln, Änderungswünsche zu erhalten und Stakeholdern die Möglichkeit zu geben, Kopien in Ihren Entwürfen zu aktualisieren.
  • Entwickler - Ingenieure haben immer Zugriff auf die aktuelle Wahrheitsquelle und können Elemente überprüfen, Assets exportieren und Code kopieren.

Figma hat einige einzigartige Eigenschaften:

  • Boolesche Operationen - Mit vier Formeln: Vereinigen, Subtrahieren, Schneiden und Ausschließen können Sie jeden Satz von Formebenen präzise kombinieren.
  • Komponenten - Erstellen Sie schneller und konsistenter mit wiederverwendbaren und skalierbaren Elementen in Ihren Dateien. Greifen Sie in jeder Instanz auf Ebenen zu, damit Sie Text und Bilder intuitiv inline bearbeiten und überschreiben können.
  • Einschränkungen - Skalieren Sie Ihr Design auf eine beliebige Bildschirmgröße, indem Sie Objekte an einem übergeordneten Rahmen befestigen, Objekte an einem Raster ausrichten oder sogar skalierbare Komponenten erstellen.
  • Geräterahmen - Präsentieren Sie Ihre Designs in den richtigen Umgebungen. Sie können sogar zwischen Hoch- und Querformat wählen.
  • Wechselwirkungen - Erwecken Sie Ihre Prototypen zum Leben, indem Sie Interaktionen per Mausklick, Schweben, Drücken und mehr definieren.
  • Overlays - Mit der relativen und manuellen Positionierung haben Sie die volle Kontrolle darüber, wo und wie Überlagerungen angezeigt werden.
  • Pixel-Perfektion - Die interaktive Bearbeitung mit 60 Bildern pro Sekunde bietet Ihnen gestochen scharfe, pixelgenaue Vorschauen und Exporte.
  • Prototyping - Erstellen Sie schnell Flows, indem Sie Bildschirme verbinden und Elemente wie Interaktionen, Übergänge, Überlagerungen und mehr hinzufügen. Anstatt mit anderen Tools zu synchronisieren, teilen Sie einfach eine URL, um Feedback zu erhalten.
  • Responsive Design für mobile Endgeräte - Dehnen Sie Ihre Layouts und sehen Sie, wie sie auf Änderungen der Bildschirmgröße reagieren.

Responsive Prototyping

  • Scrolling - Aktivieren Sie das horizontale, vertikale oder beliebige Scrollen in einzelnen Formen oder im gesamten übergeordneten Rahmen.
  • Stile - Synchronisieren Sie Farben, Text, Raster und Effekte in all Ihren Projekten. Behalten Sie weniger Textstile bei und richten Sie Ihre Designs auf verschiedenen Geräten mit den einzigartigen Rasterstilen von Figma aus.
  • Teambibliotheken - Freigeben von Komponenten und Stilen in Figma - keine gemeinsamen Laufwerke oder zusätzlichen Tools erforderlich. Sie und Ihr Team steuern mit einfachen Veröffentlichungsworkflows, wie und wann Änderungen eingeführt werden.
  • Vektornetzwerke - Figma hat das Stiftwerkzeug intuitiver gestaltet, um eine direkte Manipulation zu ermöglichen und gleichzeitig die Abwärtskompatibilität mit Pfaden zu gewährleisten.

Für Unternehmen Kunden kann Figma Konsistenz, Effizienz und Sicherheit in großem Maßstab fördern. Die Plattform ermöglicht Unternehmenskunden die einfache Verwaltung von Entwurfssystemen mit Teambibliotheken und das Hochladen und Freigeben benutzerdefinierter Schriftarten in Ihrem Unternehmen. Single Sign-On, Zugriffskontrollen und Aktivitätsprotokolle sind enthalten.

Beginnen Sie mit Figma

Figma hat eine große Auswahl an Tutorials, die sie auf ihren pflegen Youtube KanalHier ist ein Video mit den ersten Schritten:

Figma bietet Entwicklern die Möglichkeit, Assets direkt aus der Entwurfsdatei zu überprüfen, zu kopieren, zu exportieren und CSS zu kopieren. Sie können Ihre vorhandenen Workflows auch mit Integrationen aktivieren, einschließlich Luftschiff, Avocode, Jira, Dropbox, ProtoPieund Prinzip für Mac. Sie haben auch eine robuste API.

Probieren Sie Figma kostenlos aus

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.