Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma

Kollaboratives Interface Design mit Figma

by
Length:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Figma ist momentan etwas Besonderes. Auf den ersten Blick handelt es sich nur um eine webbasierte Designanwendung. Obwohl es andere Programme mit Ähnlichkeiten gibt, unterscheidet sich dieses Programm durch seine Fähigkeit, auf die spezifischen Anforderungen von Interface-Designern einzugehen.

Es ist klar, dass die Leute hinter Figma verstehen, dass die meisten Interface-Design-Projekte in irgendeiner Weise teambasiert oder kollaborativ sind. Sie sind sich offensichtlich auch der Schwachstellen bewusst, die Teams bei der Abwicklung von Zusammenarbeit und Synchronisierung häufig bewältigen müssen. In der Regel müssen Studios Lösungen zusammenstellen, die mehrere Tools für Design, Speicher von Drittanbietern und Versionskontrolle umfassen.

Figma macht diesen unzusammenhängenden Ansatz überflüssig, indem es Folgendes bereitstellt:

  • Erweiterte Live-Kollaborationsfunktionen, die automatisch alle Teammitglieder synchronisieren.
  • Kombiniertes Design, Prototyping und Entwicklerübergabe in einer einzigen Anwendung, sodass mehr an einem Ort erledigt werden kann.
  • Zugriff auf alle Desktop-Betriebssysteme, z. B. Mac, Windows, Linux und ChromeOS.

Trotz der Tatsache, dass Figmas "On Canvas" -Tools großartig sind und wahrscheinlich ausreichen, um viele Designer davon zu überzeugen, die Software zu verwenden, ist es der kollaborationsorientierte Ansatz, der viele Studios dazu veranlasst, andere Anwendungen beiseite zu legen und stattdessen Figma zu verwenden.

"Wir haben jetzt eine dynamische, kollaborative Umgebung, in der wir gemeinsam ein Brainstorming durchführen, Ideen austauschen und letztendlich kreativer sein können." - Taylor Madaffari, Texter, Aisle Rocket Studios

In diesem Artikel werden Sie selbst sehen, warum sich Teams so für Figma interessieren. Wir zeigen Ihnen, wie Sie die gesamte Bandbreite der Tools für die Zusammenarbeit nutzen können.

Wenn Sie noch kein Figma-Konto haben, können Sie eines kostenlos erhalten und alles, was wir abdecken, mitverfolgen.

Figma start hereFigma start hereFigma start here
Figmas Schnittstelle

Wir werden in diesem Beitrag ziemlich viel behandeln, daher möchten Sie vielleicht zuerst einen Kaffee trinken:

  • Wie die Zusammenarbeit in Figma erfolgt
  • Teams erstellen und verwalten
  • Zugriffsebenen für Kontrollteammitglieder
  • Team-Shared-Komponenten und -Stile
  • Teilen und Einbetten
  • Bemerkungen
  • Versionsgeschichte
  • Integration mit zusätzlichen Tools

Zusammenarbeiten, gleiches Dokument, Echtzeit

Eine der herausragendsten Funktionen von Figma für die Zusammenarbeit ist die Möglichkeit, dass mehrere Teammitglieder gleichzeitig an demselben Dokument arbeiten, während es in Echtzeit aktualisiert wird.

Möglich wird dies durch die Tatsache, dass Figma eine webbasierte Anwendung ist. In der Vergangenheit wurden webbasierte Designanwendungen vielleicht nicht ganz ernst genommen, aber im Fall von Figma ist seine Online-Natur ein zentraler Bestandteil dessen, was es so attraktiv macht.

Für jede Person mit einer bestimmten geöffneten Figma-Datei sehen die anderen Mitarbeiter einen kleinen Mauszeiger auf der Leinwand, an den der Name dieser Person angehängt ist und der zeigt, wohin sie zeigen. Jede Änderung, die sie am Dokument vornehmen, wird an alle anderen Mitglieder weitergeleitet, die diese Änderungen in Echtzeit sehen. Alles, was sich in einer Figma-Datei ändert, steht sofort allen anderen zur Verfügung.

Diese zentralisierte Aktualisierung von kollaborativen Dateien in Echtzeit bedeutet:

  • Kein Hin- und Herschicken von Dateien zwischen Teammitgliedern mehr.
  • Keine Konvertierung mehr von einem Format in ein anderes, um mit unterschiedlicher Software für verschiedene Phasen des Projekts umzugehen.
  • Sie müssen keine Dateien mehr in den Speicher eines Drittanbieters hochladen, damit andere Teammitglieder auf Änderungen zugreifen können.
  • Keine Synchronisation mehr zwischen Änderungen, die ein Mitglied in seinen Dateien hat, und denen, die ein anderes Mitglied in seinen Dateien hat.
  • Sie können Ideen und Vorschläge gemeinsam durcharbeiten, während Sie sie diskutieren.
  • Ebenso können Sie Kundenfeedback sofort implementieren, wenn Sie ihnen ein Design zeigen.

