Customising Dawn theme: What’s the better approach to take my Figma designs to my store?

Store Design
, , , , ,
1

Hey all, I’ve been playing about in Figma as a quicker way to play with spacing, colours and the order of sections on my store.

However, I’m now getting to the point where I want to apply these style changes to my store. I’m good with CSS, liquid and JSON, and have done a lot of customisations on my store over the years, but I’ve never really thought about the rules for the design until recently and I’ve started to notice little inconsistencies in my store, with spacing and things like that and now I’ve seen them I cannot unsee them.

I want to really make sure that the brand, store patterns, and sections are consistent, but unsure where to apply these changes. Is there somewhere at a global level I can make these changes so stylistically it’ll ripple across all elements, or it is a case of editing each templace json file for each section in the code editor? Can I use the css editor in the theme WYSIWYG editor?

I would appreciate any help or tips from those who have done similar.

Thanks,

Rosalind.

2

Great to hear you’re diving into making your store’s design consistent! Ensuring a cohesive look can really elevate the user experience. Here’s how you can approach it:

1. Set Up a Global Style Framework

To maintain consistency across your store, you’ll want to use global styles wherever possible. Most themes and platforms support this through CSS and theme settings.

Using CSS- Define Global Variables: Use CSS custom properties (–variable-name) for colors, spacing, and typography. For example:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-family: 'Roboto', sans-serif;
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 32px;
}

This lets you adjust these variables in one place, and the changes will propagate across your styles.

  • Reset and Normalize Styles: Start with a CSS reset or normalize file to ensure consistent base styling.

  • Apply Variables to Elements: Use the variables throughout your CSS files for consistency.

    h1 {
    font-family: var(--font-family);
    margin-bottom: var(--spacing-medium);
    color: var(--primary-color);
}

Theme Editor (WYSIWYG)- Many platforms like Shopify allow you to set global styles (colors, fonts, etc.) through their theme settings. While these are not as flexible as CSS, they can save you time.

  • Check the theme documentation to see if it supports global changes via the editor.

2. Work with Liquid and JSON Files

If your platform uses templates (like Shopify’s Liquid), here’s what you can do:

  • Create Global Snippets: Use a style.liquid file to house your global CSS variables and rules. Then, include this file in your layout or head tag:

    <style>
    {% include 'style.liquid' %}
</style>

  • Centralize JSON Settings: If sections have similar settings (like padding or colors), ensure those settings are shared in the settings_data.json or similar global configuration file. This reduces redundancy.

3. Audit and Organize Your Code- Audit for Inconsistencies: Go through your templates and CSS to find inconsistencies. Tools like browser developer tools can help you inspect elements and see the exact spacing, fonts, or colors being applied.

  • Use Consistent Naming: Name your classes and IDs descriptively and systematically (.btn-primary, .section-padding-medium).

4. Tools for Streamlining- Figma to CSS Export: Figma has plugins that can generate CSS from your designs. Use them to quickly translate your Figma adjustments into CSS.

  • CSS Frameworks: Consider integrating a CSS framework like Tailwind or Bootstrap to enforce consistent design patterns.

5. Tips for Applying Changes Safely- Preview First: Make changes in a development environment before applying them to your live store.

  • Document Your System: Create a design guide or system that documents your spacing, colors, and patterns. This will serve as a reference for future updates.

By focusing on global styles and systematically organizing your code, you can ensure your store remains consistent and easy to maintain. Happy Coding

Thanks

Vitix Dev Team