Você está preso em um silo de design? - Indigo.Design Whitepaper

Saia do Silo de Design com Design to Code

Desde o lançamento oficial do Sketch em 2010, as ferramentas de design de software transformaram o design de aplicações — tornando mais simples e rápido criar designs digitalmente, compartilhá-los com outros designers e usuários na nuvem e, por fim, transformá-los em protótipos funcionais.

Mas o design é apenas uma etapa no processo de transformar o design/protótipo em uma aplicação funcional. O desafio é que muitos produtos de design deixam você preso em um silo de design — você pode ter um protótipo, mas nenhum processo fluido para transformá-lo em um aplicativo concluído. E a tradicional transferência entre designer e desenvolvedor é assolada por falhas de comunicação, atrasos e erros.

O que é necessário? Um processo de design to code que permita que designers e desenvolvedores usem, cada um, suas ferramentas favoritas — Sketch ou Figma para designers, por exemplo, ou Visual Studio ou uma IDE preferida para desenvolvedores — mas que ofereça integração/extensibilidade de ferramentas em uma cadeia de ferramentas ou plataforma padronizada.

O resultado: a capacidade de pegar designs/protótipos estáticos, como arquivos do Sketch ou Figma, e trabalhar com desenvolvedores para gerar rapidamente código pronto para produção em Angular ou Blazor. Este whitepaper descreverá essa integração de design to code com mais detalhes.

Os Silos de Design

Após o lançamento oficial do Sketch, as ferramentas de design de software evoluíram para oferecer formas mais rápidas e eficientes de projetar aplicativos e construir protótipos. Figma, Adobe XD e Zeplin são algumas que surgiram para desafiar o Sketch.

Quando observadas de uma perspectiva isolada, essas ferramentas contribuíram drasticamente para melhorar o processo de criação de aplicativos. Mas quando analisadas de forma holística, considerando todo o processo necessário para construir uma aplicação completa do design ao código, elas resolvem apenas parte do problema — e deixam você no que chamamos de “silo de design”.

O que queremos dizer com silo de design?

O design é apenas uma etapa em um processo de design de produto digital, que deve incluir tudo o que é necessário para construir uma aplicação funcional que atenda às necessidades do usuário-alvo — alguma combinação de design de telas, fluxos de usuário, coedição, testes com usuários, sistemas de design, prototipagem e geração de código. Também conhecido como design to code.

Os elementos dessa plataforma de design de produto digital são mostrados no diagrama abaixo.

A Infragistics lançou uma plataforma completa de design de produto digital, chamada App Builder™. Testes internos preliminares mostram a capacidade de construir aplicativos até 10x mais rápido quando todos esses elementos são incluídos em uma única plataforma integrada.

Ao considerar o processo completo de design to code, veja como as ferramentas de design de hoje deixam você em um silo de design:

Sketch

Figma

Adobe XD

Zeplin

Apenas para Mac
Sem testes com usuários
Sem geração de código
Colaboração limitada

Sem testes com usuários
Sem geração de código

Sem testes com usuários
Sem geração de código
Colaboração limitada

Sem prototipagem
Sem testes com usuários
Sem geração de código
Colaboração limitada

Como você pode ver, a maioria dessas ferramentas de software de design carece de testes com usuários, oferece colaboração limitada e nenhuma delas oferece geração de código — não resolvendo o problema histórico da transferência entre design e desenvolvimento.

Saindo dos Silos de Design

Os líderes de tecnologia de aplicações devem entender os principais recursos das plataformas de design de produto digital e implantar uma ferramenta que cubra tudo, desde o design de telas até a geração de código.

Gartner, Technology Insight for Digital Product Design Platforms1

Como mencionado anteriormente, uma solução de design to code permite que você saia dos silos de design e resolva os bloqueios de longa data que têm retardado a criação de aplicativos por anos — superando as transferências lentas, sujeitas a erros e frustrantes que têm dificultado a colaboração entre design e desenvolvimento por anos.

Com uma plataforma de design de produto digital como o App Builder, as equipes de design e desenvolvimento trabalham em uma única plataforma e compartilham um sistema de design comum — acelerando drasticamente a construção de aplicativos. Designers e desenvolvedores podem colaborar facilmente, compartilhando design de telas e protótipos, por exemplo, e visualizando o código real ou a aplicação com componentes reais antes que o código seja gerado. Isso elimina a transferência incômoda, reduz a frustração e garante que a aplicação finalizada atenda às expectativas de todos — gerentes de produto, designers e desenvolvedores.

Aqui estão algumas das capacidades específicas que uma plataforma de design de produto digital deve oferecer:

• Um sistema de design flexível – um inventário de padrões de UX e diretrizes de estilo de marca que se mapeiam para componentes de software que podem ser reutilizados ou contextualizados para a construção de aplicações de software.

• Funciona com as ferramentas vetoriais favoritas do seu designer, como Sketch ou Figma, com suporte completo para Figma em breve.

• Colabore com sua equipe, stakeholders e clientes nas iterações de design por meio de workspaces seguros com comentários encadeados em qualquer protótipo.

• Testes com usuários remotos e não moderados ilimitados, com análises em tempo real.

• Ferramenta de inspeção (assim como o Zeplin) para obter código CSS, cores e tamanho/posicionamento a partir dos seus designs.

• Design e construção de aplicativos WYSIWYG, com pré-visualização de código em tempo real e geração de código para Angular e Blazor, e em breve com React e Web Components.

Design to Code se Baseia no Low Code

As soluções de design to code fazem parte do movimento low-code. Assim como as ferramentas low-code eliminam a necessidade de escrever milhares de linhas de código, uma plataforma de design de produto digital fornece os blocos de construção que retiram o tempo, a frustração e os possíveis bugs de UX do design de telas, dos fluxos de usuário e da geração de código.

Aqui está um panorama de como as ferramentas low-code serão impactantes para empresas e organizações de todos os tamanhos:

Plataforma de Design to Code

Para designers e desenvolvedores que desejam a forma mais rápida de ir do design ao código e não estão interessados em recursos iniciais como testes com usuários, o App Builder permite que você pegue designs estáticos do Figma ou do Sketch e obtenha aplicativos interativos e responsivos, com componentes de UI reais e estilização. O App Builder é uma ferramenta low-code, baseada em nuvem, WYSIWYG e de arrastar e soltar que permite aos desenvolvedores, assim que os designers concluírem seus protótipos, visualizar o código-fonte em tempo real. Quando estiver pronto, os desenvolvedores podem gerar rápida e facilmente código pronto para produção em Angular ou Blazor e enviá-lo para um repositório do GitHub ou executá-lo no Visual Studio Code ou em sua IDE favorita.

Para designers que buscam a velocidade do design to code, mas também desejam um foco adicional em design de telas, fluxos de usuário, prototipagem e testes com usuários, eles podem usar o App Builder low-code.

Para ver como você pode ir da ideia ao código em menos de 1 minuto, entre em contato conosco para uma demonstração hoje mesmo, ou assista a este vídeo curto que transforma um design vetorial do Sketch em código Angular utilizável, testável e atualizável!

Fontes

1. Gartner, “Technology Insight for Digital Product Design Platforms,” November 24, 2020, Brent Stewart, Van Baker, Magnus Revang
2. Gartner forecast, February, 2021