Bitte wählen Sie die Bereiche, die Sie exportieren möchten:
Schulung Figma Sites Grundlagen 2026
Von der Idee zur Site: Web-Welt aus Figma ohne Code
Schulungsformen
Offene Schulung
- 3 Tage
- 5 gesicherte Termine
- Köln / Online
- 2.030,00 p. P. zzgl. MwSt.
- Dritter Mitarbeitende kostenfrei
- Learning & Networking in einem. Garantierte Durchführung ab 1 Teilnehmenden.
Inhouse-/Firmenschulung
- 3 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
Individualschulung
- 3 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Beschreibung
Die Plattform deckt elementar das gesamte Aufbau-Spektrum ab: Frames, Auto-Layout und Komponenten als Bau-Bausteine, Breakpoints für Desktop, Tablet und Mobile als Responsive-Logik, Pre-built Interactions wie Mouse Parallax, Lightbox und Marquee für lebendige Oberflächen, Code Layers für eigene React-Komponenten mit Tailwind CSS, ein CMS mit Collections, Lists und Pages für dynamische Inhalte wie Blog, Portfolio oder Case Studies, Custom Domain für die eigene URL und SEO-Grundlagen für die Auffindbarkeit.
Stand Juni 2026 ist Figma Sites in Open Beta - produktiv nutzbar für Marketing-Landing-Pages, Portfolio-Sites, Brand-Auftritte und Event-Seiten. Für große Content-Plattformen mit hohem Beitrags-Volumen oder anspruchsvolle SEO-Profi-Anforderungen bleiben Webflow oder WordPress die richtige Wahl; für die typische Marketing-Landing-Page der KMU-Praxis ist Figma Sites Stand 2026 oft die schnellste Variante. Der Workshop benennt die Grenzen der Beta-Phase klar.
Der Workshop ist konsequent einsteigerbetont. Drei Praxis-Übungen (eine pro Tag) sichern den Lern-Erfolg ab: eine erste Landing Page am Tag 1, eine responsive Site mit Interaktionen am Tag 2, eine CMS-getriebene Site mit veröffentlichter Custom Domain am Tag 3.
Erweitern Sie Ihr Wissen mit einer weiteren Figma Schulung.
Schulungsziel
Jede 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.
Details
Inhalt
- Ziele und Erwartungen der Teilnehmenden
- Klärung individueller Lernziele und Erwartungen für ein praxisnahes und relevantes Seminar
- 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
Zielgruppe & Vorkenntnisse
- 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.
Ihre Schulung
In Präsenz | Online |
|---|---|
| Lernmethode | |
Ausgewogene Mischung aus Theorie und Praxis | Wie auch bei unseren Präsenz-Seminaren: Ausgewogene Mischung aus Theorie und praktischen Übungen. Trainer durchgehend präsent. |
| Unterlagen | |
Seminarunterlagen oder Fachbuch zum Seminar inklusive, das man nach Rücksprache mit dem Trainer individuell auswählen kann. | Seminarunterlagen oder Fachbuch inklusive (via DHL). Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. |
| Arbeitsplatz | |
| PC/VMs für jeden Teilnehmenden Hochwertige und performante Hardware Große, höhenverstellbare Bildschirme Zugang zu Ihrem Firmennetz erlaubt |
|
| Lernumgebung | |
Neu aufgesetzte Systeme für jeden Kurs in Abstimmung mit dem Seminarleiter. | |
| Arbeitsmaterialien | |
DIN A4 Block, Notizblock, Kugelschreiber, USB-Stick, Textmarker, Post-its | |
| Teilnahmezertifikat | |
Nach Abschluss des Seminars erhalten Sie das Teilnahmezertifikat inkl. Inhaltsverzeichnis per E-Mail als PDF. | |
Organisation
In Präsenz | Online | |
|---|---|---|
| Teilnehmendenzahl | ||
min. 1, max. 8 Personen | ||
| Garantierte Durchführung | ||
Ab 1 Teilnehmenden* | ||
| Schulungszeiten | ||
| ||
| Ort der Schulung | ||
 GFU SchulungszentrumAm Grauen Stein 27 51105 Köln-Deutz oder online im Virtual Classroom oder europaweit bei Ihnen als Inhouse-Schulung Um ein optimales Raumklima zu gewährleisten, haben wir das Schulungszentrum mit 17 hochmodernen Trotec TAC V+ Luftreinigern ausgestattet. Diese innovative Filtertechnologie (H14 zertifiziert nach DIN EN1822) sorgt dafür, dass die Raumluft mehrfach pro Stunde umgewälzt wird und Schadstoffe zu 99.995% im HEPA-Filter abgeschieden und infektiöse Aerosole abgetötet werden. Zusätzlich sind alle Räume mit CO2-Ampeln ausgestattet, um jederzeit eine hervorragende Luftqualität sicherzustellen. | ||
