Integrar archivos de diseño de Figma en las experiencias Appcues
Aprenda a integrar fácilmente sus archivos Figma directamente en su producto a través de la mensajería dentro del producto de Appcues .
Cómo integrar archivos de diseño de Figma en Appcues
Los archivos de diseño de Figma son entornos colaborativos donde puedes convertir tus ideas en diseños responsivos e interactivos. Puedes enviarlos a tu equipo y usuarios directamente en tu producto integrándolos en un flujo Appcues . Este documento te guiará por los pasos necesarios para completar esta tarea a través de nuestra plataforma de mensajería integrada.
Paso 1. Comparte tu archivo de diseño en Figma
Mientras visualiza o edita cualquier archivo de diseño en Figma, haga clic en el botón Compartir para abrir un cuadro de diálogo para generar el código de inserción.
Paso 2. Obtenga el código para insertar el botón para compartir.
Una vez que haya hecho clic en el botón compartir, haga clic en el enlace <> Obtener incrustar en el modal de Figma.
Haga clic en el botón Copiar para copiar el código de inserción público a su portapapeles.
Paso 3. Agrega el código de inserción de Figma a tu flujo Appcues
Inicia sesión en Appcues Studio , haz clic en "Flujos" en la barra de navegación y busca el flujo en el que quieres incrustar tu archivo de diseño de Figma. Puedes usar la búsqueda rápida para encontrar tu flujo o crear uno nuevo. Para esta experiencia, te sugerimos usar un patrón "modal", ya que este ofrece el mayor espacio para que tu archivo de Figma destaque.
Una vez que tenga el flujo deseado en Studio, haga clic en el botón "Abrir en el Constructor". Esto le dirigirá a su aplicación, iniciará el Constructor Appcues y abrirá el flujo para editarlo.
Haga clic en el símbolo verde de agregar en su flujo y elija el bloque de contenido HTML.
Pegue el código de su portapapeles en el área de texto del contenido HTML del blog.
Haz clic en el botón "Guardar cambios". Nota: Deberías ver inmediatamente el archivo de diseño de Figma renderizado en tu flujo.
¿Necesita un modal más grande para su archivo de diseño?
¡Puedes agregar CSS personalizado directamente en el paso modal dentro builder Appcues usando el código de muestra provisto en nuestro documento de consejos CSS para modos y deslizadores !
Paso 4. ¡Publica tu flujo!
¡Listo para publicar tu flujo! Revisa las reglas de segmentación para asegurarte de que este contenido llegue a los usuarios correctos y, cuando estés satisfecho, programa o haz clic en el botón de publicación en Appcues Studio para finalizar.
¡Sólo una cosa más!
Lleva este caso práctico al siguiente nivel estableciendo un objetivo con este flujo. Esto creará un punto de medición para que puedas ver la efectividad de cualquier flujo con tu base de usuarios.