In unserem vorherigen Blogposting haben wir Dir bereits verraten, dass wir große Fans von einem funktionierenden Design-System sind. Heute möchten wir Dir Figma vorstellen, ein Programm, das wir selbst zum Erstellen unserer Design-Systeme verwenden. Figma ist in unserem Arbeitsalltag ein treuer Begleiter geworden. Wir haben es beispielsweise für die Erstellung und Planung unserer neuen Website verwendet, kreieren damit aber auch Social Media Templates, unsere Türschilder und zuletzt Plakate für unsere neu gestalteten Toiletten.

Figma – was ist das denn eigentlich?

Figma ist ein Interface Design Tool. Du kannst Dir das auch wie ein digitales Whiteboard (das sogenannte FigJam) vorstellen, mit dem Du low- und highlevel Wireframes erstellen kannst und gleichzeitig eine Prototyp-Funktion hast. Mit Figma kannst Du Deiner Kreativität freien Lauf lassen und vektorbasierte Web- und App-Designs kreieren. Figma ist eine browserbasierte Anwendung, die unabhängig von einem bestimmten Betriebssystem ist. Gleichzeitig kann Figma auch als Desktop-App verwendet werden, was besonders vorteilhaft ist, wenn ein:e Mitarbeiter:in gerade mal offline arbeiten muss.

Die verschiedenen Programme für das UI-Design im Lauf der Zeit

Vielleicht kennst Du das auch noch: Früher wurden zum Teil pixelbasierte Designs mit Adobe Photoshop, bzw. später mit dem Adobe Illustrator erstellt. Zwar gibt es auch noch das Alternativ-Programm Sketch, das sich heute in der Designer-Welt großer Beliebtheit erfreut, allerdings funktioniert Sketch nur auf dem Betriebssystem von iOs. Da viele Programmierer:innen mit Windows oder Linux arbeiten, müssen Designs, die in Sketch erstellt wurden, erst für diese Betriebssysteme passend umgewandelt werden. In der Praxis hat sich das für uns als zu umständlich erwiesen. Da das aber kein Werbetext für Figma sein soll, möchten wir Dich auf jeden Fall darauf hinweisen, dass Du neben Figma auch Adobe Xd, Framer oder Webflow zum Erstellen von Prototypen und User Interfaces verwenden kannst.

Warum wir Figma so schätzen:

Für uns ist es ein riesiger Pluspunkt, dass Figma unabhängig von Betriebssystemen funktioniert. Das ist im Arbeitsalltag auch wichtig: Unsere Designerin Mali nutzt iOs, unsere Programmierer:innen allerdings eher Windows. Dass beide problemlos und unkompliziert auf Figma zugreifen und damit arbeiten können, ist eine große Zeit- und Arbeitsersparnis. Zudem ist für Figma kein extra Download notwendig und schnell eingerichtet. Figma ist übersichtlich, intuitiv und wirklich leicht zu bedienen. Du kannst verschiedene Libraries anlegen und diese mit Deinem Team oder Deinen Kund:innen teilen und Dir steht eine große Vorauswahl an verschiedenen Plug-Ins zur Verfügung. Du kannst beispielsweise Components erstellen und sie mit der Hilfe von Plug-Ins direkt als .json-File exportieren oder aber auch in Form von “CSS-Schnipseln” darstellen lassen. Aber auch unser Workflow wird so nochmal leichter und einfacher: Denn dadurch, dass alle im Team gleichzeitig an einem Dokument arbeiten können und Figma über eine Kommentarfunktion verfügt, wird die Zusammenarbeit zwischen unseren Designer:innen und Programmierer:innen nochmal erleichtert.

Und last but not least: Wir erstellen unsere Designs inzwischen direkt in Figma, bearbeiten sie dort immer weiter und erstellen schließlich daraus einen klickbaren Prototypen.

Figma – für uns das Tool der unendlichen Möglichkeiten

Die Liste der Nutzungsmöglichkeiten von Figma ist schier endlos:

• Figma dient uns zum Beispiel nämlich auch als Präsentations-Tool. Mit Hilfe einer Prototyp-Funktion können wir unsere Slides animieren und bedienen.
• Figma kannst Du außerdem wie Dein digitales Skizzenbuch verwenden: Zum Beispiel für Deine Bullet Point-Listen, zum groben Skizzieren mit einem Brush-Tool, um Vektorillustrationen zu kreieren, um bereits fertige Stempel in Dein Design einzufügen oder um Bilder und Illustrationen durch Plug-ins wie beispielsweise Unsplash einzufügen.
• Du kannst aber auch Mockups erstellen und mit nur einem Klick diese als PDF, SVG, PNG und JPEG exportieren.
• Auch als Organisationstool eignet sich Figma: Du kannst Figma beispielsweise zur Projektübersicht, zum Brainstorming oder zur Sammlung von Kommentaren Deiner Teammitglieder verwenden.
• Mit Figma ist auch das Prototyping leicht gemacht: Damit kannst Du nämlich spielend einfach kleinere Animationen und GIFs erstellen oder auch um Visualisierungen und Infografiken zu basteln.
• Und ein ganz großes Benefit: Gemeinsam mit Deinen Teammitgliedern kannst Du über Figma Mini-Games spielen!

Figma ist für uns ein Tool, das wir ganz verschiedenen, aber in unserem Daily-Business beinahe ständig einsetzen. Darum war es uns ein Anliegen, mit Dir dieses Tool zu teilen. Welches Design-Tool benutzt Du für Deine Arbeit? Komm doch einfach mal zu uns die Tabakfabrik und lass uns gemeinsam die verschiedenen Für und Wieder der Design-Systeme diskutieren - den Kaffee sponsern wir!