--- title: "At last! The CLEAN Pro Figma file is here." description: "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." type: article version: 1 version_id: "16cf5b3f-742e-4bf8-b513-0e3a61dd9213" generated_at: "2026-04-23T20:50:59.343Z" author: "Kevin Fremon" date_published: "2023-04-05" language: en reading_time: "4 min" word_count: 604 url: "https://blog.helpfulhero.com/at-last-the-clean-pro-figma-file-is-here" --- # At last! The CLEAN Pro Figma file is here. > 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. ## 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](https://blog.helpfulhero.com/author/kevin-fremon) : April 5, 2023 [design](https://blog.helpfulhero.com/tag/design) [UX](https://blog.helpfulhero.com/tag/ux) [figma](https://blog.helpfulhero.com/tag/figma) **Table of Contents** Heading Heading 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. [](https://cta-redirect.hubspot.com/cta/redirect/5816394/715a75cf-3063-40b0-a2d2-f7753ce29583) ### 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.  [](https://blog.helpfulhero.com/6-landing-page-design-trends-that-will-crush-it-in-2020-hubspot-hero) #### [10 Best Landing Page Design Trends that will Crush it in 2023](https://blog.helpfulhero.com/6-landing-page-design-trends-that-will-crush-it-in-2020-hubspot-hero) [Kevin Fremon](https://blog.helpfulhero.com/author/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](https://blog.helpfulhero.com/tag/design) [marketing](https://blog.helpfulhero.com/tag/marketing) [UX](https://blog.helpfulhero.com/tag/ux) [landing pages](https://blog.helpfulhero.com/tag/landing-pages) [Read More](https://blog.helpfulhero.com/6-landing-page-design-trends-that-will-crush-it-in-2020-hubspot-hero) [](https://blog.helpfulhero.com/5-things-to-ask-before-creating-your-website) #### [5 Things to Ask Before Creating Your Website](https://blog.helpfulhero.com/5-things-to-ask-before-creating-your-website) [Miriam-Rose LeDuc](https://blog.helpfulhero.com/author/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](https://blog.helpfulhero.com/tag/design) [marketing](https://blog.helpfulhero.com/tag/marketing) [UX](https://blog.helpfulhero.com/tag/ux) [branding](https://blog.helpfulhero.com/tag/branding) [web design](https://blog.helpfulhero.com/tag/web-design) [Read More](https://blog.helpfulhero.com/5-things-to-ask-before-creating-your-website) [](https://blog.helpfulhero.com/which-is-right-for-you-hubspot-vs.-wordpress-vs.-squarespace) #### [Which is right for you? HubSpot vs. WordPress vs. Squarespace.](https://blog.helpfulhero.com/which-is-right-for-you-hubspot-vs.-wordpress-vs.-squarespace) [Miriam-Rose LeDuc](https://blog.helpfulhero.com/author/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](https://blog.helpfulhero.com/tag/design) [marketing](https://blog.helpfulhero.com/tag/marketing) [UX](https://blog.helpfulhero.com/tag/ux) [optimization](https://blog.helpfulhero.com/tag/optimization) [CMS](https://blog.helpfulhero.com/tag/cms) [Read More](https://blog.helpfulhero.com/which-is-right-for-you-hubspot-vs.-wordpress-vs.-squarespace) --- ## About This Content **Source:** [At last! The CLEAN Pro Figma file is here.](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.*