Projetar um aplicativo usando o Figma UI kit

Concluído

Se você quiser criar um design de aplicativo do Figma para usar na criação de um aplicativo de tela, precisará usar componentes que fazem parte do Figma UI Kit. Este kit contém muitas representações gráficas dos componentes do Power Apps esperados em um aplicativo, como:

  • Formulários, cartões de dados e seções

  • Entrada de texto, listas suspensas e compartimentos de combinação

  • Alternâncias, caixas de seleção e botões de opção

  • Controles deslizantes e classificações

  • Seletores de data e temporizadores

  • Imagens e retângulos

Usar o Figma UI Kit

Os principais conceitos para saber quando você está projetando um aplicativo usando o Figma UI Kit incluem:

  • Use a fonte Segoe UI para obter melhores resultados de renderização. Você poderá baixar a fonte, se ainda não a tiver.

  • Use apenas os componentes disponíveis na página Componentes com suporte do kit.

  • Mantenha os nomes dos componentes intactos. Para evitar problemas, você só pode renomear páginas durante a conversão para um aplicativo de tela.

  • Verifique se os componentes fornecidos que são criados com camadas específicas permanecem inalterados.

  • Use imagens que convertem exatamente como são para os seguintes componentes sem suporte:

    • Gráficos

    • Ícones

    • Formas

  • Nomeie a tela msft_Ignore em situações em que você não deseja incluir uma tela na conversão do aplicativo.

Comece a usar o Figma UI Kit

Para criar um aplicativo usando o Figma UI Kit, siga estas etapas:

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

  2. Selecione Abrir no Figma.

    Captura de tela da página da Web do Figma UI Kit. O foco está na opção Abrir no Figma.

  3. A tela navega para Figma.

Se for a primeira vez que você usa o Figma UI Kit ou se precisar atualizar as instruções, examine a página de Capa que orienta você quanto às informações do kit e as quatro etapas que descrevem como usar o kit no Figma.

Captura de tela do Figma UI Kit no estúdio do Figma. O foco está no painel de navegação Páginas.

Próximas etapas

Agora você aprendeu sobre as etapas básicas para usar o Figma UI Kit para criar um design de aplicativo. Sua próxima etapa é aprender a criar um aplicativo específico para uma loja de consertos de bicicletas usando o Figma UI Kit.