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

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
• Node >= 14.0.0 y npm >= 5.6 instalados en nuestra máquina local para la instalación del paquete
• 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 comunidad de AWS después de crear una cuenta y busque 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:

La página Primitives : 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 Mis componentes : esta página le brinda control para editar, cambiar y crear componentes, y viene con componentes prediseñados.

La página Ejemplos : esta página muestra los diseños de ejemplo de algunos componentes personalizados de la página Mis componentes.

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 cuenta y busque AWS Amplify.

Seleccione AWS Amplify de la lista de servicios. Una vez en el panel Todas las aplicaciones , haga clic en el botón Nueva aplicación y seleccione Crear una aplicación en el menú desplegable.

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.

FormCheckout de los componentes importados de Figma es el mismo que se muestra en Amplify Studio.

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 esta guía si te enfrentas a este desafío.

La instalación crea una nueva carpeta ui-components en el directorio src , que contiene todos los componentes de UI extraídos de Amplify Studio.

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:

 // 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 >
);

fuentes

La interfaz de usuario de Amplify se envía con las fuentes predeterminadas, Inter durante la instalación de la dependencia de la interfaz de usuario de Amplify. En el

 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> ...

Visualización de los componentes

Para mostrar los componentes FormCheckout y NavBar , vaya a la

 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 este recurso que lo guía paso a paso con AWS Amplify.

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 .