FREE Figma Web Style Guide and Starter Templates

Get my Free Figma Template + Learn how to use AI for design inspiration  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ [Logo]() ​[FREE Figma Web Style Guide and Starter Templates]()​ In today’s newsletter, I’m thrilled to share something special with you: my free web style guide for Figma. It's a simplified version of the design system we use over at [DesignKit.us](=). ​ Think of this file as your design springboard. You can use it as a starting point for your own creations. Adjust the colors, play around with typography, add more UI elements, or expand the color palette to suit your needs. It's designed to be flexible and adaptable to your unique style. [Get Your Free Figma Template](=) Why Use a Web Style Guide? Let’s talk about why a web style guide is essential for any design project: - Reference for Developers: It acts as a fantastic reference point for developers, making the handoff smoother and clearer. - Coding Mindset: It encourages you to think more like a coder - the site is built on a stylesheet, where every text and color is linked to a specific style. - Unified Design: Following your style guide ensures that your design feels unified and cohesive. - UI Element States: It’s a great way to list all different states of UI elements for quick reference. - Experimentation: Test different color schemes and typography quickly and see what works best with the preview feature. How It Works Check out this quick video tutorial on how to edit the file and adjust your text and color styles. It’s super simple and I walk you through each step. What’s Next Once you get the hang of it, use this free web style guide to customize and adapt it to your own projects. And if you find yourself needing a more comprehensive web design system, don’t forget to visit [DesignKit.us](). It’s packed with resources to speed up your entire web design process. ​ --------------------------------------------------------------- Tip of the week ​[Use AI for Design Inspiration](=)​ In the ever-evolving world of design, staying fresh and innovative can sometimes be a challenge. That’s where AI comes in as a fantastic source of quick inspiration. This week, I want to share how AI can be a game-changer in sparking new ideas for your designs. I’ve experimented with various AI models, and I highly recommend MidJourney ([midjourney.com](=)). From my experience, it stands out in terms of accuracy and the quality of inspiration it offers. When you use MidJourney, be clear about what you’re looking for. Specify the color scheme, style, or any particular elements you have in mind. The more detailed your input, the better the AI can serve your needs. It’s important to remember that AI should be used primarily for inspiration. The interfaces generated by AI are fascinating, but they’re not always accurate or practical for real-world applications. So, take what the AI gives you, and then add your own designer’s touch to make it truly shine. Check out some examples here I generated here when looking for inspiration for a dark personal website design in blue and orange color scheme: ​ --------------------------------------------------------------- What got me inspired ​[Framer's 2023 Landing Page](​ ¢Â€Â‹ This week, I stumbled upon a stunning landing page that really caught my eye and I just had to share it with you. Check out the design at [Framer’s 2023 Landing Page](. Framer, known for its innovative approach to web and interactive design, is quickly gaining popularity among designers for its intuitive tools and flexibility. The page strikes a beautiful balance between aesthetic appeal and functionality, brought to life with dynamic animations and interactions that enhance the overall user experience. What ties it all together so elegantly is the clean, impactful typography, demonstrating the power of simplicity in design. --------------------------------------------------------------- Take the Next Step - ​[Share](: Enjoyed this newsletter? Pass it on to friends and peers in the design world. - ​[Design Faster and Better](: Check out my Figma toolkit for designers. It's practical and easy to use. - Get in Touch: Questions or feedback? Reply to this email—I'm here to help. Thank you for your support! [[twitter]​]([[instagram]​](=)[[youtube]​]([[dribbble]​](=) 113 Cherry St #92768, Seattle, WA 98104-2205 You're part of this community likely because you've subscribed to my newsletter, downloaded one of my free resources, or purchased a product from RafalTomal.com. My aim is to bring you tips, insights, and resources that can help you grow as a designer or design business owner. If you ever feel the content isn't serving you, you're free to [unsubscribe]( (or change your [preferences]() at any time. ​