Meetups Design Tokens - DesignOps spinoff

Découvrez le pouvoir des Design Tokens : la clé de la cohérence visuelle de vos produits.

Design Tokens serie #1

Les Design Tokens transforment la manière dont nous concevons et développons les interfaces, en offrant une source unique de vérité pour les styles, les tailles voire d'autres décisions de Design. Ces petites unités de Design permettent une cohérence accrue, une maintenance simplifiée et une collaboration renforcée entre designers et développeurs. Mais comment les intégrer efficacement sans se perdre dans la complexité ?

Programme

• Design Tokens: une introduction pour dévoiler le potentiel des Design Tokens dans vos projets par Ismail Hamila, Design Lead et Adrien Gibrat, Lead Frontend dev.
• Standardisation des design tokens, le futur du design à grande échelle par Louis Chenais, fondateur de Specify et membre du Design Tokens Community Group.
• Retours d'expérience Carrefour : Jérémy Dahan et Antoine Deshoux partageront leur usage pratique des Design Tokens chez Carrefour.

Replay video

Slides Figma

View DesignOps Meetup#12 : Le pouvoir des Design Tokens, clé de la cohérence visuelle on Notist.

Liens

A Maturity Model for Design Systems — Ben Callahan @Sparkbox — ENG

1. Introduction

https://medium.com/yousign-engineering-product/a-maturity-model-for-design-systems-ben-callahan-sparkbox-eng-173215652f95

The Many Faces of Themeable Design Systems

Very rarely is exactly one design system created to serve exactly one product that expresses exactly one design language. Nearly all the design systems we've worked on require a high degree of flexibility in order to properly serve our clients' needs. Some of this flexibility is achieved by variabil

https://bradfrost.com/blog/post/the-many-faces-of-themeable-design-systems/

Animation/Motion Design Tokens

For complex Design Systems

https://medium.com/@ogonzal87/animation-motion-design-tokens-8cf67ffa36e9

The future of Design Tokens

Design tokens are a relatively new concept in the world of design systems, but they have quickly become an essential tool for designers and developers working on digital products collaboratively. In this article, we will explore what design tokens are and how they are used. We will also discuss the

https://hybridheroes.de/blog/2023-02-02-the-future-of-design-tokens/

Naming Tokens in Design Systems

Terms, Types, and Taxonomy to Describe Visual Style

https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

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/

figma.com

https://figma.com/community/file/1270821372236564565/syncing-design-systems-using-variables-rest-api

Style Dictionary Configurator | Tokens Studio

Style Dictionary Configurator, transform Tokens Studio Figma Plugin tokens to your platform of choice.

https://configurator.tokens.studio/

Design Tokens

Design Systems, code-side

https://backlight.dev/docs/design-tokens

GitHub - amzn/style-dictionary: A build system for creating cross-platform styles.

A build system for creating cross-platform styles. - amzn/style-dictionary

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

Thomas Gossmann

Unicyclist. Artist. Developer.

https://gos.si/

List: Design Tokens & Visual Foundations | Curated by Nathan Curtis | Medium

9 stories

https://medium.com/@nathanacurtis/list/design-tokens-and-visual-style-a70978d80056

Lukas Oppermann – Medium

Read writing from Lukas Oppermann on Medium. Product designer with a love for complex problems & data. Everything I post on Medium is a copy — the originals are on my own website: https://www.vea.re.

https://lukasoppermann.medium.com/

📣 Intervenants

• Louis Chenais, Co-Founder & Chief Evangelist @ Specify
• Jérémy Dahan, Design System Designer @ Carrefour
• Antoine Deshoux, Lead Design System @ Carrefour
• Ismail Hamila, Design Lead @ Freelance
• Adrien Gibrat, Front-End Developer @ Frontguys

Design Tokens serie #2

Comment utiliser de façon optimale Tokens Studio et Figma pour améliorer l'organisation et l'usage des Design Tokens. Vous apprendrez tout ce que les équipes de France Télévision ont réussi mais aussi ce qui n'a pas fonctionné.

Programme

• Découvrez le retour d'experience de France TV passionnant avec Pierre-Yves Vignau et de Romain Lesniak sur l'implémentation des Design Tokens dans un environnement multimodal : web, mobile iOS / Android et de nombreuses apps TV embarquées.
• Tokens Studio, en duplex, avec Mike Kamminga, CEO of Hyma, l'entreprise derrière Tokens Studio, partage les dernières innovations et outils mis à disposition des designers, une source d'inspiration pour tous.
• Enfin, Ismail Hamila et Adrien Gibrat en disent plus sur les ateliers proposés dans le livre The Design Tokens Book.

Replay video

Slides Figma

Liens

www.youtube.com

https://www.youtube.com/watch?v=AtMVxP0UMII

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/

@tokens-studio/sd-transforms

Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio. Latest version: 1.1.0, last published: 6 days ago. Start using @tokens-studio/sd-transforms in your project by running `npm i @tokens-studio/sd-transforms`. There are 40 other projects in the npm registry using @tokens-studio/sd-transforms.

https://www.npmjs.com/package/@tokens-studio/sd-transforms

GitHub - pvignau/ts-ds-boilerplate

Contribute to pvignau/ts-ds-boilerplate development by creating an account on GitHub.

https://github.com/pvignau/ts-ds-boilerplate

shaper

Generative Design Tool for UI Interfaces

https://shaper.design/

Home

A documentation site dedicated to the Workday Canvas Design System

https://canvas.workday.com/

Resolver playground | Tokens Studio

Tokens studio alpha playground to test new resolver / generation functionality

https://resolver.dev.tokens.studio/

Style Dictionary Configurator | Tokens Studio

Style Dictionary Configurator, transform Tokens Studio Figma Plugin tokens to your platform of choice.

https://configurator.tokens.studio/

Ateliers

Des ateliers pour mettre en place les Design Tokens dans votre organisation.

https://www.designtokensbook.fr/workshops/

📣 Intervenants :

• Pierre-Yves Vignau, Lead tech Design System @ France TV
• Romain Lesniak, Design System Designer @ France TV
• Mike Kamminga, CEO @ Hyma, créateurs deTokens Studio
• Ismail Hamila, Design Lead @ Freelance
• Adrien Gibrat, Front-End Developer @ Frontguys

Design Tokens serie #3

Rejoignez-nous pour une soirée passionnante sur la manière d'améliorer la collaboration interdisciplinaire entre les designers, les développeurs et les parties prenantes. Cet événement se déroulera en Anglais, ce qui en fait une belle occasion, pour un public plus large, d'en bénéficier et d'y participer.

Programme

• Découvrez comment les Design Tokens aident à améliorer la collaboration dans un nouveau format de rencontre, avec une discussion modérée entre DesignOps Manager, System Designer, Engineering Manager de The Fork et un représentant de Supernova.
• Profitez de leurs expériences et apprenez comment optimiser vos processus de conception et de développement grâce à une collaboration efficace.

Replay video

Slides Figma

Liens

GitHub - designtokensbook/website: The Design Tokens Book website

The Design Tokens Book website. Contribute to designtokensbook/website development by creating an account on GitHub.

https://github.com/designtokensbook/website

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

What is an exporter? | Supernova Developers

Understand the value the exporters will bring to your development workflows. | With ❤️ for all fellow devs out there

https://developers.supernova.io/latest/using-exporters/what-is-an-exporter-8ESlogFM

www.figma.com

https://www.figma.com/community/plugin/1256972111705530093/export-import-variables

Supernova | The Design System Platform That Grows With You

Connect design and engineering data in a single design system tool. Supernova adapts to your company's needs and enables your teams to accelerate and scale product development.

https://www.supernova.io

thefork.com

https://thefork.com

📣 Intervenants :

• Margaux MARIE, DesignOps Manager @ The Fork
• Thomas Lautrédou, Senior System Designer @ The Fork
• Julien Riveron, Engineering Manager @ The Fork
• Taylor Piper, Head of Sales @ Supernova
• Ismail Hamila, Design Lead @ Freelance
• Adrien Gibrat, Front-End Developer @ Frontguys

Le Laptop Meetup à Marseille

Au programme, deux conférences placées sous le signe de l'opérationnalisation des Design Tokens et de leur déploiement au sein des organisations et des équipes Design.

Slides Figma

Liens

How to name design tokens

How to name design tokens? How to organize design tokens? How to set up the design tokens architecture? Interactive guide and playground with templates.

https://thedesignsystem.guide/design-tokens-naming-playbook

www.figma.com

https://www.figma.com/community/file/1372570473193150221/design-tokens-naming-playbook

Airtable | Everyone's app platform

Airtable is a low-code platform for building collaborative apps. Customize your workflow, collaborate, and achieve ambitious outcomes. Get started for free.

https://airtable.com/appvdDqHsXMB0JjbI/shrpnN75yzRHsg43T/tblgcxLbqTtwdWaOv

www.figma.com

https://www.figma.com/community/file/1372152751781115255/design-tokens-07-structure-nomenclature?fuid=958321296977013963

