boconnell
on
January 6, 2024

Bricksmaven Part 2

Video Summary

Introduction

Welcome back, friends! This is Brendan, and we’re diving into the second installment of the Bricks Maven series. In this video, we’ll be focusing on the transition from Figma, a powerful design tool, to Bricks, a dynamic WordPress website builder. Before we jump into the process, I want to share a quick update regarding the Figma file availability for annual subscription holders. As of this year, the Figma file is exclusive to lifetime license holders. However, it’s undergoing rework to enhance reusability and easy editing with variables, soon to be released as a standalone product for a nominal purchase.

Setting Up the Figma File

Let’s get into the action! I’ve created a blank Figma file with sections for a homepage, secondary page, FAQ page, service single page, service archive page, and a contact page. Our goal is to efficiently organize these sections, making it easy to later style and build in Bricks.

Designing the Homepage

We start with a blank canvas and quickly add a header, footer, and a call-to-action (CTA) section above the footer. This provides the foundational structure for our homepage. Utilizing Figma components, we duplicate and modify elements to create distinct sections such as the hero, grid layout, features, pricing, testimonials, and an accordion for FAQs.

Creating Secondary Pages

Moving forward, we duplicate our homepage to create secondary pages and an FAQ page. By tweaking the header, we differentiate between a standard secondary page and an FAQ page, ensuring a consistent layout throughout the website.

Service Pages and Archives

Next on our list are service-related pages, including a service single page and a service archive page. These sections involve elements like grids, accordions, and features, each carefully crafted for a cohesive design.

Contact Page

The contact page is developed with a distinct header and a combination of sections, including contact details and FAQs. We maintain consistency by reusing components wherever applicable.

Blog Section

To wrap up our design, we add a blog section with single post and archive templates, providing a visual representation of how the content will be displayed.

Styling in Figma

In a brief overview, we explore how Figma allows for styling components, updating fonts, colors, and other design elements. Brendan demonstrates the simplicity of the styling process, including modifying buttons and creating a consistent color palette.

Conclusion

As we conclude Part 2 of the Bricks Maven series, we’ve successfully laid out the entire website structure in Figma. The next step? Stay tuned for the upcoming video, where we’ll bring this design to life in Bricks and explore the seamless integration between Figma and the WordPress website. Your journey from design to a fully functional website is about to get even more exciting. Thanks for joining, and see you in the next video!

Brendan O'Connell

Brendan is a longtime WordPress user and has built and managed hundreds of websites over the last decade.

Recent Posts

You're still here? Wow, dedication. Here are some of my latest ramblings.

I am a heading

If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.

  • This is a list item.
  • This is a list item.
  • This is a list item.

No spam, ever.