Jala Tech Talk: User Interface Design mit Figma

In der heutigen Ausgabe unserer Tech-Serie haben wir Sharan, unseren Produktdesigner hier bei Jala, getroffen. Er spricht über Figma und wie nützlich er für das Design der Benutzeroberfläche gefunden hat.

Was ist zuerst Figma?

Figma ist eine Cloud- und Browser-basierte Designsoftware, die wir für unser gesamtes Produktdesign hier bei Jala verwenden.

Ich habe gehört, du bist ein großer Fan von Figma. Warum das?

Es gibt so viele Gründe, warum ich Figma gerne nutze. Hier sind ein paar:

  1. Kein Software-Download erforderlich
  2. Da es sich um Cloud- und Browser-basierte Funktionen handelt, benötigen Sie lediglich einen Weblink, um die Plattform zu öffnen. Dies bedeutet auch, dass Ihr gesamtes Team unabhängig vom Betriebssystem darauf zugreifen kann. Ein weiterer Vorteil von Browser-basiert ist, dass Teammitglieder unabhängig von ihrem physischen Standort an einem Projekt zusammenarbeiten können.

    2. Mehrere Benutzer

    Mehrere Stakeholder können das Design anzeigen und damit interagieren. Ein Betrachter kann an einem ganz bestimmten Punkt des Designs einen Kommentar hinterlassen, ohne die Software herunterladen und installieren zu müssen, und er kann das Design genau so sehen, wie es gesehen werden soll.

    3. Benutzerfreundlichkeit

    Figma ist wirklich einfach zu bedienen! Für Designer, die mit Sketch vertraut sind, ist Figma sehr ähnlich, so dass der Übergang unglaublich reibungslos verläuft. Die Funktionen sind unglaublich einfach, es gibt keine große Lernkurve.

    4. Prototyping

    Mit Figma können Sie Ihre UI-Designs prototypisieren. Zum Beispiel als wir unsere mobile Version von Jala gemacht haben. Nachdem ich die Designs erstellt hatte, habe ich sie auf Figma prototypisiert. Dies bedeutet, dass die Plattform sie virtualisiert, so dass es wie eine vollwertige App aussieht. Sie können tatsächliche Tests durchführen, ohne sie codieren zu müssen. Prototyping war unglaublich wichtig, um den Entwicklern zu erklären, wie die Dinge funktionieren würden, und es hat die Kommunikation erheblich vereinfacht!

    Haben Sie Figma benutzt, bevor Sie zu Jala kamen?

    Nein, ich hatte nicht. Ich kam aus einem Photoshop-Hintergrund und verwendete Photoshop, als ich anfing, dass ich einige grundlegende Illustrationen erstellte. Dies ist nicht wirklich ideal für das Design von UI. Als ich anfing, habe ich einige grundlegende Illustrationen in Photoshop gemacht. Es war eigentlich Joceline Kuswanto von Kontinentalist, unserer Schwesterfirma, die mich mit Figma bekannt machte und durch sie erfuhr ich, wie gut sie für das UI-Design geeignet ist. Es war kein einfacher Übergang für mich, aber ich erkannte den Unterschied und erkannte, wie wichtig es für das Design der Benutzeroberfläche war.

    Was haben Sie an den Designelementen von Figma für sehr wichtig für das UI-Design gehalten?

    Beispiel für Änderungen an einer Hauptkomponente

    Ich glaube, am wichtigsten war, dass Sie mit Figma Master-Komponenten erstellen können. Daher verwende ich ein autonomes System, das einzelne Komponenten als einzelne Elemente betrachtet, die zu einer gesamten Webseite zusammengefügt werden können. Wenn Sie eine Hauptkomponente ändern, werden alle entsprechenden Elemente geändert. Wenn Sie beispielsweise eine Schaltfläche entworfen und zu einer Master-Komponente gemacht haben, wenn Sie diese Master-Komponente ändern, werden auch alle anderen von dieser Master-Komponente abgeleiteten Schaltflächen beeinflusst. Auf diese Weise müssen Sie nicht alle verwandten Elemente ändern.

    Woran arbeiten Sie gerade, an Figma?

    Im Moment verwende ich Figma, um den Blogbereich für Jala zu erstellen. Ich werde mit Figma Prototypen machen, um zu sehen, wie der Fluss aussehen wird. Es ist wirklich nützlich für die Entwickler, weil es die Vermutung nimmt und sie sich nicht weiter Notizen machen müssen. Wenn wir kein Prototyping durchführen würden, würde der Workflow viel länger dauern: Sie würden sich das Design ansehen und mir dann spezielle Fragen zum Ablauf stellen. Prototyping macht die Vermutungen überflüssig und beschleunigt die Arbeit der Entwickler. Ebenso erspare ich mir Zeit, Notizen zu machen, wie z. B. die Tastengröße, Schriftfarbe usw., die speziell für das Entwicklungsteam erstellt wurden.

    Bild von William Iven auf Unsplash

    Figma gibt Ihnen auch das CSS. Wenn Sie auf ein bestimmtes Element klicken, werden die vollständigen Eigenschaften wie Schriftgröße, Farben, Positionierung usw. angezeigt

    Dadurch wird die Übergabe zwischen dem Designer und dem Entwickler sehr viel einfacher.

    Noch letzte Kommentare?

    Ich würde sagen, dass Figma nicht gut für Vektorillustrationen ist. Ich würde den Designern trotzdem raten, sich an Illustrator zu halten. Aber abgesehen davon bin ich mit Figma sehr zufrieden und würde es definitiv anderen UI / UX-Designern empfehlen.

    Bleiben Sie dran auf unserem neuen Blogdesign auf unserer Website!

    Vielen Dank, dass Sie unsere Tech Talk Series gelesen haben!

    Haftungsausschluss: Jala wurde nicht von Figma gesponsert, um diesen Beitrag zu schreiben. Wir sind der Meinung, dass die Plattform für das Design von UI / UX von Nutzen ist, und sie hat sich als die effizienteste Plattform für Jalas Design- und Entwicklungsanforderungen erwiesen.