Cycles de déploiement

Intégrer dans les processus de production : Soigner son cycle de déploiement

Design tokens → code

Stockez vos Design Tokens via le standard Design Tokens Format Module dans un fichier JSON, pour l’indépendance et l’interopérabilité avec divers outils.

Design Tokens Format Module

This document describes the technical specification for a file format to exchange design tokens between different tools.

https://tr.designtokens.org/format/

Style Dictionary - Style once, use everywhere. A build system for creating cross-platform styles.

Style once, use everywhere. A build system for creating cross-platform styles.

https://amzn.github.io/style-dictionary

Exporting and integrating design tokens into developer pipelines

You can export your design token sets from the top-level 'Tokens' section in zeroheight. You can export tokens in a number of formats, ready for use in

https://zeroheight.com/help/article/exporting-design-tokens/

Linter vos Design Tokens

Les linters design sous forme de plugins Figma permettent de controler l’usage des Design Tokens.

www.figma.com

https://www.figma.com/community/plugin/801195587640428208/design-lint?searchSessionId=ls6pv10u-hivxw4ivw0f

www.figma.com

https://www.figma.com/community/plugin/751892393146479981

www.figma.com

https://www.figma.com/community/plugin/1190031860923518584/roast

Exemple d’Atlasian

L’usage des Design Tokens dans le code doit être accompagné.

Use tokens in code - Tokens - Atlassian Design System

Learn how to set up and use design tokens in code.

https://atlassian.design/tokens/use-tokens-in-code/

Il existe aussi des linters de code, comme eslint et csslint, dont alasian se sert.

Migrate to tokens - Tokens - Atlassian Design System

How products, apps, and teams move from old style values to design tokens.

https://atlassian.design/tokens/migrate-to-tokens/

atlassian.design

https://atlassian.design/components/eslint-plugin-design-system/usage

Maîtriser vos versions

Utilisez des numero de version sémantique et adoptez la pratique du changelog.

Semantic Versioning 2.0.0

Semantic Versioning spec and website

https://semver.org/

Tenez un Changelog

Ne laissez pas vos amis utiliser les logs git comme changelogs

https://keepachangelog.com/fr/1.1.0/

Outils

Les outils Supernova et Specify sont ceux qui proposent le plus d’interconnexion avec le code.

Design Tokens Management — Supernova.io

The next generation of design tokens management is here. Import, manage, document, and deliver your design tokens from one place with Supernova.

https://www.supernova.io/design-tokens

Specify | Your Design Token Engine

Flexible and powerful, Specify makes it easy to build the exact Design Token process your Design System needs.

https://specifyapp.com