Figma Sites Grundlagen 2026 in Köln

• Tag 1: Figma Sites verstehen, Editor-Grundlagen für Einsteiger, erste Site
• 1. Was Figma Sites leistet und für wen
  • Was Figma Sites tut: Designs direkt als responsive Websites veröffentlichen
  • Anwendungsbereiche: Landing Pages, Portfolios, Kampagnen-Seiten, Brand-Auftritte, Event-Seiten
  • Markt-Stand 2026: Figma Sites versus Webflow, Framer, WordPress, Wix, Squarespace
  • Grenzen: Beta-Phase mit Bandbreiten-Limit, eingeschränkte CMS-Filter, weniger Templates als Webflow
  • Was Figma Sites nicht ist: kein Webflow-Ersatz für große CMS-Plattformen, kein WordPress-Ersatz für Blog-Plattformen mit hohem Volumen
  • Lizenz-Modell: Free-Plan reicht für den Workshop, Custom Domain im Professional-Plan
  • Für wen Figma Sites die richtige Wahl ist - Entscheidungs-Hilfe

• 2. Figma-Editor für Sites-Anwender (kompakt)
  • Figma als Browser-Anwendung verstehen
  • Frames als Bau-Bausteine
  • Auto-Layout als zentrale Funktion für responsive Sites (das wichtigste Werkzeug der Schulung)
  • Komponenten und Variants für Wiederverwendbarkeit
  • Stile (Farben, Typografie) als Brand-Anker anlegen
  • Was Figma-Design-Anwender bereits können - was Einsteiger jetzt lernen
  • Verweis auf S2644 oder S5036 für tiefe Design-Schulung

• 3. Erstes Site-Projekt anlegen
  • Neues Site-Projekt erstellen
  • Editor-Oberfläche im Site-Modus
  • Pages und Navigation
  • Site-Header und Site-Footer als wiederverwendbare Bausteine
  • Seitenformat und Standard-Einstellungen
  • Preview-Modus (Shift + Space) für die Vorschau

• 4. Layout, Komponenten und Templates
  • Vorgefertigte Templates als Schnell-Start
  • Pre-built Blocks (Header, Hero, Features, Testimonials, Footer)
  • Eigene Komponenten aus Templates ableiten
  • Bilder, Videos und Assets einbinden
  • Design-Tokens für die Marken-Identität
  • Erste Site aus drei Pre-built Blocks zusammenbauen

• Praxis-Übung Tag 1: Erste Landing Page für ein erfundenes Angebot bauen
  • Ziel: Eine einfache Landing Page für ein Angebot (zum Beispiel ein Coaching, ein Produkt, eine Veranstaltung) bauen
  • Aufgaben: Neues Site-Projekt anlegen, Header und Footer als Komponenten erstellen, Hero-Bereich mit Titel und Call-to-Action gestalten, drei Inhalts-Sektionen mit Auto-Layout aufbauen, Bilder einbinden, Preview prüfen
  • Tools: Figma Sites (Open Beta) im Browser
  • Ergebnis: erste einfache Landing Page als Figma-Sites-Datei

• Tag 2: Responsive Design, Interaktionen, Code Layers, Custom Domain
• 5. Responsive Design für Mobile, Tablet, Desktop
  • Breakpoints in Figma Sites: Desktop, Tablet, Mobile
  • Welche Eigenschaften auf welchen Breakpoint
  • Auto-Layout für responsive Verhalten
  • Reflow und automatische Anpassungen
  • Preview für Breakpoint-Tests
  • Mobile-First versus Desktop-First - Entscheidungs-Hilfe

• 6. Pre-built Interactions und Animationen
  • Mouse Parallax: Elemente nach Cursor-Bewegung verschieben
  • Lightbox: Bild groß anzeigen mit abgedunkeltem Hintergrund
  • Marquee: kontinuierlich laufender Text oder Bilder
  • Scroll-basierte Animationen: Elemente beim Scrollen einblenden
  • Hover-Effekte und Mouse-Trail
  • Übergänge zwischen Pages

• 7. Code Layers für individuelle Erweiterungen
  • Was Code Layers leisten: eigene React-Komponenten mit Tailwind CSS direkt im Canvas
  • Anwendungen: Formulare, Suche, Dropdowns, API-Anbindungen, Shader, dynamische Inhalte
  • Wann Code Layers sinnvoll - wann reicht das Standard-Werkzeug
  • Sicherheits-Aspekte und Performance-Sicht
  • Vorschau und Test der Code Layers
  • Recht-Stand: externe API-Anbindung und DSGVO

• 8. Custom Domain einrichten
  • Vom Figma-Sites-URL zur eigenen Domain
  • DNS-Einstellungen für Custom Domain
  • HTTPS automatisch
  • Subdomain-Konfiguration
  • Domain-Anbieter (1&1, GoDaddy, Cloudflare)

• Praxis-Übung Tag 2: Responsive Landing Page mit Interaktionen erweitern
  • Ziel: Die Landing Page aus Tag 1 für Mobile und Tablet anpassen und mit Interaktionen erweitern
  • Aufgaben: Mobile- und Tablet-Breakpoints konfigurieren, Auto-Layout für responsive Verhalten anpassen, Mouse Parallax im Hero-Bereich einbauen, eine Marquee-Leiste für Kunden-Logos einbauen, optional eine Code Layer mit einem einfachen Formular einbauen (Name, E-Mail), Preview für alle drei Breakpoints prüfen
  • Tools: Figma Sites mit Code Layers
  • Ergebnis: vollständig responsive Landing Page mit drei Interaktionen

