Official Figma Exporter

Automate the structure. Own the logic.

The official exporter automates positioning, styling, and asset management, giving your engineers a solid code foundation to build upon.

Get the plugin

Accelerate your game UI pipeline from design to engine.

The official exporter for Coherent Gameface that bridges the gap between design and implementation by converting your Figma layouts into Gameface-optimized HTML/CSS.

🤝 The Workflow: Empower Designers, Accelerate Engineers

  • For Designers: True Independence
    Stop waiting on implementation to see your work in-game. This plugin lets you own the UI creation process end-to-end.
    Export layouts directly, preview them in the Gameface Player, and iterate on visual polish independently—dramatically reducing back-and-forth with developers and speeding up iteration cycles.
  • For Engineers: The 90/10 Advantage
    The plugin automates 90% of the repetitive structural work: Clean DOM generation Layout and positioning Baseline styling
    So you can focus on the final 10% that actually matters—connecting game logic, optimizing advanced animations, and refining architecture.

✨ Key Features

  • Frame-to-Page Export: Every Top-Level Frame is exported as an individual HTML file (HUD, Inventory, Pause Menu).
  • Smart Asset Management: Automatically rasterizes complex vectors and generates a clean folder structure for CSS and images.
  • Local Font Mapping: Detects non-Google fonts and provides a mapping interface, ensuring your in-game typography matches your design files.
  • Privacy First: Runs entirely locally within Figma. No design data is sent to the cloud.

⚠️ Technical Limitations (v1.0)

To ensure the generated code is performant and clean, we do not support every Figma feature. Please review these constraints:

Layout & Structure:

  • ✅ Supported: Auto Layout (exports as Flexbox), Frames (Absolute positioning).
  • ❌ Not Supported: Figma Grids / CSS Grid layouts (please use Auto Layout).

Styling:

  • ✅ Supported: Solid color fills, standard linear gradients, basic drop shadows.
  • ❌ Not Supported: Complex gradient handles (angles may vary), Multiple fills with Blend Modes (will be rasterized as images).

Typography:

  • ✅ Supported: Solid text colors, Google Fonts, Custom/Local fonts.
  • ❌ Not Supported: Text strokes (outlines) with non-solid colors and different positions than outside. Gradient text fills are not currently supported as live text.

🚀 Getting Started

Get the plugin

🗣️ Support

Found a bug? Help us fix it. Report your cases to: frontend@coherent-labs.com