============================================================ TITLE: At last! The CLEAN Pro Figma file is here. TYPE: article VERSION: 1 VERSION_ID: 16cf5b3f-742e-4bf8-b513-0e3a61dd9213 GENERATED_AT: 2026-04-23T20:50:59.343Z SUMMARY: I'm excited to release version 1.0 of the CLEAN Pro Figma file. You've been wanting a way to design prior to jumping into the HubSpot CMS. Now you can. AUTHOR: Kevin Fremon DATE PUBLISHED: April 5, 2023 READING TIME: 4 min WORD COUNT: 604 SOURCE URL: https://blog.helpfulhero.com/at-last-the-clean-pro-figma-file-is-here ============================================================ KEY TAKEAWAYS: * What to expect. * The basics. * Adding components (modules) to your layout. * Adjusting the column structure * Have feedback? 1 min read # At last! The CLEAN Pro Figma file is here. Kevin Fremon : April 5, 2023 design UX figma Table of Contents To all my fellow designers out there, this one is for you. Today, I'm excited to announce the release of version 1.0 of the CLEAN Pro Figma file. You've been asking for it and I'm happy to finally make it a reality in an effort to help streamline your design workflow. ### What to expect. Like my approach with CLEAN, this Figma file will be a constant work in progress with consistent version updates over time.  Version 1.0 is intended to get you movin' and groovin' in your wireframe process with a majority (not all) of the existing CLEAN modules. ### The basics. When opening the Figma file for the first time you'll see the Pages section under the Layers tab. I've done my best to make this as intuitive as possible. For the most part, you can start building layouts by clicking Start Designing Here. That will include a starter layout with the header, footer, hero banner, and magic module.  These are really just placeholders to give you a starting point. From there I would suggest that you head over to the Theme Settings (Brand style) to dial in your fonts, buttons, and colors that many of the components (modules) will use. Here you'll be able to change a variety of aspects. This is just one example. ### Adding components (modules) to your layout. There are a couple of ways to do this but the way I suggest to avoid confusion is to simply click the Assets tab in the left-side panel to see the list of custom modules included. Simply drag them into your layout. The same can be done for smaller elements like buttons, form elements, etc. ### Adjusting the column structure As you know, CLEAN modules have a lot of built-in flexibility when it comes to selecting how many columns you want as well as the column structure.  Building all these options into a Figma component is nearly impossible but there are a few options for you to use. When double-clicking on a component you'll see some options appear in the right sidebar. For example, the number of columns. Definitely explore these.  They aren't perfect but they will definitely save you some time. ### Have feedback? As I said, this is the first release of this Figma file and it's only going to get better from here on out. This is where I need your help.  If you see anything that can be improved, I would really appreciate you letting me know. Together we can make this awesome and give you yet another tool in your design arsenal. 10 Best Landing Page Design Trends that will Crush it in 2023 Kevin Fremon Updated: 11/14/22The fun of creating landing pages is that it gives us the ability to experiment with design, copy, offers, etc. in order to capture... design marketing UX landing pages Read More 5 Things to Ask Before Creating Your Website Miriam-Rose LeDuc Ready for your big and exciting new website design? Before diving into the fun of drag-and-drop editors and page layouts, make sure you’re building... design marketing UX branding web design Read More Which is right for you? HubSpot vs. WordPress vs. Squarespace. Miriam-Rose LeDuc Wondering which website platform is right for you? I’m here to help you weigh the pros and cons of a few key players: WordPress, Squarespace, and the... design marketing UX optimization CMS Read More #### 10 Best Landing Page Design Trends that will Crush it in 2023 Kevin Fremon Updated: 11/14/22The fun of creating landing pages is that it gives us the ability to experiment with design, copy, offers, etc. in order to capture... design marketing UX landing pages #### 5 Things to Ask Before Creating Your Website Miriam-Rose LeDuc Ready for your big and exciting new website design? Before diving into the fun of drag-and-drop editors and page layouts, make sure you’re building... design marketing UX branding web design #### Which is right for you? HubSpot vs. WordPress vs. Squarespace. Wondering which website platform is right for you? I’m here to help you weigh the pros and cons of a few key players: WordPress, Squarespace, and the... design marketing UX optimization CMS ------------------------------------------------------------ ABOUT THIS CONTENT ------------------------------------------------------------ Source: https://blog.helpfulhero.com/at-last-the-clean-pro-figma-file-is-here Author: Kevin Fremon Published: April 5, 2023 This content is provided for informational purposes. Please visit the original source for the most up-to-date information.