• Tag 3: CMS, Veröffentlichung, SEO, Wettbewerb und KI-Schwester-Tools
• 9. CMS in Figma Sites
  • CMS Collections: strukturierte Inhalts-Sammlung (Blog-Beiträge, Case Studies, Produkte)
  • CMS Pages: dynamische URLs für jeden Eintrag
  • CMS Lists: wiederkehrende Inhalts-Blöcke (Übersichts-Seiten)
  • Pre-built CMS Blocks als Einstieg
  • Felder und Datentypen (Text, Bild, Link, Datum)
  • Anwendungs-Beispiele: Blog, Portfolio, Case Studies, Produkt-Listen

• 10. Dynamische Inhalte aufbauen
  • Beispiel: Blog-Sektion mit Übersichts-Seite und Detail-Seiten
  • Beispiel: Portfolio mit Projekt-Einträgen
  • Beispiel: Shop-Sektion mit Produkt-Listen
  • Filter und Sortierung in CMS Lists
  • Beziehungen zwischen Collections
  • Bestand-Inhalte und Grenzen der Beta

• 11. Veröffentlichung und Hosting
  • Publish-Button und Veröffentlichungs-Ablauf
  • Generierte URL versus Custom Domain
  • HTML- und CSS-Generierung verstehen
  • Versions-Verwaltung und Rollback
  • Mannschafts-Arbeit für mehrere Editor-Personen
  • Performance-Sicht und Caching

• 12. SEO-Grundlagen in Figma Sites
  • Meta-Angaben (Title, Description) pro Page
  • Open Graph für Social-Media-Vorschauen
  • Bild-Optimierung und Alt-Text
  • Grenzen gegenüber Webflow und WordPress
  • Wann SEO mit Figma Sites reicht, wann nicht
  • Strategie-Sicht: Figma Sites für Marketing-Landing-Pages, nicht für SEO-Profi-Plattformen

• 13. Grenzen, Wettbewerb und Ausblick auf KI-Schwester-Tools
  • Grenzen der Open Beta 2026: Bandbreite, Templates, CMS-Filter
  • Wettbewerb 2026: Webflow (stärker bei CMS und SEO), Framer (stärker bei Animation), WordPress (stärker bei Content-Volumen), Wix und Squarespace (einfacher für Einsteiger)
  • Figma Make als KI-Tool für Prototypen-Generierung (separater GFU-Workshop S2906)
  • Figma Weave als KI-Tool für Bild, Video und Motion Design
  • Wann Figma Sites die richtige Wahl ist - wann nicht
  • Roadmap-Ausblick: vollständige Canvas-Integration für späteres 2026

• Praxis-Übung Tag 3: CMS-getriebene Site mit veröffentlichter Custom Domain
  • Ziel: Die Landing Page aus Tag 1 und 2 um eine CMS-getriebene Blog- oder Portfolio-Sektion erweitern und veröffentlichen
  • Aufgaben: CMS Collection für Blog-Beiträge oder Portfolio-Einträge anlegen, drei bis fünf Beispiel-Einträge erstellen, CMS List auf der Übersichts-Seite einbauen, CMS Page für die Detail-Ansicht aufbauen, Meta-Angaben für SEO ergänzen, Custom Domain einrichten oder Test-URL verwenden, Site veröffentlichen, im Browser prüfen
  • Tools: Figma Sites mit CMS, Custom Domain optional
  • Ergebnis: veröffentlichte Site mit CMS-Inhalten und Custom Domain oder Test-URL

LernzieleJede teilnehmende Person verlässt das Seminar mit einer ersten Landing Page aus Praxis-Übung Tag 1, einer responsive Landing Page mit Pre-built Interactions und Code Layer aus Praxis-Übung Tag 2, einer veröffentlichten CMS-getriebenen Site mit Custom Domain oder Test-URL aus Praxis-Übung Tag 3, einem fundierten Verständnis der Figma-Sites-Plattform 2026, einer praktischen Sicht auf Responsive Design und Pre-built Interactions, einer ersten Berührung mit Code Layers, einer Vorschau auf die KI-Schwester-Tools (Figma Make und Figma Weave) und einer klaren Markt-Sicht zum Wettbewerb mit Webflow, Framer und WordPress.Zielgruppen

• Marketing-Verantwortliche und Werbe-Schaffende: Die schnell Landing Pages und Kampagnen-Seiten brauchen.
• Solo-Selbständige und Kleinunternehmer: Die eigene Portfolio- oder Visitenkarten-Site veröffentlichen.
• Freiberufliche Designer und kleine Studios: Die ohne externe Entwickler-Anbindung eigene Sites bauen wollen.
• UX- und UI-Designer mit Wunsch nach eigener Web-Veröffentlichung: Die ihre Figma-Designs direkt umsetzen wollen.
• Quereinsteiger ohne Web-Bestand: Die eine erste Website mit modernen Werkzeugen bauen.

Voraussetzungen: Grundlegende Computer-Erfahrung und sicherer Umgang mit dem Browser. Erste Berührung mit Figma hilfreich, aber nicht zwingend - die wichtigsten Editor-Grundlagen (Frames, Auto-Layout, Komponenten) werden im Workshop kompakt vermittelt, soweit sie für Figma Sites benötigt werden. Wer bereits Figma Design produktiv nutzt (etwa nach den GFU-Workshops S2644 oder S5036), startet schneller und kann eigene Designs in Figma Sites überführen. Erste Berührung mit Web-Technologien (HTML- und CSS-Grundwissen) optional, nicht zwingend. Eigene Site-Idee als Diskussions-Gegenstand willkommen.