Mais Rápido do Design para o Código? Use Figma Auto Layout e App Builder

Auto Layout é um recurso popular no Figma, uma ferramenta de design vetorial comumente usada para criar especificações de design visual. Uma razão por trás da popularidade do Auto Layout é que ele permite que você crie designs que se adaptam ou redimensionam automaticamente com base em mudanças no tamanho do layout. Enquanto os designers apreciam o aspecto de redimensionamento, isso também traz benefícios ao compartilhar artefatos de entrega para desenvolvimento.

Este artigo foi criado para ajudar designers de UI/UX e desenvolvedores de aplicativos web que trabalham com entregas e querem aproveitar ferramentas em torno de processos de design para código para entregar mais rapidamente do que nunca.

O Problema Com Entregas

Artefatos de entrega representam especificações de UX que são usadas pelos times de desenvolvimento para construir a solução final. No entanto, sempre houve atrito entre artefatos criados pelo time de design e os requisitos dos desenvolvedores. Esse atrito pode ser rastreado até layouts estáticos e especificações criadas em ferramentas de design versus layouts adaptativos para implementação. Esse atrito é agravado ainda mais pelo time de desenvolvimento reimplementar manualmente os designs com base em especificações estáticas. Isso desencadeia um processo de revisão ineficiente para verificar se a implementação corresponde às especificações de design.

A Solução App BuilderTM

O Auto Layout ajuda a preencher os dois mundos de design e desenvolvimento quando se trata de especificar layouts de UI. Usando dimensionamento dinâmico para elementos de UI e posicionamento relativo, designs no Figma terminam mais próximos aos layouts web esperados (ou seja, CSS Flexbox). Mas isso ainda não resolve o problema de ter que (re)implementar designs — e é onde App Builder se encaixa.

Por si só, App Builder permite que times de software projetem e gerem rapidamente aplicativos web para Angular, Blazor e WebComponent do zero. Para designs criados no Figma, App Builder atua como um multiplicador de força ao eliminar a necessidade de implementar manualmente os designs. Se os designs forem criados usando o kit de UI Indigo.Design para Figma, você pode publicar os designs como aplicativos pixel-perfect que podem ser editados no App Builder. Em outras palavras, eliminando especificações estáticas e revisões tediosas. E vai um passo além — o aplicativo criado a partir do Figma faz uso de componentes de UI profissionais, design tokens para temas consistentes e layouts CSS Flexbox baseados nas configurações do Auto Layout.

O Que É Auto Layout no Figma?

O Auto Layout permite que designers criem designs adaptativos que podem acomodar rapidamente qualquer mudança de tamanho no layout ou no conteúdo. Desta forma, o conteúdo projetado se expande ou encolhe conforme necessário, mantendo espaçamento e alinhamento consistentes.

Dado que os usuários controlam a largura de suas janelas de navegador, é melhor evitar usar alturas e larguras fixas, a menos que necessário. Em vez disso, é melhor considerar dimensionamento fluido e espaçamento relativo, de modo que o conteúdo possa se refluxar com base no espaço disponível. Um dos exemplos mais básicos que integra auto layout é um botão, de modo que o tamanho do botão possa se expandir ou encolher com base no texto adicionado.

Como Usar Auto Layout no Figma?

Para ativar o Auto Layout, elementos de UI devem ser adicionados a um Frame no Figma. Frames são como um DIV em layouts web. Após ativar o Auto Layout, os elementos de UI dentro do frame são posicionados relativamente um ao outro, em vez de serem posicionados de forma absoluta (x, y). Posicionar elementos de UI relativamente um ao outro facilita a reorganização dos elementos sem ter que ajustar nenhum espaçamento.

A seguir está um resumo rápido do que está disponível quando o Auto Layout está ativado:

Direção

Define se o empilhamento de camadas filhas é horizontal ou vertical dentro de um contêiner.

• Horizontal - elementos filhos são organizados lado a lado, da esquerda para a direita.
• Vertical - elementos filhos são posicionados um sobre o outro.

Alinhamento

O alinhamento controla como elementos filhos são posicionados dentro de um frame. É possível substituir as configurações de alinhamento para qualquer elemento filho usando posição absoluta. A propriedade de alinhamento pode ter os seguintes valores:

• Superior-esquerdo, Superior-centro, Superior-direito
• Centro-esquerdo, Centro-centro, Centro-direito
• Inferior-esquerdo, Inferior-centro, Inferior-direito
• empacotado/espaço-entre

Espaçamento

Pode ser espaçamento vertical ou horizontal com base na direção e define o espaçamento entre cada elemento filho.

Preenchimento

Determina o espaço em branco ao redor de objetos e pode ser superior e inferior, esquerda e direita, personalizado.

Redimensionamento

Pode ser vertical e horizontal para itens filhos de um Frame, com três valores possíveis:

• Abraçar conteúdo
• Preencher contêiner
• Largura/altura fixa.

Saiba mais sobre como usar Auto Layout

Como o Auto Layout Funciona Com App Builder?

Como mencionado acima, Auto layouts são equivalentes a contêineres CSS Flexbox (DIVS). E a tela do App Builder usa layouts Flexbox nativamente. O valor-chave entregue pelo App Builder é converter seus designs estáticos em aplicativos web que podem ser editados na nuvem. Para obter o melhor resultado, seus designs devem atender a quatro requisitos básicos:

1. Todos os layouts são criados usando Figma Auto Layout (com Frames)
2. Os designs são criados usando componentes do kit de UI Indigo.Design
3. Tipografia e cores são definidas com base em tokens do kit de UI
4. Para extrair partes da UI como uma ilustração vetorial (SVG), marque camada para exportação no Figma

E finalmente, você precisará do plugin Indigo.Design Figma para exportar seus designs como um aplicativo finalizado. Confira nosso anterior post do blog onde descrevemos o processo de ir do design para o código.

Acelerando o Processo de Design para Código

Figma Auto Layout é um recurso que ajuda designers a criar designs de UI mais rápido e fácil. Ele faz isso:

• Ajustando automaticamente o tamanho dos objetos com base no tamanho do layout ou no conteúdo.
• Garantindo que o espaçamento em seu design seja consistente, mesmo quando fica mais complicado.
• Ao posicionar elementos de UI relativamente um ao outro, o design funciona bem em todos os dispositivos.
• Os desenvolvedores também vão adorar porque as especificações de design estão mais próximas do que eles esperam, especialmente para web design.

App Builder adiciona valor ao processo de entrega eliminando a necessidade de reimplementar os designs. Isso torna o processo de ir do design para o código mais rápido e confiável. Quando os designs são publicados usando o plugin Indigo.Design para Figma, App Builder converte automaticamente os designs estáticos em um aplicativo web.

O aplicativo web resultante ganha vários benefícios:

• Faz uso de layouts CSS Flexbox.
• Componentes estáticos são substituídos por componentes de UI prontos para produção.
• Variáveis para cores e tipografia que estão vinculadas a um tema global.
• Permite que desenvolvedores editem o aplicativo web e gerem código-fonte do aplicativo para Blazor, Angular e Web Components.

Pronto para tentar?

Desenvolvimento Web