Wie können Sie also zulassen, dass Menschen auf diese Weise zusammenarbeiten? Lass es uns herausfinden.

Wie abläuft die Zusammenarbeit in Figma?

In Figma gibt es zwei Möglichkeiten, wie Sie zusammenarbeiten können.

  1. Eine besteht darin, Teams zu erstellen und zu verwalten, deren Mitglieder alle Zugang zu gemeinsamen Projekten haben (ein großartiger Ansatz für Studios).
  2. Die andere Möglichkeit besteht darin, Dokumente auszutauschen, die sich hervorragend für eine Community-basierte Zusammenarbeit in freier Form eignen.

Wir beginnen mit der Betrachtung von Teams, die im Mittelpunkt der Zusammenarbeit mit Figma stehen.

Teams erstellen und verwalten

Um mit Teams in Figma arbeiten zu können, müssen Sie zunächst ein neues Team erstellen. Melden Sie sich bei Figma an und klicken Sie auf die Schaltfläche Neues Team in der unteren linken Ecke der Benutzeroberfläche:

new team button in Figmanew team button in Figmanew team button in Figma

Geben Sie auf der Seite, zu der Sie später weitergeleitet werden, einen Namen für Ihr neues Team ein:

Name your teamName your teamName your team

Als Nächstes werden Sie zu einer Seite weitergeleitet, auf der Sie zwischen zwei Teamplantypen wählen können. Sie können die kostenlose Stufe verwenden, mit der ein Team aus zwei Personen und unbegrenzte Zuschauer auf bis zu drei Projekte zugreifen kann, oder ein kostenpflichtiges Konto für mehr Teammitglieder und Projekte sowie einige zusätzliche Funktionen, die Sie auf der Figma-Preisseite lesen können.

Choose your team planChoose your team planChoose your team plan

Laden Sie Teammitglieder ein

Zu diesem Zeitpunkt wurde Ihr Team erstellt und Sie können Mitglieder einladen.

Suchen Sie im Bereich des Figma-Dateibrowsers in der linken Seitenleiste nach dem Namen des Teams, das Sie gerade eingerichtet haben. Klicken Sie darauf, um das Verwaltungsfenster für dieses Team aufzurufen:

find teamfind teamfind team

Unten rechts auf der Benutzeroberfläche sehen Sie einen Bereich mit der Überschrift Teammitglieder. Unter dieser Überschrift sehen Sie einen Link Einladen. Klicken Sie auf den Link, um den Einladungsprozess zu starten.

invite membersinvite membersinvite members

Geben Sie im angezeigten Popup die E-Mail-Adresse der Person ein, die Sie einladen möchten. Zu diesem Zeitpunkt legen Sie außerdem die Zugriffsebene des Teammitglieds auf "Administrator", "Bearbeiten" oder "Anzeigen" fest (wir werden in Kürze darauf eingehen, was diese Berechtigungen bedeuten).

permissionspermissionspermissions

Nach der Einladung erhält die Person entweder eine Benachrichtigung innerhalb von Figma oder eine E-Mail, über die sie die Einladung annehmen und dem Team beitreten kann:

invite emailinvite emailinvite email

Erstellen Sie Teamprojekte

Sobald Sie Ihre Teammitglieder eingeladen haben, können Sie Projekte einrichten, auf die alle Teams zugreifen können.

Klicken Sie auf der Teamverwaltungsseite auf den Link + Neues Projekt, der unter Ihrem Teamnamen links im Bereich Teamverwaltung angezeigt wird.

new projectnew projectnew project

Sie erhalten ein Popup mit einem Feld, in das Sie den Namen Ihres neuen Projekts einfügen können, und eine Dropdown-Liste, in der Sie die Berechtigungen auf Projektebene für das Team festlegen können.

Hinweis: Auf der kostenlosen Ebene können Sie nur die erste Berechtigungsoption "Jeder bei <team> kann bearbeiten" auswählen (diese Berechtigungen werden etwas später erläutert).

set permissionsset permissionsset permissions

Wenn Sie sich nun die Liste unter "Teamprojekte" ansehen, sollten Sie Ihr neu erstelltes Projekt sehen, damit Ihr Team mit der Arbeit beginnen kann.

