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    installés sur notre machine locale pour l'installation du package Node >= 14.0.0 et npm >= 5.6  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   après avoir créé un compte et recherchez   .  communauté AWS 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 :    : 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 Primitives    : 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 Mes composants    : Cette page affiche les exemples de conception de certains composants personnalisés de la page Mes composants. La page Exemples  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   et recherchez AWS Amplify.  compte  Sélectionnez AWS Amplify dans la liste des services. Une fois dans le tableau de bord   , cliquez sur le bouton   et sélectionnez   dans la liste déroulante.  Toutes les applications Nouvelle application Créer une application  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.     des composants importés de Figma est le même que celui affiché dans Amplify Studio. FormCheckout  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   si vous faites face à ce défi. ce guide  L'installation crée un nouveau dossier   dans le répertoire   , qui contient tous les composants d'interface utilisateur extraits d'Amplify Studio.  ui-components src  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 :                                   root.render(           ); // 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' ));    < React.StrictMode > 
      < App  /> 
    </ React.StrictMode > 
   Polices  Amplify UI est livré avec les polices par défaut,   lors de l'installation de la dépendance Amplify UI. Dans le  fichier, copiez et collez les liens CDN des polices Google suivants dans le  élément:  Inter   public/index.html   <head>   ... <head>                                 </head> ... // public/index.html 
 < 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,wght@-10..0,100..900&display=swap" 
    rel = "stylesheet" 
 /> 
  Affichage des composants  Pour afficher les composants   et   , accédez au  fichier et supprimer tout le code. FormCheckout NavBar   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   qui vous guide pas à pas dans l'utilisation d'AWS Amplify. cette ressource  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

This story contains new, firsthand information uncovered by the writer.

Amazon

Google

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

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

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps