Principle es una herramienta de diseño de interacciones que le permite darle vida a sus diseños digitales y prototipos.

Contamos con una gran variedad de interacciones disponibles, desde desplazamientos o deslizamientos hasta la gestión de varios estados y el desarrollo de animaciones personalizadas y transiciones sofisticadas. Obtenga más información sobre Principle aquí.

Una vez que conecte Figma a su cuenta de Principle, podrá importar fácilmente los diseños desde Figma y comenzar a desarrollar animaciones avanzadas.

Con Figma y Principle, sus diseños se verán y se sentirán reales.

En este artículo, abordaremos los siguientes temas:

1. Conectar Figma y Principle
2. Importar un diseño desde Figma
3. Desconectar su cuenta de Figma de Principle

Conectar Figma y Principle

Deberá haber creado una cuenta en Figma y Principle para conectarlas. De momento, Principle solo está disponible para macOS.

La primera vez que intente importar un diseño desde Figma, se le pedirá que ingrese los datos de su cuenta de Figma para autorizar la conexión. Eso solo ocurrirá la primera vez que utilice la opción Importar desde Figma.

1. Abra Principle.
2. Diríjase a Archivo en el menú principal y seleccione Importar desde Figma:
3. Si no, haga clic en el botón Importar:
4. Seleccione  Figma entre las opciones:
5. Haga clic en el botón Conectarse a Figma:
6. Esto abrirá una ventana del navegador. Si no ha iniciado sesión, se le pedirá que inicie sesión en su cuenta de Figma:
7. Haga clic en  Permitir acceso para confirmar:
8. Un cuadro de diálogo le indicará que regrese a Principle:

   Nota: Si no es redirigido a Principle directamente, puede cerrar la ventana de autorización y regresar a Principle. Aunque no parezca, la conexión se estableció satisfactoriamente.

Importar un diseño desde Figma

Ahora que se han conectado las dos aplicaciones, podrá importar los diseños directamente a Principle. Nota: No es posible exportar un archivo a Principle desde Figma.

Puede importar todos los marcos, o una selección, de una página en un archivo.

1. Abra Principle.
2. Diríjase a Archivo en el menú principal y seleccione Importar desde Figma:
3. Si no, haga clic en el botón Importar:
4. Seleccione  Figma entre las opciones:
5. Entonces, podrá seleccionar un Documento desde el campo proporcionado. Eso le mostrará los Archivos editados recientemente.
   
   

   Nota: Se priorizarán los archivos con múltiples editores (por ejemplo, archivos donde varios editores están colaborando) en las sugerencias de Archivos editados recientemente.

   

6. Haga clic en Importar página para importar todos los marcos a la página.
7. Si no, haga clic en Importar marcos seleccionados para importar los marcos  seleccionados actualmente en Figma.
   
   

   Nota: En este momento, también puede dirigirse a Figma y seleccionar los marcos específicos que desee importar. Esto actualizará la selección en Principle.

8. Un mensaje de estado le indicará que las capas están siendo representadas por Figma:
9. Luego, se agregarán los marcos a la mesa de trabajo en Principle:
10. Cada objeto se representará como una capa individual, tal como en Figma. Puede seleccionar objetos individuales en el panel de Capas en el lado izquierdo, o directamente en el lienzo:

Desconectar su cuenta de Figma

Si desea cambiar la cuenta de Figma asociada con la cuenta de Principle, o desconectarlas, puede hacerlo desde Principle.

1. Haga clic en el menú de Principle en la barra de menú de Apple.
2. Seleccione  Desconectarse de Figma entre las opciones:
3. Para reconectar la cuenta o conectar una diferente, puede comenzar el proceso de importación de nuevo.

Trabajar con sombras en Figma y Principle

Las sombras externas e internas se comportarán diferente en Figma y Principle. Figma representa las sombras según la posición del objeto en el lienzo, mientras que Principle muestra la sombra según el objeto mismo.

Esto significa que al rotar un objeto en Principle también rotará la ubicación de la sombra del objeto (en lugar de quedar igual, como sucedería en Figma).