Was ist Figma?
German (Deutsch) translation by Rebecca Priscilla (you can also view the original English article)
Figma ist eine Anwendung für die Gestaltung von Benutzeroberflächen, die im Browser ausgeführt wird, aber eigentlich ist es viel mehr als das. Ich würde sogar so weit gehen zu sagen, dass es wahrscheinlich die beste Anwendung für teambasierte, kollaborative Designprojekte ist. Werfen wir einen Blick darauf!
Figma gibt Ihnen alle Werkzeuge an die Hand, die Sie für die Entwurfsphase des Projekts benötigen, einschließlich Vektortools, mit denen Sie vollwertige Illustrationen erstellen können, sowie Prototyping-Funktionen und Codegenerierung für die Übergabe.
Figma läuft online
Obwohl Figma browserbasiert ist, gibt es auch Desktop-Versionen für Windows und Mac OS. Vermutlich handelt es sich dabei um Wrap-App, in denen ein Browser läuft, aber unabhängig davon, ob dies der Fall ist oder nicht, läuft Figma innerhalb dieser Anwendungen immer online.
Hinweis: Wenn Sie die Internetverbindung verlieren, können Sie weiterhin an allen Dokumenten arbeiten, die Sie bereits geöffnet haben.
Zusammenarbeit
Die Tatsache, dass Figma "immer online" ist, macht einige der größten Stärken des Tools aus. Eine dieser Stärken ist, dass Figma ein kollaboratives Design in Echtzeit ermöglicht. Sie und Ihre Teammitglieder können sich alle gleichzeitig bei einem Entwurf zugreifen und gleichzeitig Änderungen daran vornehmen. Und da diese Entwürfe alle online gespeichert werden, müssen Sie nie befürchten, dass ein Teammitglied den Anschluss an das Projekt verliert. Die neuesten Änderungen befinden sich immer direkt in der Datei, und Sie müssen sich keine Gedanken über die Übertragung von Dateien zwischen Teammitgliedern oder das Verschieben von Dateien zu und von einer Speicherplattform eines Drittanbieters machen.
Das bedeutet auch, dass Sie zur gleichen Zeit wie ein Kunde in einen Entwurf einsteigen können. Selbst wenn Sie sich an einem anderen Ort als Ihr Kunde befinden, können Sie ein Meeting abhalten, bei dem Sie beide dieselbe Sache betrachten. Der Kunde kann Vorschläge machen, und Sie können sie sofort umsetzen.
Zusätzlich zu all diesen Tools für die Live-Zusammenarbeit können Sie auch Kommentare direkt auf der Leinwand hinterlassen.
Teambibliothek
Mit Figma können Sie Bibliotheken mit wiederverwendbaren Komponenten erstellen, auf die das gesamte Team Zugriff hat. Wenn eine Komponente in der zentralen Bibliothek aktualisiert wird, werden diese Änderungen in allen Entwürfen für jede übernommen.
Prototyping und Code-Ausgabe
Für das Prototyping können Sie Verbindungen und Hotspots in Ihrem Entwurf erstellen, um zu simulieren, wie ein Benutzer durch diese Schnittstelle navigieren würde. Für die Codierungsphase kann Figma SVG-Code, CSS sowie iOS- und Android-Code generieren.
Die Einzelheiten
Damit sind die Aspekte der Zusammenarbeit in Figma abgedeckt, aber der beste Teil von Figma ist eigentlich schwieriger zu bestimmen. Es ist die Summe all der kleinen Dinge, die Figma wirklich gut macht, und es gibt eine lange Liste von ihnen. Wir haben eine ganze Reihe von ihnen in einer Serie namens Figma Tipps & Tricks zusammengefasst. Es gibt zu viele, um sie hier zu erwähnen, aber einige meiner Favoriten sind:
- In Figma kann ein Knotenpunkt eines Vektors mit mehreren Segmenten versehen werden (mehr als nur die üblichen zwei). Die komplexeren Formen, die Sie damit erstellen können, werden "Vektor Networks" genannt.
- Mit Figma können Sie schnell und einfach mehrere Bilder auf einmal importieren und sie genau dort platzieren, wo Sie sie haben möchten.
- Wenn Sie ein Objekt in Figma auf der Leinwand verschieben, sehen Sie seine Höhe und Breite in den Linealen.
- Kopieren Sie den SVG-Code direkt aus einem Objekt in Figma, und umgekehrt können Sie SVG-Code aus einem Code-Editor kopieren und als Grafik in die Figma-Canvas einfügen.
Zusammengefasst: Was Figma ist
Figma ist eine browserbasierte UI- und UX-Design-Anwendung mit hervorragenden Design-, Prototyping- und Code-Generierungs-Tools. Es ist derzeit (umstrittig) das branchenweit führende Tool für das Oberflächendesign (UI-Design), mit robusten Funktionen, die Teams in jeder Phase des Designprozesses unterstützen. Sie sollten es ausprobieren!
- figma.com
- @figmadesign auf Twitter
Wenn Sie mehr erfahren möchten, schauen Sie sich die folgenden Ressourcen an:
- FigmaFigma-Tipps zu Ebenen-PanelKezz Bracey
- FigmaMehr als Grundlagen: FigmaAdi Purdila
- UI-DesignMeistverkaufte UX- und UI-Kits für Sketch, Photoshop, Illustrator, XD und FigmaIan Yates
- Wireframing20 unverzichtbare Wireframe-Vorlagen und UI-Kits für Ihre DesignbibliothekBrittany Jezouit
- FigmaEin Leitfaden für das Prototyping in FigmaAdi Purdila
- FigmaFigma für SVG-Design verwendenKezz Bracey
- FigmaDie besten kostenlosen Figma-Ressourcen: Vorlagen, Symbole, UI-Kits und mehrTomas Laurinavicius