newly created projectnewly created projectnewly created project

Kontrolle der Zugriffsstufen von Teammitgliedern

Für jedes Teammitglied kann die Zugriffsstufe individuell auf eine von vier Optionen eingestellt werden:

  • Inhaber.
  • Administrator.
  • Editor.
  • Zuschauer.

Diese Zugriffsstufen steuern:

  • Ob Sie Dateien bearbeiten oder nur anzeigen können.
  • Die Ebene des Teammitglieds, die Sie zum Projekt einladen können.
  • Die Ebene des Teammitglieds, für das Sie Berechtigungen ändern können.

Die Zugriffsstufe eines Teammitglieds gilt für alle Projekte und Dateien dieses Teams.

Wer kann Dateien ändern?

Jede Ebene außer Viewers kann Änderungen an Dateien vornehmen.

Besitzer- und Administratoreinladungen und Berechtigungseinstellungen

Eigentümer und Administratoren können ein Team mit Slack autorisieren, Teammitglieder als Administratoren, Redakteure oder Zuschauer einladen und die Berechtigungen für Teammitglieder ändern.

Eigentümer und Administratoren sind funktional identisch, es kann jedoch nur eine Person mit dem Eigentümerstatus festgelegt werden. Daher scheint es in erster Linie darum zu gehen, zu kommunizieren, wer für ein Projekt verantwortlich ist. Ein Besitzer kann diesen Status auf ein anderes Teammitglied übertragen.

Editor- und Viewer-Einladungen und Berechtigungseinstellungen

Redakteure können Berechtigungen für Redakteure und Betrachter einladen und ändern. Zuschauer können andere Zuschauer einladen, aber keine Berechtigungsänderungen vornehmen.

Zugriffsstufen ändern

Sie können die Zugriffsstufe eines Teammitglieds in der unteren rechten Ecke der Team-Seite unter Teameinstellungen ändern:

Changing Access LevelsChanging Access LevelsChanging Access Levels

Oder Sie können auf das Zahnradsymbol Admin Dashboard-Link oben rechts neben der Überschrift Teameinstellungen klicken:

Admin Dashboard linkAdmin Dashboard linkAdmin Dashboard link

Hier haben Sie die Möglichkeit, Mitglieder auf "Viewer" herunterzustufen:

downgrade members to Viewerdowngrade members to Viewerdowngrade members to Viewer

Erweiterte Berechtigungen für Pro-Teams

Wenn Sie sich bei Figma auf einer bezahlten Ebene befinden, können Sie "Erweiterte Berechtigungen" verwenden, wobei einzelne Projekte über Zugriffsebenen verfügen können, die die normalen Zugriffsebenen der Teammitglieder überschreiben. Dies sind die zusätzlichen Optionen, die wir bereits erwähnt haben und die auf bezahlten Ebenen verfügbar sind, wenn Sie ein neues Projekt erstellen.

Wenn für ein Projekt beispielsweise "Jeder bei <team> kann anzeigen" festgelegt ist, können selbst Teammitglieder mit Editor-Berechtigung keine Änderungen am Projekt vornehmen.

Die Standardoption, die auf freien Ebenen verfügbar ist, lautet:

  • Jeder bei <team> kann bearbeiten: Dies ist eine normale Zugriffsfunktion, bei der die Berechtigungsstufen von Personen Vorrang haben.

Die erweiterten Berechtigungsoptionen sind:

  • Jeder bei <team> kann anzeigen: Teammitglieder können das Projekt anzeigen, aber nicht ändern.
  • Nur einladen - lassen Sie mich auswählen, wer Zugriff hat: Das Projekt ist unsichtbar, es sei denn, eine Person wird ausdrücklich eingeladen.

Team-Shared-Komponenten und -Stile

Komponenten in Figma sind vorgefertigte grafische Objekte, die nach Bedarf wiederverwendet werden können, z. B. Karten, Überschriften und Schaltflächen. Stile hingegen sind vorkonfigurierte Sammlungen von Eigenschaften, die auf Objekte angewendet werden können, z. B. Textstil.

Dies ist beispielsweise eine Bibliothek voller Drag-and-Drop-fähiger Material-UI-Komponenten:

a library full of drag drop ready Material UI componentsa library full of drag drop ready Material UI componentsa library full of drag drop ready Material UI components

Ich werde jetzt nicht zu sehr auf die Funktionen von Komponenten und Stilen eingehen, da wir uns auf Werkzeuge für die Zusammenarbeit konzentrieren. Wenn Sie jedoch mehr über die einzelnen Tools erfahren möchten, besuchen Sie:

