Craftly Figma to WordPress
How to prepare a Figma file for generating a WordPress theme, what the design leaves open, and a checklist for the result.
1 Overview
A Figma file shows what a site should look like. A WordPress theme also has to know what can be edited, what repeats and what happens at widths the designer never drew. Craftly can start from a Figma design and write the PHP code of a theme from it. How close the result comes depends a good deal on the state of the file and on what you add in the conversation.
Prepare the file
Tidy the design before you hand it over. These points help a human developer in the same way.
- Use colour and text styles consistently. Ten slightly different greys in the file raise the question of which ones are meant.
- Build recurring elements such as buttons, cards and the header as components, not as copies.
- Give frames and layers meaningful names. "Frame 212" tells nobody what it is.
- Draw each page type at a phone width and a desktop width at least.
- Include the states: open mobile menu, hover, form with an error, empty search result.
- Fill the design with realistic content. A headline of three words in the design becomes one of twelve in real life.
- Remove abandoned drafts, or mark clearly which frames are valid.
Say what the design cannot show
Add this in the conversation with Craftly:
- Which parts editors change in WordPress and which are fixed.
- Which sections are lists that grow, such as articles, references or team members, and what a single entry looks like.
- Where buttons and links lead.
- What should happen between the drawn widths, for example whether three columns become two or one.
- Which page types exist beyond the drawn ones, such as the error page, search results and the legal pages.
What you receive
The result is a WordPress theme as ordinary PHP code that the owner can keep and edit. It is not a builder layout. Deviations from the design are therefore corrected in code, either through a more precise description or by a developer.
Checklist for the result
Appearance
- Put design and page side by side at the drawn widths and compare spacing, font sizes and colours.
- Drag the browser window slowly from narrow to wide. Look for the widths where something overlaps or breaks.
- Check fonts: the right family, the right weights, loaded on every page.
Behaviour with real content
- Enter long and short headlines, entries without an image, a list with one entry and one with thirty. The numbers are only an illustration; use whatever is extreme for your site.
- Open the menu on a phone and navigate with it.
- Submit each form correctly and incorrectly.
Editing
- Have an editor change text and image in every section. Anything they cannot change, although you said it should be editable, goes on the list.
- Check that editors cannot destroy the layout through normal use.
Quality behind the surface
- Operate the page with the keyboard alone, and check that images have alternative texts and that text contrast is sufficient.
- Look at image file sizes and at how quickly pages build up on a mobile connection.
- Ask a developer to read the code: is it structured so that a later change to one section stays local?
Dealing with deviations
Record each one in the same form: page, section, window width, what the design shows, what the theme does. A list in this form can be worked through, in a further conversation or by a developer. "Does not look like the design" cannot.
Also decide what is a deviation at all. A design is drawn at fixed widths, a website is fluid. Agree with the designer beforehand which differences are acceptable.
For supported Figma features, prices and delivery, see the Craftly product site.
2 Who this is for
Project manager
You get a preparation list for the design file and an acceptance checklist for the theme, so that handover between design, generation and review follows fixed points instead of impressions.
Agency owner
You can estimate where time shifts in a design-to-theme project: away from manual rebuilding, towards file preparation and structured checking, plus developer hours for the deviations that remain.
In-house developer
You see which gaps a Figma file typically leaves, from editable areas to in-between widths, and what to review in a generated theme before you take responsibility for its code.
3 Questions and answers
Does my Figma file need special preparation before Craftly can use it?
This page does not describe a required format, but a tidy file helps: consistent colour and text styles, components instead of copies, named layers, phone and desktop versions of each page type, drawn states such as the open menu, and realistic content. Remove outdated drafts. For any requirements beyond that, check the Craftly product site.
Will the generated WordPress theme look exactly like the Figma design?
Do not assume that; check it. A design is drawn at a few fixed widths, while a website has to work at every width and with content of any length. Compare both side by side, test the widths in between and record deviations by page, section and width. Those are then corrected in the code.
What can a Figma design not tell Craftly about the site?
Which content editors may change, which sections are growing lists, where links lead, how the layout behaves between the drawn widths, and which pages exist that nobody drew, such as the error page or search results. Say these things in the conversation, otherwise they have to be guessed.
5 From the blog
Try it with Craftly
Craftly generates WordPress themes and Laravel applications from a description or a design.