Afterlight Theme Migrator.

01

What it is

Afterlight Theme Migrator scans your Framer project, maps your color and text styles to semantic roles, and builds a plan you review line by line. It applies only what you approve, and it saves rollback data before every change.

It is for the moment a site is finished but the look needs to change: a rebrand, a new template you like, or a dark theme. Your pages, content and CMS stay where they are. The styles and layers underneath move to the new theme.

02

Before you start

• Work on a copy. Duplicate the project, or use a site you can restore, for the first run.
• A Framer account. Open from File, which installs the plugin, may need a paid Framer plan.
• Edit access. Changing styles and layers needs Design permission in the project. The plugin tells you if something is blocked.

03

Install

1. 1
   Download plugin.zip

   You get the file after purchase. Keep it somewhere you can find it.

2. 2
   Open a copy of the site in Framer

   Use a duplicate of the project for the first run.

3. 3
   Add the plugin from the file

   Plugins icon→Add Plugin→Open from File→plugin.zip

   Open from File may need a paid Framer plan.

04

The six steps

The plugin walks you through six steps, shown across the top of its panel. You can go back at any point before you apply.

1. 01Scan
   Read the project

   Reads pages, color and text styles, components, layers, CMS collections and links, then shows the counts. Scanning is read only. It also lists the areas plugins cannot reach, like project wide variables.

2. 02Target
   Pick the new theme

   Choose a starter theme (Quiet Neutral, Midnight Mint or Warm Editorial) or import theme tokens as JSON. To match another Framer project or template, open the plugin there, scan it, use Export this project's tokens, and import the file here.

3. 03Analyze
   Map styles to roles

   Each color style is matched to a semantic role such as Background, Text primary or Accent. Roles without a style get a new one. Local analysis is the default and needs no key.

4. 04Review
   Read the plan line by line

   Every change shows its current and new value, a confidence score, and a Safe, Needs review or Unsupported badge. Approve, skip or edit each line. Use Show layers to see what a line touches.

5. 05Apply
   Change only what you approved

   Approved changes run in small batches. The previous value of every object is saved on that object first, so you can roll back even if a run is interrupted.

6. 06Verify
   Check what is left

   Re-scans the project and reports hardcoded colors left, possibly broken links, missing CMS references and pages with layout risk. Export the report as JSON or Markdown.

05

What it changes

Some things are listed for you to handle by hand: gradients are not remapped, components cannot be swapped by a plugin, and custom uploaded fonts are not available to plugins.

06

Local analysis or Gemini

Gemini is optional. The local analysis runs with no key and works offline, using deterministic rules on your device. Nothing is sent anywhere.

If you want AI help with role mapping, turn on Google Gemini in Settings and add your own free tier key from Google AI Studio. The key stays on your device and is never written into the Framer project. Project metadata, such as color style names and values and usage counts, is sent to Google only after you agree. Page text, CMS content, images, custom code, links and the project name are never sent.

07

Rollback

Before any object changes, its previous value is saved on that object. After a run, the Apply step offers Roll back migration. It restores every changed object and removes styles the migration created. Objects you edited after the migration are left alone and listed.

A few changes are only partly reversible, and the plugin asks you to confirm them first. A font can only be restored if Framer can still find it, and values on breakpoint or variant overrides come back as overrides.

08

Good practice

• Run it on a copy first. Get a feel for the plan before you touch the live project.
• Read font and breakpoint lines carefully. A new font can change line breaks and section heights on Tablet and Phone.
• Approve size and spacing on purpose. They are never pre approved, because small changes can shift layouts.
• Use Show layers. It selects the layers a line touches, so you can check them on the canvas.
• Finish with Verify. Fix what it lists, then publish.

09

License

Use it on as many personal and client Framer projects as you like. Do not resell or redistribute the plugin as your own product.