Criar um aplicativo de tela com base em um design do Figma

  • 7 minutos

Usando o Figma UI Kit para o Power Apps, você pode criar um aplicativo de tela que pode ser conectado a uma fonte de dados e disponibilizado aos usuários na organização.

As primeiras etapas necessárias para esse processo envolvem a obtenção de informações de conectividade do Figma para o Power Apps Studio:

  1. No estúdio do Figma, selecione Voltar aos arquivos.

    Captura de tela do painel de navegação esquerdo do estúdio do Figma. O foco está na opção Voltar aos arquivos.

  2. Selecione Configurações no menu ao lado do nome do perfil do Figma.

    Captura de tela do painel de navegação esquerdo da seção Voltar aos arquivos no estúdio do Figma. O foco está na opção Configurações.

  3. Na nova janela, em Tokens de acesso pessoal na seção Conta, selecione Gerar novo token.

    Captura de tela da janela de configuração de configurações. O foco está na opção Gerar novo token na seção Tokens de acesso pessoal em Conta.

  4. Na nova janela, forneça um nome para o token, como Power Apps e selecione Gerar token.

    Captura de tela da janela Gerar novo token. O foco está no nome do token e na opção Gerar token.

  5. Um novo token é gerado. Selecione Copiar este token para usá-lo posteriormente neste processo.

    Captura de tela da janela de configuração de configurações. O foco está na opção Copiar este token na seção Tokens de acesso pessoal.

  6. No Power Apps Studio, na seção Início, selecione o bloco Iniciar com um design de página.

    Captura de tela do Power Apps Studio. O foco está no bloco Iniciar com um design de página na seção Início.

  7. Selecione o bloco Uma imagem ou arquivo do Figma.

    Captura de tela do Power Apps Studio. O foco está no bloco Uma imagem ou arquivo do Figma.

  8. Selecione o bloco Iniciar do Figma e Avançar.

    Captura de tela do Power Apps Studio. O foco está no bloco Iniciar do Figma e na opção Avançar.

  9. Insira um nome no campo Nome do aplicativo e cole o token obtido na etapa 5 no campo Token de acesso pessoal do Figma.

    Captura de tela do Power Apps Studio. O foco está no nome do aplicativo e nos campos do token de acesso pessoal do Figma.

  10. No estúdio do Figma, retorne ao design do aplicativo e selecione Copiar link para a página no menu de contexto da página que deseja converter em um aplicativo de tela.

    Captura de tela do estúdio do Figma. O foco está na opção Copiar link para a página.

  11. No Power Apps Studio, cole o link no campo Link para o Figma ou quadro e selecione Criar aplicativo.

    Captura de tela do Power Apps Studio. O foco está na página ou quadro Vincular ao Figma e nas opções Criar aplicativo.

O aplicativo de tela está disponível para modificação no Power Apps Studio.

Captura de tela do Power Apps Studio com o aplicativo de tela recém-criado.

Agora, você pode conectar o formulário a uma fonte de dados. Além disso, você pode complementar o aplicativo usando o Microsoft Power Fx e todos os controles disponíveis no Power Apps para fornecer uma experiência avançada aos usuários do aplicativo.

Etapas do exercício (vídeo)

O vídeo a seguir demonstra as etapas do exercício desta unidade.

Próximas etapas

Agora você aprendeu a criar um aplicativo de tela com base em um design usando o Figma UI Kit. Sua próxima etapa é aprender a criar um aplicativo de tela com base no design do Figma que você criou para a oficina de bicicletas.