Exercício: projetar um aplicativo de loja de consertos de bicicletas usando o Figma

  • 12 minutos

Neste exercício, você usará o Figma UI Kit para explorar determinados componentes e criar um aplicativo de loja de consertos de bicicletas.

Cenário

Você trabalha em uma loja de bicicletas e é responsável por uma próxima venda VIP. Você precisa planejar a venda com base nas preferências do cliente para tópicos de apresentação.

Você deseja criar um aplicativo de tela em que seus colegas possam registrar participantes em potencial e coletar as preferências dos participantes usando um tablet dedicado.

Seu objetivo é projetar o aplicativo e permitir que o proprietário da loja e o diretor de marketing o examinem e forneçam recomendações.

O aplicativo deve permitir que você e seus colegas coletem as seguintes informações:

  • Nome, email e telefone do cliente

  • Opções para um tópico de apresentação preferido:

    • Preparação física e mental para corridas

    • Cinco (5) práticas recomendadas fora da temporada

    • Dicas de manutenção preventiva

    • Como selecionar o tamanho da bicicleta para jovens e adultos

Exercício

Assista ao vídeo a seguir para obter uma demonstração das etapas desta unidade.

  1. Vá para a página da Web do Figma UI Kit.

  2. Selecione Abrir no Figma.

    Captura de tela da página do Figma UI Kit, mostrando a opção Abrir no Figma selecionada.

  3. Em Arquivo no painel de navegação esquerdo, selecione o símbolo de mais (+) ao lado de Páginas para criar uma tela para o design do aplicativo.

    Captura de tela do painel de navegação esquerdo do estúdio do Figma. O foco está na guia Arquivo e no sinal de adição ao lado de Páginas.

  4. Renomeie a página como Bicycle VIP event.

    Captura de tela do painel de navegação esquerdo do estúdio do Figma. O foco está na página que está sendo renomeada para Bicycle V I P event.

  5. Na seção Ativos do estúdio, selecione o fator forma Tablet e selecione Inserir instância.

    Captura de tela do estúdio do Figma. O foco está no componente Tela do tablet localizado na seção Ativos do painel de navegação esquerdo.

  6. Para permitir a adição de componentes na tela, você precisa desconectar a tela primeiro. Selecione Desanexar instância no menu de contexto clicando com o botão direito do mouse no componente de tela.

    Captura de tela do componente de tela no estúdio do Figma. O foco está na opção Desanexar instância no menu de contexto.

  7. Remova a caixa de texto informativa selecionando-a e pressionando a tecla Delete no teclado.

    Captura de tela do componente de tela no estúdio do Figma. O foco está na caixa de texto no componente de página.

  8. Para renomear o componente da tela, clique duas vezes no rótulo localizado na parte superior do componente da tela e digite Home Screen como seu nome.

    Captura de tela do componente de tela no estúdio do Figma. O foco está no rótulo do componente.

  9. Adicione os componentes necessários da lista Tablet. Esses componentes permitem que os funcionários registrem clientes para o evento.

    1. Na área de componentes Tablet, na seção 00 Scrollable, adicione um componente Form.

    2. Redimensione e mova o formulário para ter as seguintes coordenadas e dimensões:

      • X = 0

      • Y = 60

      • Width = 1366

      • Height = 648

    3. Siga as instruções no etapa 7 para desanexar o formulário.

      Captura de tela do estúdio do Figma, mostrando o componente Form e as coordenadas de Frame e definição de dimensão na seção Frame do painel de navegação direito.

    4. No canto superior esquerdo, selecione Camadas e, em Home Screen e msft_Form, remova o rótulo do texto informativo selecionando-o e pressionando o botão Excluir no teclado.

      Captura de tela do estúdio do Figma. O foco está no componente de texto localizado no painel de navegação esquerdo.

  10. No formulário, adicione os campos de entrada para capturar as informações do cliente para o evento. Considerando o fator forma do tablet e a entrada de dados em um componente de formulário, selecione todos os novos componentes na seção Tablet/Horizontal DataCards no painel de navegação esquerdo Ativos.

    Captura de tela do estúdio Figma. O foco está no menu de trilha de navegação que mostra que os ativos são provenientes das seções Ativos Locais e Tablet localizadas abaixo de Ativos no painel de navegação esquerdo.

  11. Adicione os seguintes componentes e, usando o painel de navegação direito, defina as propriedades do componente. Para alterar a propriedade Text de cada um, selecione três vezes o texto no próprio componente até que seja mostrado um realce azul sobre o texto e digite o texto:

    • 00 Header, Dividers (uma caixa de texto de título com as seguintes propriedades):

      Texto: Formulário de inscrição em Evento VIP

    Captura de tela do estúdio do Figma. O foco está no texto Tablet Horizontal DataCards list of components localizado em Ativos no painel de navegação esquerdo.

    • 03 TextInput, Dropdown, ComboBox (uma caixa de texto de entrada para capturar o nome de um cliente):

      Texto: Nome do Cliente:

    • 03 TextInput, Dropdown, ComboBox (uma caixa de texto de entrada para capturar um endereço de email do cliente):

      Texto: Email do Cliente:

    • 03 TextInput, Dropdown, ComboBox (uma caixa de texto de entrada para capturar um número de telefone do cliente):

      Texto: Número de Telefone:

    • 04 Toggle, CheckBox, Radio (um conjunto de opções de apresentação para selecionar):

      • Texto: Preferências de Apresentação:

      • Rótulos de opção:

        • Preparação física e mental para corridas

        • Cinco (5) práticas recomendadas fora da temporada

        • Dicas de manutenção preventiva

        • Como selecionar o tamanho da bicicleta para jovens e adultos

  12. Adicione um botão Enviar fora do formulário e defina a propriedade X como 1194 e a propriedade Y como 580. Altere o texto do botão para ser Submit.

    Captura de tela do estúdio do Figma com o componente de botão, o botão Enviar e a seção de coordenadas do quadro.

Próximas etapas

Agora você aprendeu a projetar um aplicativo usando o Figma UI Kit, que pode ser usado para criar um aplicativo de tela. A próxima etapa é aprender a criar um aplicativo de tela com base em um design do Figma.