De Figma à React : des composants réutilisables

Offrir d'excellentes expériences utilisateur à travers les applications suggère une collaboration étroite entre les concepteurs et les développeurs et le respect strict des exigences UI/UX. Voyons comment y parvenir tout en standardisant les blocs de construction et en réduisant le temps à chaque étape en convertissant Figma en composants réutilisables React.

Dans le processus de développement d'applications destinées aux clients, les concepteurs et les développeurs ont un objectif commun : fournir de superbes applications que les clients adorent. . Mais ils travaillent dans des environnements différents. Les concepteurs construisent l'interface utilisateur et le parcours utilisateur dans l'outil de conception de leur choix. Les développeurs traduisent l'interface utilisateur et la conception en une application entièrement fonctionnelle à l'aide de diverses technologies et outils.

Avouons-le, il n'est pas rare que la mise en œuvre n'atteigne pas l'intention de conception. Une ombre manquante ici et là, une incompatibilité de tonalité de couleur ou une taille de police à un pixel près.

Mais et si, dès le début, les concepteurs et les développeurs créaient une interface utilisateur parfaitement assortie des deux côtés ? Ces blocs de construction correspondants garantiraient une collaboration d'équipe plus fluide, une réutilisation intégrée et une expérience utilisateur cohérente. Comme un système fédérateur de composants standardisés et prêts à l'emploi, il minimiserait les écarts, réduirait considérablement le temps de développement, permettrait aux équipes logicielles de se concentrer sur le parcours client et les fonctionnalités, et rapprocherait les concepteurs et les développeurs de leur objectif commun.

Alors, mettons un peu de contexte et plongeons dans le processus de réalisation de cet écosystème de blocs de construction unifié rêvé avec Figma et React.

Le contexte—Awesomeness Inc.

Disons que je fais partie de la société Awesomeness Inc. . Les gens de l'UI/UX, les développeurs et l'entreprise ont pris la décision de standardiser tous les composants et widgets utilisés dans nos applications. Cela a du sens car il est évolutif, maintenable, réutilisable, cohérent et moins cher. Et les utilisateurs apprécient toujours une bonne UX, consciemment ou non.

La tâche est donc claire. Les principaux indicateurs de succès sur lesquels nous nous sommes mis d'accord sont la cohérence, la réutilisation et le temps de développement.

Pour les besoins de ce didacticiel et par souci de concision, concentrons-nous uniquement sur le bouton principal d'appel à l'action (CTA). Le même processus pourrait ensuite être appliqué au reste des composants.

Comme le titre l'indique déjà, la pile technologique et la boîte à outils que j'utiliserai incluent Figma pour créer nos superbes conceptions et React pour créer de superbes applications Web destinées aux clients. . Voici ce dont j'aurai besoin.

• Figma – Figma est un outil de conception gratuit basé sur le cloud qui a récemment dominé le monde de la conception avec ses fonctionnalités puissantes et sa collaboration facile pour toute l'équipe. Si vous ne l'avez pas encore vérifié, c'est le moment.

• React – React est une bibliothèque JavaScript basée sur des composants permettant de créer des interfaces utilisateur riches et dynamiques. Construit par Facebook, React s'est avéré être l'outil de choix pour des milliers, voire des millions d'applications Web de toutes tailles.

Pour faciliter davantage le processus et répondre à nos critères de réussite, j'utiliserai trois outils supplémentaires. Ils me permettront de réduire considérablement le temps de développement, tout en maintenant une cohérence et une réutilisation élevées, car c'est ce que je vise maintenant.

• KendoReact – KendoReact est une suite d'interface utilisateur React complète qui -utiliser des composants React entièrement fonctionnels. C'est une bouée de sauvetage en matière de productivité. Il va également avec les kits d'interface utilisateur Kendo identiques pour le concepteur de Figma, ce qui nous facilitera la vie à la fois. Découvrez-le.

• Unite UX – Unite UX est un outil de collaboration de la conception au développement en deux parties. Il aide votre équipe à transférer rapidement les styles d'interface utilisateur de Figma vers votre bibliothèque KendoReact codée, à comparer la conception et les éléments codés pour les faire correspondre et à exporter la bibliothèque de composants stylisés prête à l'emploi avec une documentation Storybook générée automatiquement.

• Storybook – Storybook est un outil open source pour stocker la documentation, la référence de code et les démos de votre bibliothèque d'interface utilisateur codée. Un seul endroit pour que tous les développeurs sachent quels éléments sont utilisés dans l'application et ne réinventent pas la roue à chaque fois.

Le parcours Figma-to-React

Maintenant que nous avons choisi notre ensemble d'outils, passons en revue les processus complet de création de composants réutilisables Figma-to-React étape par étape.

Créer un bouton principal Awesomeness Inc. dans Figma

Ici, nous avons deux approches. La première consiste à repartir de zéro dans Figma. La seconde consiste à utiliser les Kendo UI Kits pour Figma comme point de départ.

Comme nous visons des résultats rapides sans compromettre le résultat, le deuxième choix est un choix facile. Les kits d'interface utilisateur Kendo apporteront plusieurs avantages.

Premièrement, les kits contiennent des composants réutilisables Figma pour l'ensemble de la suite KendoReact. Une fois que nous serons prêts avec le bouton, nous aurons un bon point de départ pour continuer avec le reste dont nous avons besoin.

Deuxièmement, les kits sont construits avec le principe de conception atomique à l'esprit. Cela signifie que les composants les plus complexes sont constitués des composants de base. Ainsi, une fois que nous en aurons terminé avec le bouton, le reste des composants contenant un bouton héritera de cette conception.

Et troisièmement, nous avons une vue d'ensemble plus globale des composants. car les kits incluent les états de tous les composants. De cette façon, nous pouvons également concevoir les états d'interaction, pas seulement l'état normal statique.

Alors, travaillons un peu. Tout d'abord, nous devons choisir l'un des trois thèmes des kits d'interface utilisateur Kendo (en fonction de celui qui se rapproche le plus de notre objectif final) et le dupliquer. Ce projet stockera nos composants réutilisables Figma. Je vais utiliser le thème Material.

Une fois ouvert dans Figma, je vais naviguer vers la page « Components & Variantes » et localiser le SOLID / PRIMARY

Les kits d'interface utilisateur Kendo utilisent des jetons de conception, des variables pour les couleurs, les effets ou la typographie. Modifiez le style sous un jeton et tous les composants qui utilisent ce jeton auront le nouveau style appliqué. -* jetons de couleur. Changez leurs couleurs unies en #AD44DF et vérifiez le résultat.

La dernière chose que je vais faire est de changer le rayon de la bordure à 40 pour obtenir un joli bouton arrondi avec un fond accrocheur. Pour le faire une seule fois et l'appliquer à chaque bouton, je modifierais le rayon de la bordure du composant structurel "_Base Button". Nous avons conçu l'impressionnant bouton principal en un rien de temps. Maintenant, il est temps de confier la conception aux développeurs pour convertir les composants Figma en React.

C'est l'étape où Unite UX entre en jeu. Je vais exporter la conception prête avec le Unite UX plugin pour Figma, que j'ai déjà installé.

Je vais naviguer vers « Exporter et transférer » dans le menu. Je vais sélectionner uniquement le cadre Boutons pour l'instant car je l'ai modifié, confirmer les jetons et les styles de conception automatiquement connectés et créer un nouveau projet Awesomeness.

Après le projet est créé et le design est exporté vers Unite UX, je le partagerai avec les développeurs de l'équipe, afin qu'ils puissent faire leur part du travail.

À ce stade, nous avons conçu ce bouton principal génial et les spécifications partagées avec les développeurs. Nous pouvons maintenant commencer à transférer la conception de Figma vers les composants réels de React.

Pour vous aider, je vais passer à l'application Web basée sur le cloud Unite UX.

L'espace de travail Unite UX comporte deux canevas. Celui de gauche montre le conception Figma exportée. Je peux inspecter toutes les couches Figma et leurs styles respectifs. Aucun outil de conception n'est requis – toute la magie se produit dans Unite UX.

Celui de droite contient les vrais composants KendoReact dont j'ai besoin pour styliser et assortir le design. Comme vous pouvez le voir, les fonctionnalités intelligentes de Unite UX ont déjà appliqué tous les styles pour nous. S'il y a autre chose, vous pouvez le faire rapidement et facilement en utilisant la fonction copier-coller.

Comme Unite UX est entièrement visuel, je n'ai pas besoin de basculer entre les outils de développement et les outils de conception , et il n'y a pas d'écriture manuelle de styles personnalisés. Je peux simplement inspecter le bouton dans la conception, copier les styles et les coller dans le composant React sur la droite. Si vous devez modifier ici ou là, utilisez les éditeurs de propriétés.

Je le ferai pour tous les états et vérifiez le résultat dans le volet de comparaison.

Lorsque nous avons des styles parfaitement assortis, il est temps de les incorporer dans l'application ou la bibliothèque de composants.

Appliquer des styles aux composants React

Pour appliquer ces styles aux composants React, je exportera depuis Unite UX.

Le contenu de output se compose de deux packages.

• Awesomeness package – Ceci est un prêt -package npm à utiliser contenant tous les styles et ressources qui rendraient possible la conversion des composants Figma en composants React – CSS, SCSS et polices.
• Documentation – Il s'agit de notre application Storybook basée sur React – informations d'installation, brève documentation, les exemples et les fragments de code font référence à un seul endroit. Lorsque vous devez vérifier un composant, ouvrez cette application, suivez les instructions, copiez le code et réutilisez-le. De cette façon, vous garantissez un processus rapide et cohérent.

Passons maintenant à la dernière étape et utilisons le bouton génial que vous venez de concevoir et de styliser. Tout d'abord, copiez le package Awesomeness dans le répertoire racine de votre projet. Ensuite, installez le package @progresss/kendo-react-buttons et awesomeness en tant que dépendance locale.

Importez le index.(s)css dans votre composant principal React (App par défaut). Pour utiliser le composant, copiez simplement l'exemple de code Storybook et placez-le dans votre code.

En tant qu'étape facultative, pour améliorer davantage votre métrique de succès de réutilisation Figma-to-React, vous pouvez abstraire le bouton en l'enveloppant dans un composant AwesomeButton personnalisé.

import React { FunctionComponent, MouseEventHandler } from 'react';
import { Bouton }  de '@progress/kendo-react-buttons';

tapez AwesomeButtonProps = {
  onClick?: MouseEventHandler<HTMLButtonElement>;
};

const AwesomeButton:[194590 FunctionComponent<AwesomeButtonProps> = ({ children, onClick })  => (
  <Bouton primaire onClick={onClick}>
    {enfants}[19659083]</Bouton>
);

AwesomeButton.defaultProps = {
  onClick: undefined,
};

export default AwesomeButton;

Summary

Aaa et c'est tout. Nous avons terminé le parcours Figma to React et atteint tous nos objectifs : un temps de développement court, une cohérence entre la conception de Figma et les composants réels de React, et une grande réutilisabilité intégrée.

Essayez-le vous-même.

Bon codage !