Freigeben von Bibliotheken

Bibliotheken mit Komponenten und Stilen können von mehreren Teams gemeinsam genutzt werden. Suchen Sie auf der Teamverwaltungsseite Ihres Teams oben rechts unter "Teameinstellungen" und klicken Sie auf den Link "Bibliotheken aktivieren".

Enable Libraries linkEnable Libraries linkEnable Libraries link

Sie sehen eine Liste der Bibliotheken, die dem Team möglicherweise zur Verfügung stehen, und Sie können den Zugriff für jede ein- oder ausschalten:

toggle access on or off for eachtoggle access on or off for eachtoggle access on or off for each

Tipp zum Verhindern versehentlicher Komponentenänderungen

Hinweis: Wenn Sie Zugriff auf erweiterte Berechtigungen haben, wie zuvor beschrieben, können Sie diese verwenden, um sicherzustellen, dass niemand versehentlich Änderungen an Komponenten vornimmt, die dann auf der ganzen Linie eingeführt werden. Behalten Sie einfach Ihre Hauptkomponenten in Nur-Ansicht-Projekten bei, damit Ihre Teammitglieder die Komponenten sehen und verwenden können, ohne sie zu ändern.

Teilen und Einbetten

Die Zusammenarbeit in Figma ist nicht nur für Teams. Sie können die Freigabefunktion auch verwenden, um es jedem zu ermöglichen, eines Ihrer Dokumente zu bearbeiten oder anzuzeigen. Dies eignet sich hervorragend für locker koordinierte Communitys und Personen, die nur Assets erstellen und anderen Designern schenken möchten.

Um ein Dokument freizugeben, klicken Sie auf die blaue Freigeben-Schaltfläche am rechten Ende der oberen Symbolleiste.

To share a document hit the blue Share buttonTo share a document hit the blue Share buttonTo share a document hit the blue Share button

Klicken Sie im angezeigten Popup auf den Link Linkzugriff aktivieren.

Enable link accessEnable link accessEnable link access

Wählen Sie anschließend neben der Zeile "Jeder mit dem Link" aus, ob Personen das Dokument bearbeiten oder nur anzeigen sollen. Sie können den Linkzugriff hier bei Bedarf auch später entfernen.

choose whether you want people to be able to edit or just view the documentchoose whether you want people to be able to edit or just view the documentchoose whether you want people to be able to edit or just view the document

Alternativ können Sie in demselben Popup-Fenster "Teilen" jemanden direkt einladen, anstatt den Linkzugriff zu aktivieren. Genau wie bei Teammitgliedern kann jeder, der durch Freigabe Bearbeitungszugriff auf ein Dokument erhält, in Echtzeit daran zusammenarbeiten.

Einbetten

Wenn Sie ein Figma-Design von einer anderen Site aus anzeigen möchten, können Sie dies durch Einbetten tun.

Klicken Sie unten in dem Feld, das geöffnet wird, wenn Sie auf die Schaltfläche Share klicken, auf den Link <> Public embed unten, um den Einbettungscode zum Kopieren und Einfügen zu erhalten:

click the Public embed link at the bottomclick the Public embed link at the bottomclick the Public embed link at the bottom

Sobald dieser HTML-Code zum Einbetten eines Figma-Dokuments in eine Seite verwendet wird, sieht er ungefähr so aus:

embed a Figma document in a pageembed a Figma document in a pageembed a Figma document in a page

Eingebettete Dateien werden in Echtzeit aktualisiert, um sicherzustellen, dass immer die neueste Version angezeigt wird.

Bemerkungen

Auch wenn die Zusammenarbeit über Figma in Echtzeit erfolgen kann, muss dies nicht immer so sein. Für die Kommunikation, die nicht in Echtzeit erfolgt, kommt das Kommentarsystem ins Spiel, sodass jedes Teammitglied oder jeder Kunde mit Ansichtszugriff an jeder Position auf der Design-Leinwand Feedback hinzufügen kann.

For communication thats not in real time the comments system comes into playFor communication thats not in real time the comments system comes into playFor communication thats not in real time the comments system comes into play

Wenn ein Kommentar hinterlassen wird, wird anderen Teammitgliedern eine Warnung über dem Kommentarsymbol in der Symbolleiste angezeigt. Wenn Sie auf diese Warnung klicken, wird auf der Seite eine kleine Sprechblase angezeigt. Wenn Sie auf die Blase klicken, wird ein Textkommunikationsfeld geöffnet, über das Notizen ausgetauscht werden können.

