Handoff de designer para desenvolvedor: como criar um componente React a partir de um arquivo de design Figma

Como todos sabemos, parte do trabalho de um desenvolvedor de produto é converter o design do Figma em código com uma estrutura de escolha, e pode ser complexo se o projeto for significativo. A essência da transferência de designer para desenvolvedor é que o desenvolvedor implementa as telas do design em componentes exatos e com pixels perfeitos.

Neste artigo, estenderemos a funcionalidade do AWS Amplify Studio para criar um aplicativo do Figma e importar os componentes para o React. A conexão entre Figma e React, com a ajuda do Amplify, cria componentes React reutilizáveis que economizam seu tempo e evitam escrever longas linhas de código. O processo de conversão do Figma para o código é contínuo e torna eficiente para os desenvolvedores construírem mais rapidamente (o que provavelmente é o motivo pelo qual a Abode adquiriu o Figma por bilhões ).

Pré-requisitos

Para entender e completar este guia, é necessário o seguinte:

• Uma conta Figma. A inscrição é gratuita
• Node >= 14.0.0 e npm >= 5.6 instalados em nossa máquina local para instalação de pacotes
• Um editor de código
• Instale a CLI do AWS Amplify em nosso terminal. Execute este comando:

 npm install -g @aws-amplify/cli

• Conhecimento de JavaScript e React
• Tenha uma conta da AWS. Registre-se para uma conta aqui

Criando um kit de modelo de interface do usuário no Figma

Antes de criarmos os componentes React a partir do UI kit, precisamos configurar o projeto Figma. Uma vez no Figma, vá para a comunidade AWS depois de criar uma conta e procure o arquivo Figma do kit AWS Amplify UI .

Clique em “Get a copy” para duplicar ou clonar uma cópia do UI kit.

O kit Amplify UI vem instalado com algumas páginas pré-construídas, que são:

A página Primitives : esta página vincula-se ao AWS Amplify Studio, que compreende todos os estilos para os componentes pré-criados. Alterar o conteúdo desta página afetará a aparência da biblioteca React UI dos componentes Figma.

A página Meus componentes : esta página oferece controle para editar, alterar e criar componentes e vem com componentes pré-construídos.

A página Exemplos : Esta página mostra os designs de exemplo de alguns componentes personalizados da página Meus componentes.

Este tutorial usará dois componentes da página Meus componentes: NavBar e FormCheckout UI.

Criando um projeto Amplify

Com a configuração concluída no Figma, vá para o console AWS para criar um novo projeto Amplify. Faça login em sua conta e procure por AWS Amplify.

Selecione AWS Amplify na lista de serviços. Uma vez no painel Todos os aplicativos , clique no botão Novo aplicativo e selecione Criar um aplicativo no menu suspenso.

Dê um nome ao aplicativo e clique em confirmar implantação para criar o aplicativo.

Com a implantação do projeto Amplify, vamos criar um novo aplicativo React.

Criando um aplicativo React

Para criar um novo aplicativo React, vá até o seu terminal e cole o seguinte comando:

 npx create-react-app no-code

Este comando descompacta todos os arquivos e pastas necessários para criar um aplicativo da Web bonito e escalável.

Inicie o Amplify Studio

Depois de instalar nosso aplicativo React, agora é hora de iniciar o projeto. Clique no estúdio de inicialização para exibir a preparação do no code.

Clique no botão de lançamento do estúdio, pois ele o levará à página que mostra o ambiente de teste para no-code .

Aqui, poderemos fazer muitas coisas, como criar modelos de dados, autenticação e assim por diante. Mas nosso foco estará na biblioteca de interface do usuário na guia Design.

Clique no botão Começar.

Sincronize com Figma. Esta caixa de diálogo permitirá que você cole o link do arquivo Figma da página Meus componentes .

Se esta é a primeira vez que você executa esta etapa, pode ser necessária autenticação para acessar sua conta Figma.

Obtendo Componentes do Figma

Aceite todas as alterações dos componentes extraídos da Figma.

Poderemos visualizar todos os componentes da interface do usuário do arquivo Figma no Amplify Studio.

O FormCheckout dos componentes importados do Figma é o mesmo exibido no Amplify Studio.

Trabalhando com os componentes buscados em React

Agora que temos os componentes de interface do usuário buscados no Amplify Studio, devemos ter todos os componentes de interface do usuário em nosso aplicativo React.

Para conectar nosso aplicativo com o Amplify Studio, precisamos obter os componentes em nosso código-fonte usando o link Instruções de configuração local e executar o comando na pasta raiz do projeto.

Lembre-se de que, para que esse comando funcione, instale a CLI do AWS Amplify globalmente, conforme indicado na seção de pré-requisitos.

A execução do comando solicitará ao nosso programa uma mensagem de autorização.

Clique em sim para conceder permissão ao aplicativo React. Depois, uma série de prompts aparecem ao puxar os componentes. Aceite o padrão para as perguntas.

Se você encontrar desafios ou qualquer mensagem de log de erro no terminal, provavelmente você não configurou a AWS.

Confira este guia se você enfrentar esse desafio.

A instalação cria uma nova pasta ui-components no diretório src , que contém todos os componentes de UI retirados do Amplify Studio.

Introdução à biblioteca Amplify UI

A biblioteca Amplify UI React é essencial para os propósitos de estilo de nosso aplicativo, que é semelhante a todas as outras bibliotecas de utilitários CSS.

Execute este comando:

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

estilos

No ponto de entrada do aplicativo, o arquivo index.js, importe o arquivo CSS. Copie e atualize o arquivo index.js com este código que é responsável pela aparência do aplicativo:

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

Fontes

O Amplify UI vem com as fontes padrão, Inter durante a instalação da dependência do Amplify UI. No

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

Exibindo os componentes

Para exibir os componentes FormCheckout e NavBar , navegue até o

 src/App.js

Em seguida, atualize o arquivo com este código:

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

A propriedade margin-top fornece uma margem superior entre a barra de navegação e o formulário de checkout. O valor CSS faz parte de como usar estilos da interface do usuário do Amplify em nossos componentes.

Iniciar o servidor de desenvolvimento

O React vem com um recurso de hot-reload que se atualiza toda vez que há uma atualização no arquivo.

Execute este comando:

 npm start

O servidor de desenvolvimento é executado em

 http://localhost:3000

Quer implantar este aplicativo React na web? Confira este recurso que orienta você passo a passo usando o AWS Amplify.

Conclusão

Ferramentas de baixo código com zero ou nenhum código são o que o Amplify Studio oferece. Essa ferramenta torna o trabalho do desenvolvedor empolgante, pois parte do nosso trabalho foi feito para nós sem construir componentes do zero ou, melhor ainda, implementar telas do designer.

Podemos dizer com ousadia que a transferência do designer para o desenvolvedor é perfeita.

Este artigo nos ensinou como criar e integrar nossos componentes Figma com a ajuda do Amplify Studio e conectar os componentes aos componentes React que funcionam como um aplicativo funcional.

O código-fonte completo está neste repositório do GitHub .