Onboarding · Dashboard Guide

Figma Import

Take a Figma design file and turn it into a live offer theme — automatically. Paste a URL, review the colour mapping, and publish. No design tools or code required.

What Figma Import does

gamemantra reads your Figma file, extracts every colour used in the design, and automatically maps each colour to the closest offer theme token (accent, badge, background, etc.). You review the mapping, adjust anything that is off, and then choose to:

Path A — OTA Theme (instant)

Publish the mapped colours as your game's base theme. Live within 60 seconds. No app store update. All players see the new design on the next offer pop-up.

Path B — Code Push (custom layout)

Generate a complete Experience widget file from your Figma design and deploy it via LiveSync code push. The offer card layout itself changes — not just colours.

How it works — 4 steps

🔗

Connect Figma

Paste your Figma file URL. The platform calls the Figma API to read the design.

🗺️

Map tokens

Colours extracted from Figma are auto-mapped to theme tokens. Review and adjust any mismatch.

⚡

Generate code

The platform generates a complete Dart/Experience theme file with all colours as constants.

🚀

Deploy

Choose OTA (instant, colours only) or Code Push (full layout, LiveSync required).

Step-by-step walkthrough

Go to Operations → Figma Import in the sidebar.

Connect your Figma file

Paste your Figma file URL in the input field. The URL format looks like:

https://www.figma.com/file/AbCdEfGh1234/My-Game-Design

You will need to enter your Figma personal access token once. Get it from Figma → Settings → Personal access tokens → Generate new token.

🔑 Where to find your Figma token

Figma → top-left menu → Settings → scroll to Personal access tokens → click Create new token. Give it any name, copy the token (shown once only), and paste it into the gamemantra Figma import field. The token is stored in your browser session only.

Review the extracted colours

The platform reads all colour styles from the Figma file and shows them in a grid. For each colour, it suggests which theme token it maps to:

Primary / Brand colour

→accent_color

Surface / Card background

→surface_color

Background / Page fill

→background_color

CTA / Button colour

→accent_color

Click any row to change the mapping. For example, if Figma has two "primary" colours — one for buttons and one for badges — you can assign each to the correct token.

Choose corner style and background style

Figma designs often imply a style even if it is not a colour. After colour mapping, set these two style tokens manually:

corner_style — look at the card corners in your Figma design: rounded (soft), cut (beveled/angled), or sharp (zero radius)
background_style — dark, light, or glassmorphism (frosted glass blur)

Generate and deploy

Click Generate Code. The platform creates the Dart theme file with all colours embedded as constants. Then choose your deployment path:

OTA Theme (recommended first)

Publishes colours to ring r4 immediately. All players see new theme within 60 seconds. Reversible in one click.

Code Push (for layout changes)

Deploys the full Dart widget file via LiveSync. Requires LiveSync app_id configured in Settings. Takes 2-5 minutes.

Don't have a Figma design?

Use an AI tool to generate a Figma design from your game's visual language, then import it.

AI prompt for Figma generation

"Create a Figma design for a mobile game offer pop-up card for a dark fantasy RPG. Use a dark background (#1a1a2e), ember orange accent (#FF6B35), crimson badge (#8B1A1A), rounded corners (8px radius), and a glassmorphism surface overlay. The card should have a title area, 3 item icons, a price badge, and a CTA button. Export as a Figma community file."

Once you have the Figma URL, paste it into the import panel and let gamemantra extract the colours automatically.

Full colour token reference

Figma layer / style name	Maps to token	Example
Primary / Brand colour	`accent_color`	`#00D4FF`
Surface / Card background	`surface_color`	`#1a1a2e`
Background / Page fill	`background_color`	`#0f0f1a`
CTA / Button colour	`accent_color`	`#00D4FF`
Badge / Tag colour	`badge_color`	`#0055cc`
Text Primary	`text_primary`	`#ffffff`
Text Secondary / Muted	`text_secondary`	`#aaaab3`
Border / Stroke colour	`border_color`	`#46484f`

💡 AI prompt you can use

"I have a Figma design for my puzzle game. The primary colour is electric blue #00D4FF, the card background is semi-transparent dark blue, and corner radius is 24px. What gamemantra theme tokens should I set for accent_color, badge_color, background_style, corner_style, and border_radius? And should I use OTA or code push?"