Figma unterstützt Entwickler*innen jetzt mit Dev Mode
Wie kann ein Design-Tool Entwickler*innen besser in ihrem Arbeitsalltag unterstützen? Diese Frage haben wir uns und unserer Community immer wieder gestellt. Und heute freuen wir uns, dir Dev Mode vorstellen zu können. Dieser neue Arbeitsbereich in Figma bietet Entwickler*innen endlich das, was sie brauchen, wann sie es brauchen – und in Verbindung mit den Tools, die sie täglich nutzen.
Figma unterstützt Entwickler*innen jetzt mit Dev Mode teilen
Figma war von Anfang an eine Online-Plattform. Ein unkonventioneller Beginn für ein Design-Tool, aber einer, den wir im Produktdesign als dringend notwendig sahen. Mit nur einem Link konnten Designer*innen gemeinsam an Projekten arbeiten und erste Ideen austauschen, statt ihre Designs so lange im Alleingang zu bearbeiten, bis sie „fertig“ waren. Als immer mehr Designer*innen Figma und die damit verbundene Multiplayer-Arbeitsweise verwendeten, weitete sich die Nutzung automatisch auf unterschiedliche Teams und Disziplinen aus… insbesondere auf Entwickler*innen.
Inzwischen haben mehr Entwickler*innen als Designer*innen kostenpflichtige Figma-Abos. Das zeigt uns, wie wichtig es ist, ihre Wünsche und Herausforderungen zu verstehen. Wir wollen Figma zu einer Plattform machen, die die gesamte Produktentwicklung effektiver, teamorientierter und kreativer gestaltet.
Entwickler*innen haben ihre ganz eigenen Arbeitsabläufe und Präferenzen. Front-End-Entwickler*innen arbeiten mit ausgereiften Design-Systemen, Design-System-Ingenieur*innen erstellen Komponenten und andere Entwickler*innen entwickeln in Kooperation mit Markendesigner*innen Content-Layouts und exportieren Assets. Und alle von ihnen wollen dabei so reibungslos wie möglich arbeiten.
Mit Dev Mode können wir Entwickler*innen jetzt zügig und effektiv ihren Bedürfnissen entsprechend unterstützen. Genauso haben wir es zuvor bei den Designer*innen gehandhabt. Je leichter es für Teams wird, qualitativ hochwertige Designs zu erstellen, zu dokumentieren, zu finden und umzusetzen – ohne dabei den Überblick über Aufgaben und Teamkolleg*innen zu verlieren – desto besser werden die Ergebnisse. Wir freuen uns deshalb sehr, diesen ersten Schritt in Richtung Verknüpfung von Design und Entwicklung in Figma zu machen. Und wir sind gespannt, was die Teams daraus machen werden.
Du kannst schneller mit dem Programmieren anfangen
Der Figma-Canvas eignet sich super zur freien Designexploration. Sie kann allerdings insbesondere dann verwirrend sein, wenn du in eine Designdatei hineingeworfen wirst und nirgendwo die für die Implementierung benötigten Informationen finden kannst. Dev Mode ist wie ein Browser-Inspektor für deine Design-Datei und bringt Designkonzepte – Formen, Ebenen und Gruppen – näher an Entwicklerkonzepte wie Code, Icons und Tokens. Durch das Überfahren und Klicken auf dem Figma Canvas kannst du alle benötigten Informationen wie Maße, Spezifikationen und Assets finden und exportieren. Und du bekommst zusätzlichen Kontext zum Design-System. Ähnlich wie die Chrome Dev Tools ist Dev Mode von anderen Entwicklungstools inspiriert, um eine dir sofort vertraute Umgebung zu schaffen.
Code ist im Dev Mode vollständig neu designt und für jede Sprache anpassbar, in der du arbeiten willst. Wir wissen dabei, dass der Code nicht sofort brauchbar ist. Vielmehr soll er ein Sprungbrett sein, damit du nicht jedes Mal von Null anfangen musst. Du wirst nun ein CSS-Box-Modell sehen, eine moderne Syntax mit einer Strukturansicht, und du kannst zwischen Maßeinheiten umschalten, um sie an deine Codebasis anzupassen.
Alles, was du brauchst, an einem Ort
Mit dem GitHub-Plugin kannst du Dateien, Issues und Pull-Anfragen mit Figma-Komponenten und -Designs verlinken, sodass du immer all den Kontext, den du brauchst, an einem Ort hast.
Die Produktentwicklung erfordert eine robuste Toolchain, aber der Sprung zwischen Designbibliotheken, Codebasis und anderen Projektmanagement-Tools kann Ineffizienzen schaffen. Insbesondere wenn Komponenten und Stilnamen nicht mit dem übereinstimmen, was im Code steht, oder das Team Aufgaben nicht nachverfolgt und dokumentiert. Dev Mode fördert deine Produktivität, indem er die von dir genutzten Tools mit Codekomponenten mit der Design-Datei verbindet.
Mit Plugins kannst du die Funktionen von Figma erweitern und auf die individuelle Arbeitsweise deines Teams zuschneiden. Mit Jira, Linear und GitHub kannst du das Projektmanagement effizient gestalten, sodass du und deine Designer*innen immer auf dem aktuellen Stand eurer jeweiligen Prozesse seid. Mit Storybook behältst du den Überblick über die Vorgänge in deinem Code im Kontext des Designs. Darüber hinaus helfen dir Codegen-Plugins von AWS Amplify Studio, Google Relay und Anima dabei, die Codeausgabe an deine speziellen Bedürfnisse anzupassen. Du hast sogar die Möglichkeit, basierend auf deinem einzigartigen Arbeitsablauf dein eigenes Plugin zu erstellen.
Es ist sehr nützlich, Plugins zu haben, die sich mit unseren täglichen Tools verbinden. Wir verwenden GitHub, wir verwenden Storybook – das spart mir viel Zeit.
Design-Systeme gewinnen an Leistungsfähigkeit durch die Einführung von Design-Token, die mittels Variablen implementiert werden. Diese Token sind kleine UI-Informationspakete, die sowohl im Design als auch im Code Anwendung finden. Sie sind nun direkt im Dev Mode sichtbar und zeigen dir, was zum Beginn der Entwicklung benötigt wird. Zudem kannst du direkt auf der Arbeitsfläche in Verbindung stehende Links zu Objekten hinzuzufügen und so einfach auf Dokumentationen zugreifen oder Inhalte deiner Plugins prüfen.
Du siehst, welche Designs bereit für die Entwicklung sind
Auch wenn die Design- und Entwicklungsphasen des Produktentwicklungsprozesses ineinander übergehen, bleiben die Artefakte aus beiden in Designdateien und Code getrennt. Bisher war es durchaus herausfordernd, Designdateien zu navigieren, spezifische Komponenten und ihre Eigenschaften auszuwählen, oder nachzuvollziehen, was sich seit deinem letzten Blick auf eine Designdatei eigentlich verändert hat. Jetzt können Designer*innen einfach einen Abschnitt als „bereit für die Entwicklung“ kennzeichnen und ihn dir schicken, ohne eine separate Seite oder Datei erstellen zu müssen. Mit der Unterstützung für Diff kannst du Änderungen zwischen verschiedenen Versionen eines Rahmens vergleichen und bleibst auf dem Laufenden.
Erweitere deinen Workflow
Mit der VS Code-Erweiterung kannst du die Leistungsfähigkeit des Dev Mode in deinen Code-Editor holen, um Designs zu prüfen, Benachrichtigungen und Kommentare zu sehen und up to date zu bleiben, ohne dein Programmierumfeld verlassen zu müssen. Die VS Code-Erweiterung vervollständigt auch Code, basierend auf dem Design, das du inspiziert hast. Dadurch kommst du noch schneller voran.
Dev Mode und Figma für VS Code sind jetzt in der Beta und für alle Benutzer*innen für den Rest von 2023 kostenlos. Ab 2024 ist Dev Mode dann nur innerhalb kostenpflichtiger Abos verfügbar. Wenn du heute Editor*in mit einem kostenpflichtigen Abo bist, ist Dev Mode inbegriffen. Wir wissen, dass einige Entwickler*innen möglicherweise nicht das gesamte Figma-Feature-Set benötigen, daher führen wir zwei neue Abo-Optionen ein. Ab 2024 kannst du nur für den Zugang zum Dev Mode zahlen. Der Preis dafür liegt bei 25 € pro Platz und Monat im Organization-Abo und 35 € pro Platz und Monat im Enterprise-Abo.
Es herrscht ein viel höheres Maß an Vertrauen, wenn die Leute dasselbe Tool verwenden – die Informationen sind viel aktueller, sie laden nicht mehr einige Dateien auf ihren Computer herunter oder jagen Dingen per E-Mail nach. Es ist ein viel kollaborativerer Prozess.
Das ist erst der Anfang unserer Mission, Figma für Entwickler*innen zu optimieren. Wir sind gespannt auf dein Feedback zur Beta von Dev Mode und VS Code und freuen uns darauf, die Funktionalität basierend auf deinen Rückmeldungen auszuweiten. Dies umfasst mehr Optionen zur Verbesserung der Zusammenarbeit zwischen Designer*innen und Entwickler*innen, zur detaillierteren Erfassung von Spezifikationen und zur engeren Verknüpfung von Design und Code.
