Le bon code pour votre design system

Un design system est un outil de choix pour jeter des ponts entre le design et le code. En créant une langue commune, le design system permet aux designers et aux développeurs de collaborer avec efficacité au sein de leurs workflows respectifs. Nous avons déployé de nombreux efforts pour rapprocher les design systems du code avec des fonctionnalités commel’auto layout, les variables, les propriétés de composants et Dev Mode, que nous avons lancé l’an dernier.

Contactez notre équipe commerciale pour des conseils personnalisés sur la façon dont vous pouvez tirer parti de nos dernières fonctionnalités pour votre design system.

Malgré ces progrès, un défi reste à relever : celui de l’adoption. En tant qu’engineering manager, j’en ai personnellement fait l’expérience. Quand nous parlons à nos clients, ils nous disent tous la même chose : « Nous avons construit un design system, mais son potentiel n’est pas pleinement utilisé. » Les développeurs se servent de certaines parties du design system, mais sont rarement au courant de tout ce qu’il contient. Et lorsqu’ils l’utilisent, il peut leur arriver d’employer des composants ou des modèles d’une façon qui ne correspond pas aux règles d’usage du design system. Ce problème est critique, car la réussite d’un design system dépend de sa bonne utilisation.

Voilà pourquoi je vous présente Code Connect avec tant d’enthousiasme. Code Connect est un nouvel outil qui permet aux organisations d’accélérer l’adoption de leur design system en rendant le code plus accessible et plus utile aux développeurs. Code Connect permet de personnaliser les extraits de code visibles dans Dev Mode. Ainsi, les développeurs voient le véritable code de votre design system plutôt que du code CSS auto-généré. Le résultat ? Un développement plus rapide et plus efficace, une meilleure adoption du design system dans toute votre organisation, et moins de composants dupliqués pour un usage ponctuel, donc moins de maintenance.

Relier design et code

Cela fait longtemps que nous réfléchissons à la question de l’adoption à grande échelle des design systems. Il ne s’agit pas uniquement des préférences ou des workflows de chacun, c’est la preuve d’une déconnexion plus générale entre le design et le code. Comme notre CEO Dylan Field l’explique, traditionnellement le design et le code font partie de deux mondes différents : « Il y a une tension naturelle entre design et code. Le monde du design imagine ce qu’il y a à construire, tandis que celui du code construit ce qui a été imaginé. En pratique, ce sont des partenaires qui travaillent pour donner vie à un produit. »

Les designers et les développeurs travaillent avec différents outils, selon différentes contraintes et préoccupations. Les designers privilégient la créativité et l’exploration, tandis que les développeurs misent plutôt sur la structuration et la viabilité. Chez Figma, nous imaginons un monde où les designers et les développeurs peuvent passer de l’exploration libre à une implémentation structurée et généralisée en toute fluidité. Code Connect est un pas de plus dans cette direction.

Aller à la rencontre des développeurs

L’objectif de Code Connect est de réduire cet écart en intégrant la puissance du code à l’outil de design. Techniquement, Code Connect est un outil fourni par npm pour les projets JavaScript et TypeScript, ainsi que par Swift Package Manager pour les projets SwiftUI. Cela permet aux développeurs de facilement installer et utiliser Code Connect pour leurs propres projets, peu importe la plateforme qu’ils utilisent. Grâce à la prise en charge à venir d’autres plateformes, Code Connect vise à répondre aux besoins des développeurs en s’intégrant de manière optimale à leurs outils et workflows existants.

Le programme et les instructions d’installation sur trouvent sur GitHub, et les développeurs peuvent l’installer via une simple interface de ligne en commande. Cela correspond à des outils et des workflows que les développeurs connaissent et utilisent déjà.

Dans cette conférence, Jake Albaugh, developer advocate chez Figma, nous montre comment Code Connect peut mener à un design system plus connecté et partage quelques astuces pour débuter avec l'outil.

Une fois installé, Code Connect permet aux équipes responsables du design system de faire apparaître et de diffuser les bonnes pratiques et la documentation relatives à son utilisation dans le contexte des mock-ups. Ainsi, lorsqu’un développeur clique sur un mock-up, il n’a pas besoin de chercher parmi une multitude de documents et de codes pour savoir comment le construire en accord avec le design system. Il lui suffit de cliquer sur le mock-up pour obtenir les échantillons de code validés et mis à jour dont il a besoin, publiés par l’équipe responsable des design systems.

