Video-Training: Figma – Dev Mode & Hand-Off

In diesem Figma-Training lernen Web Developer, wie der Figma Dev Mode funktioniert und wie Grafiken, Abstände und Code exportiert werden kann. Designer erfahren, wie sie den Output im Dev Mode optimieren können, indem sie die Design-Dateien entsprechend vorbereiten und organisieren.

Nach dem Kauf erhalten Sie alle Videos als MP4-Download. 

29,00 €

inkl. 19 % MwSt.

Kategorie:

Beschreibung

Figma ist das zentrale Design-Tool für digitale Produkte wie Websites, Web-Anwendungen, Apps und Shops jeglicher Größenordnung. Das Tool richtet sich zwar in erster Linie an Design-Teams, doch mit mächtigen Funktionen für Kollaboration und dem sog. Dev-Mode schlägt es die Brücke zwischen Design, Development und Projektmanagement. Und Figma hat die Entwickler-Zielgruppe klar erkannt und baut den DevMode daher immer weiter aus.

Schade nur, dass viele Dev-Teams die Entwickler-Funktionen von Figma nur sehr oberflächlich kennen. Und das obwohl sie selbst oder ihre Unternehmen für die Lizenzen viel Geld bezahlen. Das möchte ich mit diesem Training ändern. Ich zeige Stück für Stück wie der DevMode genutzt werden sollte, welche Features es gibt und wie die Code-Qualität positiv beeinflusst werden kann.

Auch für Designer ist das Training relevant, denn auch sie sollten wissen, welche Informationen im DevMode angezeigt werden. Neben einer systematisch aufgebauten Design-Datei, spielt das Wissen über die Funktionsweise von digitalen Produkten eine große Rolle. Neben den reinen Figma-Features erkläre ich daher auch einige grundsätzliche Dinge, die hilfreich sind um Webprojekte so zu gestalten, dass sie auch gut technisch umgesetzt werden können.

Für Projektleiter*innen, POs oder Team-Leads kann das Trainings hilfreich sein, um den DevMode besser beurteilen zu können. Anschließend kann informierter entschieden werden, ob bzw. in welcher Form der Workflow im Unternehmen verändert wird.

Probelektionen

01 / 01 Intro

04 / 01 Ready for Dev

 

01 / 07 Einheiten korrekt einstellen

02 / 07 Komponenten dokumentieren

 

Inhalte (Gesamtlaufzeit: 2h 15m)

Übersicht und Funktionen

  1. Intro (01:17)
  2. Inspect Mode vs. Dev Mode (11:25)
  3. Die Ebenenpalette (04:30)
  4. Abstände, Farben, Schriften & Co auslesen (04:58)
  5. Einheiten korrekt einstellen (04:32)
  6. Pixelgrafiken- und SVG exportieren (07:54)
  7. Komponenten identifizieren (06:35)
  8. Animationen und Flows analysieren (10:02)
  9. Die Kommentarfunktion nutzen (09:37)

Verantwortung im Design Mode

  1. Variablen verwenden (06:12)
  2. Die Syntax von Variablen beeinflussen (04:26)
  3. Variable Collections nutzen und Variablen exportieren (05:19)
  4. Der Component Playground (06:56)
  5. Auto-Layout und Flexbox (11:42)
  6. Anmerkungen und Abmessungen hinzufügen (05:35)
  7. Komponenten dokumentieren (03:22)

Den Dev Mode erweitern

  1. Code Snippet Editor (04:32)
  2. Figma for VS Code (06:51)

Der Workflow im Dev Mode

  1. Ready for Dev (02:47)
  2. Fokus View (2:42)
  3. Mark as Completed Workflow (3:24)
  4. Versionen vergleichen und Änderungen identifizieren (07:55)
  5. Branches verwenden (09:27)

Ähnliche Produkte