Transfert de concepteur à développeur : comment créer un composant React à partir d'un fichier de conception Figma

Comme nous le savons tous, une partie du travail d'un développeur de produit consiste à convertir la conception de Figma en code avec un cadre de choix, et cela peut être complexe si le projet est important. L'essence du transfert concepteur-développeur est que le développeur implémente les écrans de la conception dans des composants exacts et au pixel près.

Dans cet article, nous allons étendre les fonctionnalités d'AWS Amplify Studio pour créer une application à partir de Figma et importer les composants dans React. La connexion entre Figma et React, avec l'aide d'Amplify, crée des composants React réutilisables qui vous font gagner du temps et évitent d'écrire de longues lignes de code. Le processus de conversion de Figma en code est transparent et permet aux développeurs de construire plus rapidement (ce qui explique probablement pourquoi Abode a acquis Figma pour des milliards ).

Conditions préalables

Pour comprendre et compléter ce guide, les éléments suivants sont requis :

• Un compte Figma. L'inscription est gratuite
• Node >= 14.0.0 et npm >= 5.6 installés sur notre machine locale pour l'installation du package
• Un éditeur de code
• Installez l'AWS Amplify CLI sur notre terminal. Exécutez cette commande :

 npm install -g @aws-amplify/cli

• Connaissance de JavaScript et React
• Avoir un compte AWS. Créer un compte ici

Création d'un kit de modèle d'interface utilisateur sur Figma

Avant de créer les composants React à partir du kit d'interface utilisateur, nous devons configurer le projet Figma. Une fois sur Figma, accédez à la communauté AWS après avoir créé un compte et recherchez le fichier Figma du kit d'interface utilisateur AWS Amplify .

Cliquez sur "Obtenir une copie" pour dupliquer ou cloner une copie du kit d'interface utilisateur.

Le kit d'interface utilisateur Amplify est installé avec certaines pages prédéfinies, à savoir :

La page Primitives : cette page se lie à AWS Amplify Studio, qui comprend tous les styles pour les composants prédéfinis. La modification du contenu de cette page affectera l'apparence de la bibliothèque de l'interface utilisateur React à partir des composants Figma.

La page Mes composants : Cette page vous donne le contrôle pour éditer, changer et créer des composants, et elle est livrée avec des composants pré-construits.

La page Exemples : Cette page affiche les exemples de conception de certains composants personnalisés de la page Mes composants.

Ce didacticiel utilisera deux composants de la page Mes composants : la barre de navigation et l'interface utilisateur de FormCheckout .

Création d'un projet Amplify

Une fois la configuration terminée dans Figma, rendez-vous sur la console AWS pour créer un nouveau projet Amplify. Connectez-vous à votre compte et recherchez AWS Amplify.

Sélectionnez AWS Amplify dans la liste des services. Une fois dans le tableau de bord Toutes les applications , cliquez sur le bouton Nouvelle application et sélectionnez Créer une application dans la liste déroulante.

Donnez un nom à l'application et cliquez sur confirmer le déploiement pour créer l'application.

Avec le déploiement du projet Amplify, créons une nouvelle application React.

Créer une application React

Pour échafauder une nouvelle application React, rendez-vous sur votre terminal et collez la commande suivante :

 npx create-react-app no-code

Cette commande décompresse tous les fichiers et dossiers nécessaires pour créer une belle application Web évolutive.

Lancer Amplifier Studio

Après avoir installé notre application React, il est maintenant temps de lancer le projet. Cliquez sur le studio de lancement pour afficher la mise en scène sans code.

Cliquez sur le bouton de lancement du studio car il vous amène à la page montrant l'environnement de staging pour no-code .

Ici, nous pourrons faire beaucoup de choses comme la création de modèles de données, l'authentification, etc. Mais nous nous concentrerons sur la bibliothèque d'interface utilisateur sous l'onglet Conception.

Cliquez sur le bouton Commencer.

Synchroniser avec Figma. Cette boîte de dialogue vous permettra de coller le lien du fichier Figma depuis la page Mes composants .

Si c'est la première fois que vous effectuez cette étape, une authentification peut être nécessaire pour accéder à votre compte Figma.

Récupération des composants de Figma

Acceptez toutes les modifications des composants extraits de Figma.

Nous pourrons voir tous les composants de l'interface utilisateur du fichier Figma dans Amplify Studio.

FormCheckout des composants importés de Figma est le même que celui affiché dans Amplify Studio.

Travailler avec les composants récupérés dans React

Maintenant que nous avons les composants d'interface utilisateur récupérés dans Amplify Studio, nous devons avoir tous les composants d'interface utilisateur dans notre application React.

Pour connecter notre application à Amplify Studio, nous devons extraire les composants dans notre code source à l'aide du lien Instructions de configuration locale et exécuter la commande à partir du dossier racine du projet.

N'oubliez pas que pour que cette commande fonctionne, installez globalement l'interface de ligne de commande AWS Amplify, comme indiqué dans la section des prérequis.

L'exécution de la commande invitera notre programme avec un message d'autorisation.

Cliquez sur Oui pour accorder l'autorisation à l'application React. Ensuite, une série d'invites apparaît lors de l'extraction des composants. Acceptez les questions par défaut.

Si vous rencontrez des défis ou des messages de journal d'erreur dans le terminal, c'est probablement que vous n'avez pas configuré AWS.

Consultez ce guide si vous faites face à ce défi.

L'installation crée un nouveau dossier ui-components dans le répertoire src , qui contient tous les composants d'interface utilisateur extraits d'Amplify Studio.

Premiers pas avec la bibliothèque Amplify UI

La bibliothèque Amplify UI React est essentielle pour le style de notre application, qui est similaire à toutes les autres bibliothèques d'utilitaires CSS.

Exécutez cette commande :

 npm install @aws-amplify/ui-react aws-amplify

modes

Dans le point d'entrée de l'application, le fichier index.js, importez le fichier CSS. Copiez et mettez à jour le fichier index.js avec ce code qui est responsable de l'apparence de l'application :

 // src/index.js
import React from 'react' ; import ReactDOM from 'react-dom/client' ; import App from './App' ; import '@aws-amplify/ui-react/styles.css' ; // add this
const root = ReactDOM.createRoot( document .getElementById( 'root' )); root.render(  < React.StrictMode >
    < App />
  </ React.StrictMode >
);

Polices

Amplify UI est livré avec les polices par défaut, Inter lors de l'installation de la dépendance Amplify UI. Dans le

 public/index.html

 <head>

 // public/index.html
... <head> < link rel = "preconnect" href = "https://fonts.googleapis.com" />
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin />
< link
  href = "https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900&display=swap"
  rel = "stylesheet"
/>
</head> ...

Affichage des composants

Pour afficher les composants FormCheckout et NavBar , accédez au

 src/App.js

Ensuite, mettez à jour le fichier avec ce code :

 // src/App.js
import { FormCheckout, NavBar } from './ui-components' ; const App = () => {  return (    <>
      < NavBar />
      < FormCheckout marginTop = '5em' />
    </>
 ); } export default App;

La propriété margin-top donne une marge supérieure entre la barre de navigation et le formulaire de paiement. La valeur CSS fait partie de la façon d'utiliser les styles de l'interface utilisateur Amplify dans nos composants.

Démarrer le serveur de développement

React est livré avec une fonction de rechargement à chaud qui se rafraîchit chaque fois qu'il y a une mise à jour sur le fichier.

Exécutez cette commande :

 npm start

Le serveur de développement s'exécute sur

 http://localhost:3000

Vous souhaitez déployer cette application React sur le Web ? Consultez cette ressource qui vous guide pas à pas dans l'utilisation d'AWS Amplify.

Conclusion

Des outils low-code avec zéro ou aucun code sont ce que propose Amplify Studio. Cet outil rend le travail de développeur passionnant, car une partie de notre travail a été fait pour nous sans construire de composants à partir de zéro ou, mieux encore, implémenter des écrans du concepteur.

Nous pouvons affirmer avec audace que le transfert du concepteur au développeur est transparent.

Cet article nous a appris à créer et à intégrer nos composants Figma à l'aide d'Amplify Studio et à connecter les composants aux composants React qui fonctionnent comme une application fonctionnelle.

Le code source complet se trouve dans ce dépôt GitHub .