In last week’s live office hours, we talked about our Figma to WordPress Process.
- Figma for WordPress I’m excited to share that Figma, a robust design tool, is donating an organizational membership to the WordPress community! This is an incredibly exciting addition to the design tools we have available for building WordPress.
- 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: Start the design project by discussing all sections and content elements with the developer.
- The Figma to WordPress conversion is a smooth ride every step of the way.
Recently started using Figma and love it for making mock-ups of single pages (not talking on a scale of a whole site) I have yet to mess with the HTML and css output with figma, just simply have been using it as a visual mock-up to decide how I want the page to look. Using figma to help actually code the website sounds intriguing.
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:
- 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.
- Break your design down into repeatable sections with easy to define content elements like subtitle, title, paragraph, image, etc.
- Avoid having too many custom sections that would be expensive to code and hard to manage with the content management system.
- 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.
- Make sure all design assets like images and icons can be easily exported and are in good quality.
- 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)
- Use ACF Blocks to easily create your own custom Gutenberg blocks.
Figma To Wordpress Tutorial
Figma To Wordpress Download
Subscribe to my YouTube channel or sign up here to make sure you get a reminder of when we go live again.