Projekt im Überblick
- Problem
- Grosse Figma-Dateien (.fig) sind schwer zu teilen und zu versionieren. Der Design-Handoff zu Code ist manuell und driftet; Stakeholder brauchen treue Visuals statt nur Specs.
- Ansatz
- Light-Parse statt Voll-Render: Seiten, Nodes und Thumbnails werden in Sekunden gelesen, Seiten-Slices und SVG-Exporte entstehen on demand.
- Was gebaut wurde
- Metadata-Ingest, seitenweise Previews (Page-Slices) und SVG-Exporte als Proof of Concept. Zielbild ist ein Design-DMS: Datei als Blob speichern, Index schnell halten, der Browser lädt nur die benötigten Slices.
- Ergebnisse
- Metadata-Ingest in Sekunden: Seitenstruktur und Nodes grosser .fig-Dateien ohne teuren Full-Render. Referenz: Maintenance- und Product-Sites von Medicross (MNT).
- Status
- POC grün: Light-Parse und Sample-Slices laufen. Nächster Schritt ist ein automatisierter Code-Pfad zu pflegbaren Oberflächen, mit Human-in-the-Loop statt Blind-Export.
- Datenschutz
- Kundendetails werden nur gezeigt, soweit sie öffentlich freigegeben sind.
F
Figma → Code
Design-Pipeline
Vom grossen Designfile zur pflegbaren Web-Oberfläche — Metadata-Ingest in Sekunden, Seiten-Slices on demand. Referenz: Medicross Maintenance (MNT) und Product-Sites.
POC grünSlices & MetadataCode-Pfad
Referenzmuster mit Produkt-/Wartungs-Sites — Kundendetails nur soweit öffentlich freigegeben.
Pilot besprechen →Herausforderung & Lösungsansatz
| Herausforderung | Lösungsansatz |
|---|---|
| Grosse Figma-Dateien (.fig) sind schwer zu teilen und zu versionieren | Light-Parse: Seiten, Nodes, Thumbnails in Sekunden — ohne Voll-Render |
| Design-Handoff zu Code ist manuell und driftet | Page-level Previews, SVG-Exporte und Slice-Pipeline Richtung pflegbarer Web-UI |
| Product-/Maintenance-Sites brauchen schnelle Iterationen | Referenz Medicross Maintenance (MNT) und Product-Sites — Design → Code on demand |
| Vollständige Designfiles in der Cloud sind unhandlich | Design-DMS-Pfad: Blob speichern, Index schnell, Browser sieht nur Slices |
| Stakeholder brauchen treue Visuals, nicht nur Specs | Metadata-Ingest + visuelle Previews statt Screenshots-Chaos |
Ergebnisse & Nutzen
POC
Metadata-Ingest in Sekunden
Grosse .fig-Dateien werden leichtgewichtig gelesen — Seitenstruktur und Nodes ohne teuren Full-Render.
Visuals
Page-Slices & SVG
Seitenweise Previews und Exporte für treue Darstellung in Reviews und Code-Pipelines.
Referenz
Medicross MNT
Maintenance- und Product-Sites als greifbare Referenz für den Design→Code-Pfad.
Zielbild
Design-DMS
Blob speichern, Index schnell halten, Browser nur mit benötigten Slices belasten.
Status im Lab
Status
POC grün
Light-Parse und Sample-Slices laufen — öffentliche Demo-Slices wo freigegeben (z. B. Open Pencil / Preview-Flows).
Next
Automatisierter Code-Pfad
Von Slices zu pflegbaren Oberflächen — Human-in-the-Loop statt Blind-Export.
Kurzfassung: Figma-Dateien leichtgewichtig indexieren, Seiten-Slices und Visuals on demand, Pfad zu pflegbarem Code — demonstriert u. a. an Maintenance-/Product-Sites (Medicross MNT).
Ähnlichen Use Case?
Wir begleiten dich von der Idee über Sandbox und Launchpad bis zum produktiven Pilot — EDIH-konform und lokal.
Termin wählen →Inhalt von digihub.li · Stand 9. Oktober 2026.