Crear una aplicación de lienzo basada en un diseño de Figma

  • 7 minutos

Utilizando el kit de UI de Figma para Power Apps puede crear una aplicación de lienzo que puede conectar a un origen de datos y, a continuación, ponerla a disposición de los usuarios de su organización.

Los primeros pasos que se requieren para este proceso implican obtener información de conectividad de Figma al estudio de Power Apps:

  1. En el estudio de Figma, seleccione Volver a archivos.

    Captura de pantalla del panel de navegación izquierdo del estudio de Figma. El foco está en la opción Volver a archivos.

  2. Seleccione Configuración en el menú junto al nombre de perfil de Figma.

    Captura de pantalla del panel de navegación izquierdo de la sección Volver a archivos en el estudio de Figma. El foco está en la opción Configuración.

  3. En la nueva ventana, en Tokens de acceso personal de la sección Cuenta, seleccione Generar nuevo token.

    Captura de pantalla de la ventana de configuración de ajustes. El foco está en la opción Generar nuevo token en la sección Tokens de acceso personal en Cuenta.

  4. En la nueva ventana, indique un nombre para el token, por ejemplo, Power Apps y seleccione Generar token.

    Captura de pantalla de la ventana Generar nuevo token. El foco está en el nombre del token y la opción Generar token.

  5. Se genera un nuevo token. Seleccione Copiar este token para utilizarlo más adelante en este proceso.

    Captura de pantalla de la ventana de configuración de ajustes. El foco está en la opción Copiar este token en la sección Tokens de acceso personal.

  6. En Power Apps Studio, en la sección Inicio, seleccione la ventana Comenzar con un diseño de página.

    Captura de pantalla de Power Apps Studio. El foco está en la ventana Comenzar con un diseño de página en la sección Inicio.

  7. Seleccione la ventana Una imagen o archivo de Figma.

    Captura de pantalla de Power Apps Studio. El foco está en la ventana Una imagen o un archivo de Figma.

  8. Seleccione la ventana Empezar desde Figma y, a continuación, seleccione Siguiente.

    Captura de pantalla de Power Apps Studio. El foco está en la ventana Comenzar desde Figma y en la opción Siguiente.

  9. Introduzca un nombre en el campo Nombre de la aplicación y, a continuación, pegue el token que obtuvo en el paso 5 en el campo Token de acceso personal de Figma.

    Captura de pantalla de Power Apps Studio. El foco está en los campos Nombre de aplicación y Token de acceso personal de Figma.

  10. En el estudio de Figma, regrese al diseño de la aplicación y, a continuación, seleccione Copiar vínculo en la página en el menú contextual de la página que desea convertir en una aplicación de lienzo. Si recibe un error, sustituya design con file en el enlace copiado.

    Captura de pantalla del estudio de Figma. El foco está en la opción Copiar vínculo a la página.

  11. En Power Apps Studio, pegue el vínculo en el campo Vínculo al marco o la página de Figma y luego seleccione Crear aplicación.

    Captura de pantalla de Power Apps Studio. El foco está en las opciones Vínculo al marco o la página de Figma y Crear aplicación.

La aplicación de lienzo está disponible para modificar en Power Apps Studio.

Captura de pantalla de Power Apps Studio con la aplicación de lienzo recién creada.

Ahora puede conectar el formulario a un origen de datos. Además, puede complementar la aplicación utilizando Microsoft Power Fx y todos los controles disponibles en Power Apps para proporcionar una experiencia enriquecida a los usuarios de la aplicación.

Pasos del ejercicio (vídeo)

En el siguiente vídeo se explican los pasos que hay que seguir para el ejercicio de esta unidad.

Siguientes pasos

Ha aprendido a crear una aplicación de lienzo basada en un diseño utilizando el kit de UI de Figma. El siguiente paso consiste en aprender a crear una aplicación de lienzo basada en el diseño de Figma que ha creado para el taller de reparación de bicicletas.