Versionsgeschichte

Einer der Dienste von Drittanbietern, die ein kollaboratives Team häufig benötigt, um seinen Arbeitsablauf zu koordinieren, ist eine Art Versionskontrollsystem. Mit Figma ist dies direkt integriert und alles geschieht automatisch. Versionen werden immer dann gespeichert, wenn eine Datei 30 Minuten lang inaktiv ist, d. h. wenn niemand an dieser Datei arbeitet.

Der Versionsverlauf reicht für die kostenlose Stufe 30 Tage zurück und ist für bezahlte Stufen unbegrenzt.

Um den Versionsverlauf einer Datei anzuzeigen, öffnen Sie sie, drücken Sie auf den v-förmigen Link rechts neben dem Dateinamen in der oberen Symbolleiste und wählen Sie Versionsverlauf anzeigen:

Show Version HistoryShow Version HistoryShow Version History

Eine Liste der gespeicherten Versionen wird in der rechten Seitenleiste angezeigt:

A list of saved versions will appear in the right sidebarA list of saved versions will appear in the right sidebarA list of saved versions will appear in the right sidebar

Wenn Sie auf eines dieser Elemente klicken, wird die zugehörige Version der Datei auf die Zeichenfläche geladen, das Element in der Versionsverlaufsliste wird blau und drei Punkte werden daneben angezeigt. Wenn Sie auf diese drei Punkte klicken, wird ein Menü angezeigt, über das Sie diese Version umbenennen, wiederherstellen oder duplizieren können.

a menu through which you can rename restore or duplicate that versiona menu through which you can rename restore or duplicate that versiona menu through which you can rename restore or duplicate that version

Integration mit zusätzlichen Werkzeugen

Figma bietet Ihnen so ziemlich alles, was Sie für die Zusammenarbeit im Designbereich benötigen. Es hilft Ihnen aber auch, Ihre Optionen für die Zusammenarbeit über den Entwurfsprozess hinaus zu erweitern, indem Sie eine Reihe von Tools von Drittanbietern integrieren.

Slack

Die Slack-Integration ist ein besonderer Schwerpunkt von Figma, da jedes vorhandene Slack-Team in ein Figma-Team umgewandelt werden kann. Sie können auch Benachrichtigungen über Slack senden lassen, wenn Kommentare zu Figma-Dateien hinterlassen werden.

Dribbble

Figma hat einen reibungslosen Ablauf, um einen Frame zu exportieren und direkt nach Dribbble zu verschieben.

Zeplin

Figma verfügt bereits über eigene Werkzeuge zur Übergabe von Entwicklern. Wenn Sie jedoch weiterhin Zeplin benötigen oder verwenden möchten, bietet Figma die Integration, um Frames einfach in ein Zeplin-Projekt zu exportieren.

Dropbox-Papier

Die Integration von Figma in Dropbox dient nicht zu Speicherzwecken, sondern soll Ihnen das schnelle Einbetten von Designs in Dropbox-Papierdateien ermöglichen. Paper ist ein kollaborativer Dokumentbearbeitungsdienst. So kann Ihr Team auch an einem Dokument zusammenarbeiten, während ein darin eingebettetes Figma-Design in Echtzeit aktualisiert wird, wenn Änderungen daran vorgenommen werden.

Jira und Trello

Um das Projektmanagement zu unterstützen, lässt sich Figma sowohl in Jira als auch in Trello integrieren, sodass Sie Figma-Dateien live in Ausgaben / Karten einbetten können.

Einpacken

Wie Sie sehen können, bietet Figma eine beeindruckende Reihe von Funktionen, mit denen Interface-Designer zusammenarbeiten und effizient zusammenarbeiten können. Einige der häufigsten Probleme bei teambasierten Projekten werden durch diesen zentralisierten, webbasierten Ansatz behoben.

Und so beeindruckend die Werkzeuge für die Zusammenarbeit von Figma auch sind, das ist immer noch nur ein Teil dessen, was es zu einer so interessanten und ansprechenden Anwendung macht.

Um mehr darüber zu erfahren, warum Sie Figma einen Lauf geben sollten, lesen Sie einige unserer anderen Tutorials und Kurse:

  • Figma
    Tipps für das Figma-Ebenenbedienfeld
    Kezz Bracey
  • UI-Design
    Neuer Kurs: Einführung in Figma
    Andrew Blackman
  • Figma
    Gehen Sie in unserem neuen Figma-Kurs über die Grundlagen des UI-Designs hinaus
    Andrew Blackman
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.