How to migrate from Framer to WordPress

Open /sitemap.xml on your domain. Framer generates that file for every published site and keeps it up to date as you publish. Copy every address into a spreadsheet with a column beside it for the new address.

Framer's help does not say whether a page with "Search engines" turned off in its Page Settings is left out of the sitemap, so compare the list with the Pages panel. Mark each address as a web page or a CMS page. If the site has more than one locale, list each locale's addresses too: with "Translate Page Paths" on, a page has a different path in each language.

Open the project in Framer and open the Quick Actions menu with ⌘ K or Ctrl K. Search for CMS Export and open it. Framer's help says plugins "do not require installation". CMS Export is published by Framer, and its listing says it exports any CMS collection as a CSV file, with a preview before the file is made. Do this for each collection.

Then open each file and read its first rows. The top row names the columns you will map in WordPress. Look at how a rich text field, an image field and a date are written, because your import has to handle each one. Framer's developer documentation shows each CMS item with a slug and a draft flag, so check that the file tells drafts from published items.

Open the Redirect Sync plugin the same way and select "Export". Framer's help says this exports all of the project's redirects as a CSV file. If the list is empty, the site has none, and you can skip this.

Framer serves a markdown version of each published page. Add ?md to the page's address, as in https://example.com/about?md, and the browser shows the page's text as markdown in place of the page. Save it, or copy it into a document.

Framer's help gives two limits. Markdown is made only for pages Framer has optimized, and it can be unavailable when the site is being rate-limited. It also says a "## Navigation" section of links is added at the bottom of each markdown page. Leave that part out when you paste.

For one CMS item at a time there is a second route: open the item, click the three-dot icon in the top-right corner and select "Copy as Markdown".

A markdown file holds the words, not the layout. In the Framer desktop app, select a page and click "Export" in the bottom-right panel. Click the + icon, choose a size from 1x to 4x, select PNG or JPG, and click "Export". These pictures are a record of the layout to build from.

• Forms. Each form and where it sends: Framer's native forms send submissions "to email, Google Sheets, or custom webhooks". Past submissions are in that inbox or that sheet, not in a file you export from Framer.
• Custom code. Open Project Settings and the Custom Code tab. Copy each script, with where it is placed and which pages it runs on.
• Titles and descriptions. For each web page, the Title and Page Description in its Page Settings. The site-wide defaults are in Site Settings.
• Animations. Every effect a visitor would miss. A short screen recording of each is the best record.

Set WordPress up at your new host on a temporary address, not yet on your domain. Go to Settings, then Reading, and tick "Discourage search engines from indexing this site". WordPress's documentation says "it is up to search engines to honor your request", so add a password as how to set up a WordPress staging site describes.

Then go to Settings, then Permalinks. A new site starts on "Plain", with addresses like /?p=123. Choose "Post name", or enter a "Custom Structure". The section on addresses below says which.

WordPress keeps content in post types. Posts and pages are built in.

• A blog collection becomes posts.
• A collection of another kind, such as case studies or team members, becomes a custom post type. WordPress's documentation recommends defining one in a plugin, not in the theme, so that the content is not lost when the theme changes.
• A collection used only to group others, such as categories or authors, becomes categories or tags.

WordPress has no CSV importer of its own. There are three routes.

• By hand. For a few dozen items, make each post, paste the text, and set its slug and date to match the CSV.
• An import plugin. WordPress's documentation on importing says the WP All Import plugin "can import any XML or CSV file". Other plugins do the same job. Check what one imports before you rely on it.
• A script. A developer can read the CSV and create each post. This suits large collections and fields that refer to each other.

Whichever you choose, keep each item's slug, and import a few rows first.

Framer hosts your images itself. Its help lists the domains its service uses, among them framerusercontent.com and framercdn.com, and says they are used for hosting assets, among other things. Right-click an image on your live site and copy its address. If the host name is one of Framer's, the file lives with Framer, and the new site must not go on loading it from there.

Use the files you uploaded where you have them. Framer says it makes resized copies of every uploaded image, the largest no more than 4096 pixels on its longer side, and converts most of them to AVIF. A file saved from the live page may be one of those copies and not the file you uploaded.

Add each image to the WordPress Media Library and point the post at the new copy. By hand: upload the image and replace it in the post. With WP-CLI, one command takes a file on the server or an address, adds it to the Media Library and makes it a post's featured image. Use your own file or address and the post's ID in place of 123:

Leave off --featured_image to attach the image without featuring it. Add --alt="..." to set its alt text, which in Framer was entered on each image.

Each web page is made again as a WordPress page. Paste its text from the markdown you saved, give the page the slug it had on Framer, and lay it out with blocks, working from the pictures.

The header, the footer and the layout that every post shares belong to the theme. With a block theme, they are edited in the Site Editor, under Appearance, then Editor. A Framer CMS page is one template that shows every item in its collection. Its WordPress counterpart is the theme's template for that post type.

Framer's help says its animations are powered by Motion, an animation library that runs on JavaScript and React, and are made in Framer without code. Its help describes no export for them. Go through your list and mark each one: made again in the new theme by a developer, replaced by something simpler, or left out. Do not plan on the result matching the original exactly.

Rebuild each form with a form plugin. Send a test entry through each one and see that the mail arrives. Add each script from your Custom Code list again.

Enter each web page's title and description again. For CMS pages, Framer fills both from CMS fields with variables such as {{Title}}, so the words are in your CSV, in whichever columns the page settings used. WordPress's documentation of a page's settings lists a featured image, an excerpt and a slug among others, and no field for a search description. That is entered in an SEO plugin, so map those columns there.

Change the site's address from the temporary one to your domain. How to change your WordPress URL covers the steps.

To connect a domain, Framer has you create two A records for the root, with the values 31.43.160.6 and 31.43.161.6, and a CNAME record for www with the value sites.framer.app. Replace those with the records your new host gives you. Framer says DNS changes "may take up to 48 hours to propagate worldwide", though usually less.

Untick "Discourage search engines from indexing this site" under Settings, then Reading, and take the password off. Send each form again. Run your old addresses through the redirect checker, which shows each hop and its status code. Each should reach its new page in one hop, with a 301.

Do not cancel or delete before the checks pass. Framer's help says that after you cancel a site plan, its benefits stay active until the end of the current billing cycle. It does not say what a connected domain shows after that, which is one more reason to change the DNS first.

A published Framer site also has a base domain that Framer generates, and by default it shows the latest published version. So the old site can still be opened there to copy from, for as long as it stays published.

Deleting is different. Framer says a deleted project's site is unpublished and the project "cannot be recovered". Delete nothing until you are sure you need no more from it.