Les avantages sont considérables : comme les développeurs ne réécrivent pas les composants, il y a moins de code à actualiser. En utilisant l’existant, plutôt qu’en créant des composants à partir de zéro, les développeurs sont plus efficaces. Et lorsque l’adhésion au design system progresse, il devient plus facile d’améliorer l’accessibilité et la cohérence entre les applications.

L’implémentation de Code Connect à votre design system peut mener à :

1import * as figma from '@figma/code-connect'
2
3figma.connect(Button, 'https://...', {
4  props: {
5    label: figma.string('Text Content'),
6    disabled: figma.boolean('Disabled'),
7    type: figma.enum('Type', {
8      Primary: 'primary',
9      Secondary: 'secondary',
10    }),
11  },
12  example: ({ disabled, text, type }) => {
13    return (
14      <Button disabled={disabled} type={type}>
15        {text}
16      </Button>
17    )
18  },
19})
20

import Figma

struct Button_connection : FigmaConnect {
  let component = Button.self
  let figmaNodeUrl: String = "https://..."

  @FigmaProp("Text Content")
  var label: String = "Submit"

  @FigmaProp("disabled")
  var disabled: Bool = false

   @FigmaProp(
      "Variant",
      mapping: [
          "Primary": ButtonVariant.primary,
          "Secondary": ButtonVariant.secondary,
          "Destructive": ButtonVariant.danger
      ]
  )
  var type: ButtonType = .primary

   var body: some View {
      Button(type: self.type, disabled: self.disabled, label: {
          Text(self.label)
      })
   }
}

Un workflow plus unifié

Quand les développeurs utilisent Code Connect, ils ne génèrent pas de nouveau code, ils accèdent à des échantillons de code validés et gérés par l’équipe responsable du design system. Cela permet de garantir la cohérence et le respect des règles du design system, sans dépendre de code généré automatiquement, ce qui pourrait induire des erreurs ou un manque de cohérence. L’idée derrière Code Connect, c’est de permettre de faire apparaître et de distribuer le code existant et la documentation de votre design system. En utilisant ce dernier comme chemin de moindre résistance, il est possible d’en encourager l’adoption et se s’assurer que tout le monde travaille avec la même source de vérité.

Cet aspect est particulièrement important quand les équipes s’agrandissent. Il est facile de garder tout le monde en phase dans une petite équipe, mais en grandissant, elle a tendance à se cloisonner. Les designers et les développeurs commencent à travailler chacun de leur côté, et le design system ressemble plus à un ensemble de règles approximatives plutôt qu’à un standard que tout le monde partage. Avec Code Connect, nous voulons aider les équipes à rester en phase, peu importe leur taille.

Code Connect n’est qu’une première étape. À l’avenir, la fonctionnalité va développer de nombreuses possibilités d’intégrer des workflows de design et de développement. Par exemple, elle pourrait permettre un audit automatique de l’utilisation du design system, à la fois en termes de design et de code, pour identifier les endroits où ces deux éléments ne sont plus en phase. Elle pourrait également fournir une analyse de données et un éclairage sur l’utilisation du design system, afin de permettre aux équipes de mieux comprendre comment les collaborateurs s’en servent en pratique. Une autre possibilité est de permettre des circuits de validation entre le design et le développement pour les mises à jour de composants, afin de s’assurer que les changements apportés au design system sont correctement évalués et coordonnés par les différentes équipes.

Bien que ces fonctionnalités spécifiques ne soient pas encore sur notre roadmap, jeter des ponts entre le design et le code ouvre de nombreuses opportunités pour des explorations et des innovations futures. Nous souhaitons créer un lien encore plus fort entre le design et le code, qui va au-delà des design systems ou des composants. Imaginez un avenir où le même type de connexion existe pour les variables, l’iconographie, la typographie – tout ce qui entre en jeu dans une interface. Code Connect pose les jalons de cet avenir, et nous avons hâte de voir cette technologie évoluer vers une compatibilité avec des workflows encore plus puissants.

Code Connect sera disponible en version bêta pour les forfaits Figma Organisation et Entreprise, la disponibilité générale étant prévue pour la fin de l’année. La version bêta sert à présenter l’idée, à prendre la température et à obtenir des retours de la communauté. Nous avons l’intention d’intégrer pleinement Code Connect au workflow Figma, y compris le bac à sable des composants et la compatibilité avec d’autres plateformes, dont Android, et avec des frameworks web.

Pour vos premiers pas avec Code Connect, rendez-vous sur notre dépôt GitHub, où vous trouverez les instructions d’installation et de configuration du package NMP, et consultez notre documentation pour en savoir plus.