Principio de "piratería": 9 cosas que pensabas que no podías hacer

El principio ha pasado de ser el nuevo chico en el bloque a la herramienta de referencia para la creación de prototipos con mucha animación. Creemos que la clave de su éxito es que habla el mismo idioma que los diseñadores. Es muy similar a Sketch, Keynote y After Effects, lo que lo hace sentir instantáneamente familiar al abrirlo por primera vez.

¿Es difícil aprender a usar Principle? Realmente no. Si sabe cómo funcionan los controladores, los componentes y la línea de tiempo de la animación, entonces conoce el Principio. Son los fundamentos de la herramienta, y con ellos puede crear casi cualquier cosa en un período de tiempo relativamente corto.

A veces es criticado por su falta de características. Los usuarios buscan funciones que no pueden encontrar. Pero a menudo resulta que hay una solución usando creativamente estos fundamentos. Algunos lo llaman "piratería", pero no olvidemos que estamos utilizando una herramienta de creación de prototipos, no una herramienta de programación. Mientras el usuario de su prototipo obtenga una experiencia sólida, no importa cuán hacky sea.

La comunidad de Principios de Facebook ha publicado algunos ejemplos excelentes de esto, y nosotros también hemos hecho algunos "hackeos". Echale un vistazo:

3D

El 3D no es compatible, pero definitivamente puedes fingir este usando ingeniosamente los controladores como lo demuestra André Goncalves.

por André Gonçalves

Animar formas orgánicas

Las formas en principio se basan en rectángulos con esquinas redondeadas. Si bien esto funciona bien en la mayoría de los casos, puede ser difícil lograr una animación con una sensación orgánica. En este ejemplo, Sketch se utilizó para crear las formas orgánicas. Al modificar esto en Principio, utilizando controladores, puede simular un efecto gelatina.

por Hike One | PRD

Desenfoque de fondo en la parte superior del video

Principle no admite oficialmente el desenfoque del fondo, o cualquier desenfoque para el caso. Sin embargo, es posible crear este efecto. Todo lo que necesita hacer es hacer un duplicado borroso de la imagen / video. En Principio, luego coloca la versión borrosa de sus medios dentro de una máscara y la coloca encima del original.

por Hike One | PRD

Deslizar el borde

El deslizamiento de bordes no es un evento oficial en Principio. Sin embargo, puede colocar una tira invisible (de aproximadamente 10 px de ancho) en el borde de su mesa de trabajo. Es lo suficientemente pequeño como para no interferir con ningún otro elemento interactivo en la página. Use este elemento para manejar las páginas que necesitan ser cambiadas y agregue un evento DragEnd para animar a la otra pantalla.

por Hike One | PRD

Restringir una capa arrastrable

Al crear un control deslizante, por ejemplo, no desea que su depurador rebote más allá del control deslizante real. Para solucionar esto, los controladores son útiles. Simplemente agregue una capa invisible en la parte superior de la perilla. Esta capa invisible conducirá la perilla junto con ella hasta el punto donde llegue al final del control deslizante, según lo definido por los controladores.

por Carl BI

Crea una experiencia de TV de pantalla grande

Desafortunadamente, todavía no hay soporte para eventos de prensa clave. Eso hace que sea difícil crear un prototipo para una interfaz de usuario de TV. Una alternativa fácil es crear un control remoto en pantalla y colocarlo junto a su prototipo. Si desea probar su prototipo en un televisor real, simplemente abra el prototipo en un iPad y AirPlay en un Apple TV. Ahora recuéstese y use su iPad como control remoto mientras mira el prototipo en la TV. Por supuesto, la interfaz de usuario también será visible en su iPad mientras que el control remoto es visible en la pantalla grande. Te olvidarás de ellos más rápido de lo que piensas.

por Hike One | PRD

Evento de doble clic

Hacer doble clic no es un evento oficial en Principio, pero en realidad es muy fácil crearlo usted mismo, como lo demostró Daniel Hooper. Debido a que es un doble clic personalizado, incluso puedes ajustar la velocidad.

por Daniel Hooper

Crea un cargador circular

La gente a menudo me pregunta si es posible crear una animación de ruta en Principio. Cuando se les pregunta para qué sirve, generalmente explican que quieren crear un cargador circular. Si bien las animaciones de ruta no son compatibles, crear un cargador circular es muy fácil. Kieran Black ha demostrado esto.

por Kieran Black

Desplazar eventos basados

Los controladores son una excelente manera de agregar animaciones basadas en desplazamiento a su diseño. A veces, sin embargo, es posible que desee que la animación se anime solo de una manera. Como en: cuando se desplaza hacia abajo, un elemento se mueve hacia adentro, pero cuando se desplaza hacia arriba, el elemento no se mueve hacia atrás. Imposible de lograr con los conductores. Una solución alternativa puede ser crear un componente de sangrado completo con el elemento animado dentro. Activa la animación con un evento flotante dentro del evento. Esto funciona en la mayoría de los casos, ya que el mouse se desplazará sobre el componente en algún momento durante el desplazamiento. Obviamente solo en el escritorio.

por Hike One | PRD

Ondas de tinta

Las ondas de tinta, como se usan en el diseño de materiales de Google, confirman la entrada del usuario al expandirse inmediatamente hacia afuera desde el punto de contacto. Desafortunadamente, Principle no puede reconocer qué parte de un botón presionas. Sin embargo, puede fingir este efecto colocando múltiples componentes de ondulación dentro de un botón. Un evento de Touch Down dentro del componente activará la onda más cercana a su entrada táctil. Use tocar arriba en el botón (grupo) para pasar a la mesa de trabajo de destino.

por Hike One | PRD

Artículo de Jimmy Goedhart, jefe de diseño de Hike One