| Räumlichkeiten | ||
Helle und modern ausgestattete Räume mit perfekter Infrastruktur | Bequem aus dem Homeoffice von überall | |
| Preisvorteil | ||
Dritter Mitarbeitende nimmt kostenfrei teil. Eventuell anfallende Prüfungskosten für den dritten Teilnehmenden werden zusätzlich berechnet - auch bei Seminaren inkl. Prüfungsgebühr. Hinweis: Um den Erfolg der Schulung zu gewährleisten, sollte auch der dritte Teilnehmende die erwarteten Vorkenntnisse mitbringen. | ||
| KOMPASS — Förderung für Solo-Selbstständige | ||
Solo-Selbstständige können für dieses Seminar eine Förderung via KOMPASS beantragen. | ||
| All-Inclusive | ||
Gebäck, Snacks und Getränke ganztägig, Mittagessen im eigenen Restaurant, täglich 6 Menüs, auch vegetarisch | Eine Auswahl unserer Frühstücks-Snacks und Nervennahrungs-Highlights senden wir Ihnen mit den Seminarunterlagen via DHL zu. | |
| Barrierefreiheit | ||
Das GFU-Schulungszentrum (Am Grauen Stein 27) ist barrierefrei | - | |
Buchen ohne Risiko
| Rechnungsstellung |
Erst nach dem erfolgreichen Seminar. Keine Vorkasse. |
| Stornierung |
Kostenfrei bis zum Vortag des Seminars |
| Vormerken statt buchen |
Sichern Sie sich unverbindlich Ihren Seminarplatz schon vor der Buchung - auch wenn Sie selbst nicht berechtigt sind zu buchen |
Kostenfreie Services
In Präsenz | Online |
|---|---|
|
|
Buchungsmöglichkeiten
Online oder in Präsenz teilnehmen
Sie können sowohl Online als auch in Präsenz am Seminar teilnehmen. Klicken Sie bei Ihrer Buchung oder Anfrage einfach die entsprechende Option an.
Gesicherte offene Termine
| Termin | Ort | Preis | ||
|---|---|---|---|---|
| 16.11.-18.11.2026 Plätze vorhanden Köln / Online 2.030,00 | Köln / Online | 2.030,00 | Buchen Vormerken | |
| 2027 | ||||
| 15.02.-17.02.2027 Plätze vorhanden Köln / Online 2.030,00 | Köln / Online | 2.030,00 | Buchen Vormerken | |
| 10.05.-12.05.2027 Plätze vorhanden Köln / Online 2.030,00 | Köln / Online | 2.030,00 | Buchen Vormerken | |
| 09.08.-11.08.2027 Plätze vorhanden Köln / Online 2.030,00 | Köln / Online | 2.030,00 | Buchen Vormerken | |
| 08.11.-10.11.2027 Plätze vorhanden Köln / Online 2.030,00 | Köln / Online | 2.030,00 | Buchen Vormerken | |
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
- Alle folgenden Schulungsformen können auch Online als Virtual Classroom durchgeführt werden.
- Eine Offene Schulung findet zu einem festgelegten Zeitpunkt im voll ausgestatteten Schulungszentrum oder Online/Remote statt. Sie treffen auf Teilnehmende anderer Unternehmen und profitieren vom direkten Wissensaustausch.
- Eine Inhouse-/Firmen-Schulung geht auf die individuellen Bedürfnisse Ihres Unternehmens ein. Sie erhalten eine kostenfreie Beratung von Ihrem Seminarleiter und können Inhalte und Dauer auf Ihren Schulungsbedarf anpassen. Inhouse-Schulungen können Europaweit durchgeführt werden.
- Bei einer Individual-Schulung erhalten Sie eine 1-zu-1 Betreuung und bestimmen Inhalt, Zeit und Lerntempo. Der Dozent passt sich Ihren Wünschen und Bedürfnissen an.
Sie können unsere Schulungen auch als Remote Schulung im Virtual Classroom anfragen.
In drei Schritten zum Online Seminar im Virtual Classroom:
- Seminar auswählen und auf "Buchen" klicken
- Wählen Sie bei "Wie möchten Sie teilnehmen?" einfach "Online" aus.
- Formular ausfüllen und über den Button "Jetzt buchen" absenden.
Unser Kundenservice meldet sich bei Ihnen mit der Buchungsbestätigung.
Unsere Online Schulungen finden im Virtual Classroom statt. Ein Virtual Classroom bündelt mehrere Werkzeuge, wie Audio-Konferenz, Text-Chat, Interaktives Whiteboard, oder Application Sharing.
Vorteile von Virtual Classroom:
- Sie erhalten 1 zu 1 die gleiche Lernumgebung, die Sie auch vor Ort bei uns vorfinden
- Die technische Vorbereitung wird von den GFU-Technikern vorgenommen
- Sie erhalten remote Zugriff auf Ihren persönlichen Schulungs-PC im GFU-Seminarraum
- Die Virtual Classroom Lösung lässt sich auch im Browser betreiben
- Die GFU-Technik leistet wie gewohnt Soforthilfe bei Problemen
- Die Schulungsunterlagen bekommen Sie via DHL zugeschickt
- Sie sparen Reisekosten und Zeit
- 16. Nov. - 18. Nov. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 15. Feb. - 17. Feb. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 10. Mai - 12. Mai ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 09. Aug. - 11. Aug. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 08. Nov. - 10. Nov. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- Auch als Inhouse-Schulung, bundesweit mit Termin nach Wunsch und individuellen Inhalten
- Buchen ohne Risiko! Kostenfreie Stornierung bis zum Vortag des Seminars
Die Seminare der GFU finden in angenehmer Atmosphäre statt und sind perfekt organisiert. Profitieren Sie von dem Rundum-Service der GFU!
Machen Sie sich keinen Kopf um die Anreise! Unser Shuttle fährt Sie. Oder Sie parken einfach auf einem extra für Sie reservierten Parkplatz.
Hotelzimmer gesucht? Wir organisieren Ihnen eins. Ihr Vorteil: Sie sparen Zeit und Geld!
Stornierung bei offenen Seminaren kostenfrei bis einen Tag vor Schulungsbeginn.
Unsere Techniker sind immer zur Stelle, egal ob online oder vor Ort.