Re: [community-group] Standardizing the Handoff - Conceptual (#220)

As an ex-developer turned UX/UI designer, I fully understand the lack of a universal language and believe we should have a Before we can decide on whether this should be implemented, we should understand the use cases to determine the levels of standardisation and guidance.

While collaboration is the main factor in the success of design tokens, it isn’t always possible and we can’t assume that the business will allow time for it.  This will be especially true for companies that contract designers or developers at different stages of a project.

Given that naming design tokens is the biggest pain point and can even become a deterrent, any guidelines or standardisation will go a long way to expand the usage and expand their reach to large businesses to SMEs. 

### Token Naming Convention 

The CTI structure seems to lean towards a technical background. While developers may find this structure makes sense, I fear designers will find it difficult to find styles. Let’s look at how each applies styles to components.

Developers take time to group individual tokens into classes so, running a search or using autocomplete in VSCode makes it easy for them to find and join them together. Setting a component style means calling one class e.g. “primary-button”

In Figma, designers apply each component style individually, chosen from a drop-down list. If the designer wants to set a button background colour, it will be easier to  find styles grouped as Item/Type e.g. 

- colour-button-background-primary 
- colour-button-background-secondary
- colour-button-font-colour-primary 
- colour-button-font-colour-secondary

This structure is much more readable and therefore more attractive to all stakeholders. The CTI structure forces the user to drill down into the token name whereas, grouping by component means the user can ignore the first two columns. Also, the alignment helps to distinguish each component group

- Colour-background-button-primary
- Colour-background-button-secondary
- Colour-font-colour-button-primary
- Colour-font-colour-button-secondary


### Figma variables

I may be being shortsighted but, I wonder if we need to consider Figma Variables at all. I agree Figma does set the bar and the new feature will have an effect on the design community however, it’s not the only design tool in the box. I may use a spanner to build a box but, I don't expect it to write the instructions.

I’m looking forward to hearing your thoughts and insights on this area.

### Future users

When thinking of design tokens, I immediately think of large enterprises. Standardisation will open the door to smaller companies and enterprises will eventually become the edge case. We need to keep this in mind when creating the guidelines.

-- 
GitHub Notification of comment by JayHalligan
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/220#issuecomment-1744567906 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 3 October 2023 09:18:11 UTC