Figma Design: https://www.figma.com/community/file/1023922334417784348/client-first-template-5

Live Site: https://finsweet5.markluigibatoctoy.com/

What I Learned

This week, I explored Finsweet’s Client-First system through Template 5 on Figma. I learned how Client-First simplifies the design-to-development workflow by focusing on clear naming conventions, organized structure, and scalable components.

The style guide within the template was especially helpful—it provided ready-to-use typography, spacing, and layout systems that made the project feel structured right from the start. I realized how much time can be saved when everything is labeled logically instead of starting from scratch or dealing with messy class names.

What I Worked On

I started by customizing Client-First Template 5 in Figma for a project. The goal was to keep everything consistent and easy to maintain:

• I organized the design into sections like headers, content blocks, and footers.
• I followed the Client-First naming system to ensure a smooth transition when moving the design into Webflow.
• I used the predefined styles for typography and spacing so the design stayed consistent across pages.

Once the design was finalized, I handed it off for Webflow development with confidence, knowing the structure would be easy to follow and scalable for future updates.

Key Takeaways

• Clarity saves time: Logical naming conventions prevent confusion later in the process.
• Design systems matter: A prebuilt system like Client-First keeps everything consistent and professional.
• Smooth handoff: When the design is organized well in Figma, the development phase becomes much faster and less error-prone.