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    instalados em nossa máquina local para instalação de pacotes Node >= 14.0.0 e npm >= 5.6  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   depois de criar uma conta e procure   .  comunidade AWS 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:    : 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 Primitives    : esta página oferece controle para editar, alterar e criar componentes e vem com componentes pré-construídos. A página Meus componentes    : Esta página mostra os designs de exemplo de alguns componentes personalizados da página Meus componentes. A página Exemplos  Este tutorial usará dois componentes da página Meus componentes:   e   UI.  NavBar FormCheckout  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   e procure por AWS Amplify.  conta  Selecione AWS Amplify na lista de serviços. Uma vez no painel   , clique no botão   e selecione   no menu suspenso.  Todos os aplicativos Novo aplicativo Criar um aplicativo  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.     dos componentes importados do Figma é o mesmo exibido no Amplify Studio. O FormCheckout  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   se você enfrentar esse desafio. este guia  A instalação cria uma nova pasta   no diretório   , que contém todos os componentes de UI retirados do Amplify Studio.  ui-components src  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:                                   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 > 
   Fontes  O Amplify UI vem com as fontes padrão,   durante a instalação da dependência do Amplify UI. No  arquivo, copie e cole os seguintes links CDN de fontes do Google no  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" 
 /> 
  Exibindo os componentes  Para exibir os componentes   e   , navegue até o  arquivo e remova todo o código. FormCheckout NavBar   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   que orienta você passo a passo usando o AWS Amplify. este recurso  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

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 áudio é produzido no idioma original da história!

Muito longo; Para ler

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

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps