Como todos sabemos, parte del trabajo de un desarrollador de productos es convertir el diseño de Figma en código con un marco de trabajo de elección, y puede ser complejo si el proyecto es significativo. La esencia del traspaso del diseñador al desarrollador es que el desarrollador implementa las pantallas del diseño en componentes exactos y con píxeles perfectos.  En este artículo, ampliaremos la funcionalidad de AWS Amplify Studio para crear una aplicación desde Figma e importar los componentes a React. La conexión entre Figma y React, con la ayuda de Amplify, crea componentes React reutilizables que le ahorran tiempo y evitan escribir largas líneas de código. El proceso de conversión de Figma a código es perfecto y hace que sea eficiente para los desarrolladores construir más rápido (probablemente por eso     ). Abode adquirió Figma por miles de millones  requisitos previos  Para comprender y completar esta guía, se requiere lo siguiente:  Una cuenta de Figma. registrarse es  gratis    instalados en nuestra máquina local para la instalación del paquete Node >= 14.0.0 y npm >= 5.6  Un editor de código  Instale la CLI de AWS Amplify en nuestra terminal. Ejecute este comando:    npm install -g @aws-amplify/cli  Conocimiento de JavaScript y React.  Tener una cuenta de AWS. Regístrese para obtener una cuenta  aquí  Creación de un kit de interfaz de usuario de plantilla en Figma  Antes de crear los componentes de React a partir del kit de interfaz de usuario, debemos configurar el proyecto Figma. Una vez en Figma, vaya a la   después de crear una cuenta y busque   .  comunidad de AWS el archivo Figma del kit de interfaz de usuario de AWS Amplify  Haga clic en "Obtener una copia" para duplicar o clonar una copia del kit de interfaz de usuario.   El kit de interfaz de usuario de Amplify viene instalado con algunas páginas prediseñadas, que son:    : esta página se vincula con AWS Amplify Studio, que comprende todos los estilos para los componentes prediseñados. Cambiar el contenido de esta página afectará el aspecto de la biblioteca React UI de los componentes de Figma. La página Primitives    : esta página le brinda control para editar, cambiar y crear componentes, y viene con componentes prediseñados. La página Mis componentes    : esta página muestra los diseños de ejemplo de algunos componentes personalizados de la página Mis componentes. La página Ejemplos  Este tutorial utilizará dos componentes de la página Mis componentes: la barra de navegación y      la interfaz de usuario de FormCheckout .  Creación de un proyecto de amplificación  Con la configuración completa en Figma, diríjase a la consola de AWS para crear un nuevo proyecto de Amplify. Inicie sesión en su   y busque AWS Amplify.  cuenta  Seleccione AWS Amplify de la lista de servicios. Una vez en el panel   , haga clic en el botón   y seleccione   en el menú desplegable.  Todas las aplicaciones Nueva aplicación Crear una aplicación  Asigne un nombre a la aplicación y haga clic en confirmar implementación para crear la aplicación.   Con la implementación del proyecto Amplify, creemos una nueva aplicación React.  Creación de una aplicación React  Para montar una nueva aplicación React, dirígete a tu terminal y pega el siguiente comando:    npx create-react-app no-code  Este comando desempaqueta todos los archivos y carpetas necesarios para construir una aplicación web hermosa y escalable.  Inicie Amplify Studio  Después de instalar nuestra aplicación React, ahora es el momento de iniciar el proyecto. Haga clic en el estudio de lanzamiento para mostrar la puesta en escena sin código.   Haga clic en el botón Iniciar estudio, ya que lo lleva a la página que muestra el entorno de preparación para   .  no código  Aquí, podremos hacer muchas cosas, como crear modelos de datos, autenticación, etc. Pero nuestro enfoque estará en la biblioteca de la interfaz de usuario en la pestaña Diseño.  Haga clic en el botón Comenzar.   Sincroniza con Figma. Este cuadro de diálogo le permitirá pegar el enlace del archivo Figma desde la   .  página Mis componentes  Si es la primera vez que realiza este paso, es posible que necesite autenticación para acceder a su cuenta de Figma.  Obtener componentes de Figma  Acepte todos los cambios de los componentes extraídos de Figma.   Podremos ver todos los componentes de la interfaz de usuario del archivo Figma en Amplify Studio.     de los componentes importados de Figma es el mismo que se muestra en Amplify Studio. FormCheckout  Trabajar con los componentes obtenidos en React  Ahora que tenemos los componentes de la interfaz de usuario obtenidos en Amplify Studio, debemos tener todos los componentes de la interfaz de usuario en nuestra aplicación React.  Para conectar nuestra aplicación con Amplify Studio, debemos extraer los componentes en nuestro código fuente utilizando el enlace de instrucciones de configuración local y ejecutar el comando desde la carpeta raíz del proyecto.   Recuerde que para que este comando funcione, instale la CLI de AWS Amplify globalmente, como se indica en la sección de requisitos previos.  Ejecutar el comando le indicará a nuestro programa un mensaje de autorización.   Haga clic en sí para otorgar permiso a la aplicación React. Después, aparecen una serie de avisos al tirar de los componentes. Acepte el valor predeterminado de las preguntas.  Si encuentra desafíos o algún mensaje de registro de error en la terminal, probablemente sea porque no ha configurado AWS.  Consulta   si te enfrentas a este desafío. esta guía  La instalación crea una nueva carpeta   en el directorio   , que contiene todos los componentes de UI extraídos de Amplify Studio.  ui-components src  Introducción a la biblioteca de la interfaz de usuario de Amplify  La biblioteca Amplify UI React es esencial para el estilo de nuestra aplicación, que es similar a cualquier otra biblioteca de utilidades CSS.  Ejecute este comando:    npm install @aws-amplify/ui-react aws-amplify   Estilos  En el punto de entrada de la aplicación, el archivo index.js, importe el archivo CSS. Copie y actualice el archivo index.js con este código que es responsable de la apariencia de la aplicación:                                   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 > 
   fuentes  La interfaz de usuario de Amplify se envía con las fuentes predeterminadas,   durante la instalación de la dependencia de la interfaz de usuario de Amplify. En el  archivo, copie y pegue los siguientes enlaces CDN de fuentes de Google en el  elemento:  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" 
 /> 
  Visualización de los componentes  Para mostrar los componentes   y   , vaya a la  archivo y eliminar todo el código. FormCheckout NavBar   src/App.js  A continuación, actualice el archivo con este código:                     ); }   // src/App.js 
 import  { FormCheckout, NavBar } from   './ui-components' ; const  App = () =>  {    return  (      <> 
        < NavBar  /> 
        < FormCheckout   marginTop = '5em'  /> 
      </> 
 export   default  App;  La propiedad margin-top proporciona un margen superior entre la barra de navegación y el formulario de pago. El valor de CSS es parte de cómo usar estilos de la interfaz de usuario de Amplify en nuestros componentes.  Inicie el servidor de desarrollo  React viene con una función de recarga en caliente que se actualiza cada vez que hay una actualización en el archivo.  Ejecute este comando:    npm start  El servidor de desarrollo se ejecuta en  .    http://localhost:3000  ¿Quiere implementar esta aplicación React en la web? Consulte   que lo guía paso a paso con AWS Amplify. este recurso  Conclusión  Las herramientas de código bajo con cero o ningún código son lo que ofrece Amplify Studio. Esta herramienta hace que trabajar como desarrollador sea emocionante, ya que parte de nuestro trabajo se ha hecho por nosotros sin construir componentes desde cero o, mejor aún, implementar pantallas del diseñador.  Podemos decir audazmente que la transferencia del diseñador al desarrollador es perfecta.  Este artículo nos enseñó cómo crear e integrar nuestros componentes Figma con la ayuda de Amplify Studio y cómo conectar los componentes a los componentes React que funcionan como una aplicación de trabajo.  El código fuente completo está en este repositorio de   . 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

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Get Free Unlimited IP Geo Data With IPinfo Lite

Transferencia de diseñador a desarrollador: cómo crear un componente de React a partir de un archivo de diseño de Figma

Transferencia de diseñador a desarrollador: cómo crear un componente de React a partir de un archivo de diseño de Figma

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Una breve introducción a la teoría del cerebro de Boltzmann

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Una breve introducción a la teoría del cerebro de Boltzmann

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps