Como passar de um arquivo de design simples para um código pronto para produção? É fácil com App Builder e agora você tem todas as maneiras e etapas descritas nesta postagem do blog.
Jason Beres
8min de leitura
Um dos maiores desafios para uma equipe de desenvolvimento é obter código limpo de um design Sketch aprovado e bem construído.
Um dos maiores desafios para uma equipe de design é comunicar esse design em Sketch de uma forma que não faça com que as equipes alternem entre várias iterações de design e linhas intermináveis de código reescrito após cada revisão.
Portanto, neste artigo, mostrarei como traduzir designs de Sketch em front-end quase perfeito em pixels e gerar código pronto para produção.
Vamos começar!
Sketch é um aplicativo de design digital que combina um poderoso aplicativo nativo para Mac com recursos de colaboração na nuvem. O aplicativo fornece as ferramentas que um designer precisa para criar wireframes, maquetes, protótipos e até mesmo ativos prontos para produção a partir de suas ideias de design.
No lado da nuvem, a Sketch criou um conjunto de ferramentas de colaboração que tornam mais fácil para os designers compartilhar o trabalho com colegas de equipe, obter feedback, testar ideias com visualizações de protótipos e entregar designs aos desenvolvedores.
Sketch-to-code é o processo de simplificar e acelerar o processo de transformar Sketch designs em código de trabalho. Ele aborda os desafios que atormentam designers e desenvolvedores há anos: que, embora os designers se esforcem muito para criar soluções digitais que sejam perfeitamente medidas e consistentemente elaboradas, os sistemas de design não se traduzem fluentemente em sistemas de desenvolvimento.
Aqui estão as partes de uma exportação Sketch para código:
O processo aborda os desafios que atormentam designers e desenvolvedores há anos: que, embora os designers se esforcem muito para criar soluções digitais perfeitamente medidas e consistentemente elaboradas, os sistemas de design não se traduzem fluentemente em sistemas de desenvolvimento. E então, há os desenvolvedores que normalmente não têm o hábito de codificar com HTML e CSS. O que, em geral, é um trabalho tedioso e representa apenas a interface do usuário.
No mundo real, o processo de passar do design ao código inclui muitas partes interessadas e é um processo altamente iterativo. Inclui a criação de quadros de arte ou maquetes visuais, colaboração com equipes internas de design, criação de protótipos, realização de testes de usabilidade para entender como é fácil para usuários reais usarem e, em seguida, transferir as especificações para um desenvolvedor, que então reconstrói os protótipos e escreve o código da interface do usuário para torná-lo parecido com o que foi especificado.
Parte do problema é que quanto mais o designer faz com uma interface, mais ele deve se comunicar com um desenvolvedor. Portanto, não basta entregar um arquivo de design Sketch e deixar o desenvolvedor executá-lo. Os designers devem fornecer especificações de design que expliquem como todas as peças móveis precisam ser dispostas, espaçadas, estilizadas, coloridas, engajadas e assim por diante.
Tem sido a única maneira de garantir que um aplicativo termine perfeito em pixels no final. Mesmo assim, ainda requer muita implementação por parte do desenvolvedor, uma vez que ele está dentro de seu IDE.
A vantagem de uma plataforma Sketch-to-code é que ela permite gerar HTML, CSS e código Angular, Blazor e Web Components diretamente do seu design. As melhores plataformas incluem um sistema de design e usam componentes reais da interface do usuário para produzir código limpo e de alta qualidade.
Mas ao longo dos anos, com a necessidade de transformar projetos em aplicativos codificados e acabados com a mesma facilidade com que Sketch designers criavam projetos, ficou claro que estava ocorrendo um colapso na transferência de designer-desenvolvedor, que estava repleta de ineficiências.
Como resultado, um forte movimento de design para código surgiu nos últimos anos, com os fabricantes de aplicativos low-code continuando de onde outras plataformas, como Sketch, pararam. O objetivo é criar um processo contínuo, consistente e fácil de usar que garanta que Sketch designs possam ser facilmente transformados em código utilizável.
Em resumo, o WYSIWYG App Builder de baixo código é único porque é uma solução completa de design para código que atende a tudo. Ou o que o Gartner chama de "plataforma de design de produto digital".
"Na era do trabalho remoto e das equipes distribuídas, a colaboração visual em tempo real e a coedição são essenciais para a inovação. As plataformas de design de produtos digitais estão atuando como o novo quadro branco para toda a equipe de produtos digitais." -Gartner, Technology Insight for Digital Product Design Platforms
Os benefícios e o que a plataforma de arrastar e soltar App Builder alcança:
Só para ter uma ideia melhor de como funciona, você pode testá-lo facilmente.
Aqui estão os 5 passos rápidos para você passar de um arquivo de design Sketch para limpar o código com o App Builder com um arrastar e soltar.
Passo 1: Abra https://my.appbuilder.dev
Faça login na sua conta ou inicie uma avaliação gratuita do App Builder. Clique em Novo aplicativo na tela inicial para começar a criar um novo aplicativo Angular, Blazor ou Web Components a partir de um arquivo Sketch.
Passo 2: Clique na guia Importar designs
Depois de fazer login com sucesso com sua conta, clique na guia "importar designs".
Etapa 3: Arraste seu arquivo Sketch
Depois disso, a próxima coisa a fazer é arrastar o arquivo que você escolheu para a área "Soltar Sketch arquivo" que você vê na captura de tela abaixo.
Passo 4: Revisar o design no App Builder Cloud IDE
Levará alguns segundos para gerar seu aplicativo. Este é o momento em que você poderá revisar o design no IDE e escolher uma plataforma de destino.
Passo 5: Revise e baixe seu aplicativo
Você pode usar o botão do círculo de reprodução no canto superior direito do IDE para visualizar e gerar seu aplicativo e ver o código. Aqui você pode ver a opção Visualizar com seu aplicativo em execução e seu código de HTML, CSS e TypeScript.
Depois disso, você pode baixar seu código de maneira fácil e rápida como um arquivo zip ou publicar no GitHub.
Sketch Baixar ativos
Você pode baixar facilmente o plug-in Sketch, o kit de interface do usuário e os aplicativos de amostra na página Baixar ativos.
Ou através dos seguintes links:
Muitos acreditam que a melhor maneira de converter arquivos Sketch para HTML é escrevendo seu próprio CSS/HTML por estes motivos:
Não importa a abordagem - é demorada, complicada e propensa a erros. Mas automatizar o processo de design para código com App Builder não apenas ajuda a transformar arquivos de design em aplicativos perfeitos em pixels com um clique, mas também elimina gargalos críticos de geração de código.
Saiba mais sobre como nosso App Builder low-code funciona com o Sketch e veja vídeos de como criar pranchetas no Sketch, criar protótipos e gerar código no Visual Studio na página de documentação de ajuda detalhada.
Também lançamos uma visão geral e um tutorial abrangentes App Builder do produto. Você pode assisti-lo abaixo para aprender tudo sobre seus recursos e capacidades e começar a usá-lo.
De acordo com estatísticas low-code da Forrester, "91% dos tomadores de decisão de TI e negócios responsáveis por iniciativas de transformação digital em empresas nos EUA, Reino Unido, Canadá e Austrália usam low-code para melhorar os recursos de TI existentes para promover agilidade e inovação". E agora, eles também são usados como ferramentas para melhorar a produtividade do desenvolvedor. Mas como?
Como passar de um arquivo de design simples para um código pronto para produção? É fácil com App Builder e agora você tem todas as maneiras e etapas descritas nesta postagem do blog.
Não basta entregar um Sketch ou Figma arquivo de design, por exemplo, e deixar o desenvolvedor correr com ele. As equipes precisam de uma única plataforma que atue como um "multiplicador de força" – uma plataforma de design de produto eficiente.
