4

We're working on a multi-brand project where the site must switch between company branding.

To do this we have CSS colour variables in place switching between styles depending on what brand is using the system.

The design team have been tasked with managing this by the front-end team and applying the matching named colour styles in Figma and documenting in a system based chart.

enter image description here

This is taking up a lot of our time and resources and slowing down our design time greatly as we have to create, document and attach all these new styles with the design files as opposed to working with a set palette from each brand. Creating a lot of additional work and duplicate colours styles in our design system. So the front end can inspect and see what colour variable has been applied. Rather than a single colour.

In what team would this responsibility to document this logic normally sit? I feel when a variable is introduced this should be handled in the CSS and the logic is managed by the front-end as opposed to complicating the design files with multiple styles?

Any experience in this? Your advice is greatly appreciated.

Improve this question
6
  • 1
    I think these are called "Design System Tokens". There may be dedicated solutions for it. Never worked with them, but you may find something on google.
    – Dany Bittel
    Aug 27, 2021 at 12:31
  • Do you have to copy/paste new designs but with new pallet applied? So the dev team gets the same designs with different colors each time there is a new brand?
    – hoodybites
    Aug 27, 2021 at 13:00
  • @DanyBittel Thanks, there are some good articles. I've found off the back of that. I've heard of design tokens referring to spacing, corner radius, shadows etc. but makes sense it would include colours and how they change per brand. youtube.com/watch?v=Ka1I5TphDb0 bradfrost.com/blog/post/creating-themeable-design-systems Just need to find a way of not duplicating colour styles in Figma while being able to attribute them to different design tokens. This looks like it has potential - toolabs.com
    – heyadaho
    Aug 27, 2021 at 14:36
  • @headybits yes we would have to provide an example design with the new colours applied but also create the new colour styles in Figma so they use the same naming for the css. this produces duplicates of the same colour but allows us to document what colour changes to use when the brand switches. It's a lot of work to manage currently. Hopping to find a more efficient way of working.
    – heyadaho
    Aug 27, 2021 at 14:41
  • 1
    Some members of this site voted to close this question as 'Off-topic because it's a question about implementation'. I think this a valid question for this site, as it is about design process and collaboration with frontend development.
    – greenforest
    Sep 7, 2021 at 9:58

1 Answer 1

Reset to default
2

I assume when you say Front End you mean coding. And if so, this is clearly on the Design Team (or person) side. Color palettes (and while we are at it, accessibility for those color choices) are a designer's job. A coder/developer has to implement them, but it's not their responsibility to define them.

In a Design System team, there are many different roles and responsibilities that can sometimes be a bit diffuse, but this scenario falls squarely in the lap of the design team. The question is... do you NEED to have a design system? I invite you to read the following article from NNG's Design System 101 and include some important takes (there's an explanation for each item, so please refer to the article)

Why Use a Design System?

  • Design (and development) work can be created and replicated quickly and at scale.
  • It alleviates strain on design resources to focus on larger, more complex problems.
  • It creates a unified language within and between crossfunctional teams.
  • It creates visual consistency across products, channels, and (potentially siloed) departments.
  • It can serve as an educational tool and reference for junior-level designers and content contributors.

However...

Why Not Use a Design System?

  • Creating and maintaining a design system is a time-intensive activity which requires a dedicated team.
  • It takes time to teach others how to use the design system.
  • There may be a perception that projects are static, one-off creations, which generally don’t require reusable components.

Conclusion

You're correct that they can use CSS variables and easily change everything in a snap. But... based on what? How will they guess which colors to use and why? Anyway, while I agree with your Front End team, I think this is also a matter of organizational policies and boundaries may be blurry

Improve this answer
1
  • 1
    Thanks for the comprehensive feedback Devin, you're right it does fall down to the design team to create a coherent pattern for these variables, I think our current problem is the resources to manage that. I've booked into a workshop off the back of watching this video on design tokens in figma - youtube.com/watch?v=Ka1I5TphDb0 think the plug in will really help with the problem of creating duplicate colour styles to log these colour variables.
    – heyadaho
    Aug 31, 2021 at 13:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.