Principle es una herramienta de diseño interactivo con la que podrás dar vida a tus diseños y prototipos digitales.

Podrás utilizar una amplia gama de interacciones; desde desplazamientos o deslizamientos, pasando por gestión de varios estados y creación de animaciones personalizadas hasta transiciones muy suaves. Consulta más información sobre Principle aquí.

Cuando hayas conectado Figma a tu cuenta de Principle, podrás importar fácilmente tus diseños desde Figma y empezar a crear animaciones avanzadas.

Con Figma y Principle, tus diseños tendrán una apariencia realista.

En este artículo explicaremos cómo:

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

Conectar Figma y Principle

Para conectar Figma y Principle, tendrás que crear una cuenta. Principle solo está disponible actualmente en macOS.

La primera vez que importes un diseño de Figma, se te solicitará que introduzcas los detalles de tu cuenta de Figma para autorizar la conexión. Solo tendrás que llevar a cabo este procedimiento la primera vez que utilices la opción Import From Figma.

1. Abre Principle.
2. Accede a la opción File en el menú principal y selecciona Import From Figma:
3. O, haz clic en el botón Import:
4. Selecciona Figma en las opciones:
5. Haz clic en el botón Connect to Figma:
6. Se abrirá una ventana de navegador. Si no has iniciado sesión, se te pedirá que inicies sesión en tu cuenta de Figma:
7. Haz clic en Allow access para confirmarlo:
8. En un cuadro de diálogo se te solicitará que vuelvas a Principle:

   Nota: Si no se te redirige directamente a Principle, cierra la ventana de autorización y vuelve a Principle. Aunque puede que no lo parezca, ahora la conexión se habrá establecido correctamente.

Importar un diseño desde Figma

Ahora que las dos aplicaciones están conectadas, podrás importar tus diseños directamente en Principle. Nota: No se puede exportar un archivo a Principle desde dentro de Figma.

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

1. Abre Principle.
2. Ve a la opción File en el menú principal y selecciona Import From Figma:
3. O, haz clic en el botón Import:
4. Selecciona Figma en las opciones:
5. Tras esto, podrás seleccionar un documento en el campo proporcionado. Esto hará que se muestre cualquier archivo editado recientemente en Recently Edited Documents
   
   .

   Nota: Los archivos en los que se haya estado usando la edición colaborativa (por ejemplo, archivos donde haya varios editores colaborando) aparecerán con una mayor prioridad en las sugerencias de Recently Edited Documents.

   

6. Haz clic en Import Page para importar todos los marcos en la página.
7. O bien, haz clic en Import Selected Frames para importar cualquier marco que esté actualmente seleccionado en Figma.
   
   

   Nota: En este momento, también puedes pasar a Figma y seleccionar cualquier marco específico que desees importar, lo que hará que la selección se actualice en Principle.

8. Un mensaje de estado indicará que Figma está representando actualmente las capas:
9. A continuación se añadirán los marcos al panel en Principle:
10. Cada uno de los objetos se representará como una capa individual, igual que en Figma. Puedes seleccionar distintos objetos en el panel Layers de la izquierda o directamente en el lienzo:

Desconectar tu cuenta de Figma

Si deseas cambiar la cuenta de Figma asociada a tu cuenta de Principle o desconectar totalmente las dos, puedes realizar esta acción en Principle.

1. Haz clic en el menú Principle de la barra de menús de Apple.
2. Selecciona Disconnect From Figma en las opciones:
3. A continuación, puedes empezar el proceso de importación de nuevo para volver a conectar o conectar a otra cuenta.

Trabajo con sombras en Figma y Principle

La opciones Drop e Inner Shadows tendrán un funcionamiento distinto en Figma y en Principle. Figma representa las sombras según la posición del objeto en el lienzo, mientras que Principle mostrará la sombra en función del propio objeto.

De esta forma, al girar un objeto en Principle también se girará la ubicación de la sombra del objeto (en lugar de quedarse igual, como sucedería en Figma).