Figma to WordPress: prepare your design for an editable website

Start with a design link or exported page images

A Figma file link provides the design and its layers. A PNG or JPG export shows the appearance of a page but does not describe which items should repeat or what a button should do. Either can be a starting point; include a short explanation of the pages and features you need.

Figma lets you export frames, layers and other selected content. If you cannot share the design file, page images can be useful for preparing a conversion request. Check that you have permission to use the design, fonts and images before sending them.

Reference: Figma: exporting static designs

Make the page designs easy to identify

For a whole-file conversion, put the page designs on the first page of your Figma file and name them clearly, such as Home, About and Contact. Remove unrelated explorations from the copy you share. Keep the original design file as your backup.

AnythingTo currently uses up to 12 suitable frames, favouring desktop designs at least 900 pixels wide. Include a list of the pages you expect so you can compare it with the result. For a larger design file, discuss the required pages before treating a sample as the complete website.

• Choose the final version of each page.
• Name pages after their purpose rather than the design revision.
• Use the words and images you want on the real site.
• Explain which page should be the homepage.
• Note any additional pages or content that are not pictured.

Share only the design you mean to share

Use Figma’s Share settings to review who can open the file and copy the intended link. A link to a design file and a link intended only for presenting a prototype can offer different access. Check that the version you provide includes the page designs needed for the conversion.

Do not make confidential work public just to send a request. If direct link access is unavailable, or the design needs to remain private, provide permitted image exports and describe the requirements instead. Keep customer records, account credentials and private notes out of those exports.

Reference: Figma: sharing files and prototypes

Decide what your team should be able to update

List the changes the site owner will make after launch. A portfolio might need new projects and images; a service business may update prices, staff and contact details. These everyday edits should guide your review of the WordPress result.

Try changing a heading, replacing an image and adding a repeated item. Make sure the page remains readable with longer text or a different image shape. The WordPress editor will not be the Figma canvas, and larger design changes may still need design help.

Check the website on a phone

A desktop design does not settle every mobile decision. Review the preview at a narrow width, including navigation, headings, side-by-side sections and long buttons. Check that images are cropped sensibly and no important content is hidden.

If you have mobile designs, explain which choices matter, such as a different menu or the order of sections. AnythingTo’s current conversion works out the responsive layout from the selected designs; do not assume every separate mobile frame is used. Check the result rather than relying on the desktop preview alone.

Turn pictured features into working visitor journeys

A button in a design may only show an intended action. Supply the destination or explain what should happen. Prototype connections and smart animations do not automatically become working website features.

For a contact form, identify where enquiries should go and test a real submission before launch. For booking, payments, member areas or search, plan the service and test the complete flow separately. Describe these requirements when requesting the conversion so they are not mistaken for decorative elements.

Prepare page titles, content and launch checks

A new design may not include the page titles and descriptions people see in search results. Prepare a clear title and short description for each important page. Write useful image descriptions and check that menus and links use the page addresses you intend to publish.

Before connecting your domain, review the design, try common edits and test the essential visitor journeys. If the design replaces an existing website, compare old and new page addresses and arrange redirects for pages that move. Use the migration SEO checklist to plan that part of the launch.

Describe your Figma website project

Share the permitted design link or page images, the number of pages and the features you need. Tell us what the site owner should be able to update, and point out any mobile requirements or interactions that matter.

AnythingTo is in beta. New visitors can describe their project and leave an email for follow-up. Existing account holders can sign in to convert. If opening a Figma link is unavailable, use the page-image option instead and review the resulting preview carefully.