www.figma.com

https://www.figma.com/community/plugin/888356646278934516/design-tokens?fuid=958321296977013963

GitHub - lukasoppermann/design-tokens: 🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format. - lukasoppermann/design-tokens

https://github.com/lukasoppermann/design-tokens#push-to-server

Ultraviolet 

https://ultraviolet.scaleway.com/

GitHub - scaleway/ultraviolet: A monorepo Design System with React components.

A monorepo Design System with React components. Contribute to scaleway/ultraviolet development by creating an account on GitHub.

https://github.com/scaleway/ultraviolet

GitHub - scaleway/design-tokens: JSON design tokens used in Scaleway UI library

JSON design tokens used in Scaleway UI library. Contribute to scaleway/design-tokens development by creating an account on GitHub.

https://github.com/scaleway/design-tokens

www.figma.com

https://www.figma.com/community/file/1372154362471139708/design-tokens-09-design-tokens-life-cycle

Gestion sémantique de version 2.0.0

Semantic Versioning spec and website

https://semver.org/lang/fr/spec/v2.0.0.html

Tenez un Changelog

Ne laissez pas vos amis utiliser les logs git comme changelogs

https://keepachangelog.com/fr/1.1.0

Design Tokens

Design tokens are the single source of truth to name design decisions.

https://www.engie.design/fluid-design-system/design-tokens

GitHub - semantic-release/release-notes-generator: :clipboard: semantic-release plugin to generate changelog content with conventional-changelog

:clipboard: semantic-release plugin to generate changelog content with conventional-changelog - semantic-release/release-notes-generator

https://github.com/semantic-release/release-notes-generator

GitHub - semantic-release/changelog: :blue_book: semantic-release plugin to create or update a changelog file

:blue_book: semantic-release plugin to create or update a changelog file - semantic-release/changelog

https://github.com/semantic-release/changelog

architecture-decision-record/locales/fr/modèles/modèle-denregistrement-de-décision-par michael-nygard at main · joelparkerhenderson/architecture-decision-record

Architecture decision record (ADR) examples for software planning, IT leadership, and template documentation - joelparkerhenderson/architecture-decision-record

https://github.com/joelparkerhenderson/architecture-decision-record/tree/main/locales/fr/modèles/modèle-denregistrement-de-décision-par michael-nygard

Créer un webhook entrant - Teams

Créez un webhook entrant vers l’application Teams et publiez des demandes externes à Teams. Supprimez le webhook entrant. Exemple de code (C#, Node.js) pour envoyer une carte à l’aide du webhook entrant.

https://learn.microsoft.com/fr-fr/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook?tabs=newteams%2Cdotnet

Sending messages using incoming webhooks

Create an incoming webhook with a unique URL to which you send a JSON payload with message text and options.

https://api.slack.com/messaging/webhooks

Looker Studio Overview

Unlock the power of your data with interactive dashboards and beautiful reports that inspire smarter business decisions.

https://lookerstudio.google.com/overview

Grafana: The open observability platform | Grafana Labs

Grafana is the open source analytics & monitoring solution for every database.

https://grafana.com

www.figma.com

https://www.figma.com/community/file/1372159974476493192

Amazon.fr

https://link.designtokensbook.com/buy

📣 Intervenants :

• Louis Chenais, Co-Founder & Chief Evangelist @ Specify
• Ismail Hamila, Design Lead @ Freelance
• Adrien Gibrat, Front-End Developer @ Frontguys

Friends of Figma Meetup à Lyon

Les Design Tokens sont devenus des éléments clés pour créer des Design System robuste et flexible, comment les mettre en place et les utiliser pour améliorer l'expérience utilisateur ?

• Adrien Gibrat et Ismaïl Hamila, les auteurs du livre "The Design Token Book", partageront leur expertise sur les Design Tokens.
• Nous aurons également le plaisir d'écouter Louis Chenais, qui nous présentera le concept de Design API et leur implication au sein d'un design system.
• Et surtout, l'équipe Design System d'EDF partagera son retour d'expérience, leurs connaissances et leurs meilleures pratiques sur la mise en place de Design Tokens.

📣 Intervenants :

• Floriane Julliard, Design System Designer @ EDF
• Samuel Boulery, UI Designer @ EDF
• Hugo Douchet, Lead Design System @ EDF
• Louis Chenais, Co-Founder & Chief Evangelist @ Specify
• Ismail Hamila, Design Lead @ Freelance
• Adrien Gibrat, Front-End Developer @ Frontguys