In last week’s live office hours, we talked about our Figma to WordPress Process.

Here’s what we talked about:

• How we plan new projects.
• How to design so it’s easier to code.
• How to plan your page sections, colors, and typography.
• How to start your Figma design to WordPress development process.
• How to make custom content sections editable in WordPress admin.

Some key takeaways from our discussion last week:

1. Start the design project by discussing all sections and content elements with the developer. Make sure your design plan goes along with the existing content structure and WordPress possibilities.
   
2. Break your design down into repeatable sections with easy to define content elements like subtitle, title, paragraph, image, etc.
   
3. Avoid having too many custom sections that would be expensive to code and hard to manage with the content management system.
   
4. Organize your colors, typography, and UI elements into easy to use style guides (see DesignKit, my ready to use template for Figma) that have all the styles described and ready to use for developers.
   
5. Make sure all design assets like images and icons can be easily exported and are in good quality.
   
6. Use your icons as SVG or font, so you can easily control their colors, size, and even animate with CSS. (Read more: Beginner’s Guide to Creating and Animating SVGs)
   
7. Use ACF Blocks to easily create your own custom Gutenberg blocks.

Subscribe to my YouTube channel or sign up here to make sure you get a reminder of when we go live again.