Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. InVision Studio
Webdesign

Introducción a Studio, la herramienta de diseño de InVision

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Hoy te daré una introducción rápida a Studio, una nueva herramienta de diseño de InVision. Con ella, podrás diseñar tus proyectos de UI, pero también crear prototipos y colaborar con otros para mantener todo sincronizado. Si estás buscando una alternativa a Adobe XD, Sketch o Figma, ¡sigue leyendo!

Studio es una aplicación gratuita (actualmente disponible solo para MacOS) que puedes descargar desde invisionapp.com/studio.

Presentando a InVision Studio

Interfaz de usuario y herramientas

La interfaz de usuario es muy sencilla. A la izquierda tenemos una barra lateral que muestra nuestras páginas, mesas de trabajo y capas. También podemos cambiar las cosas para ver las bibliotecas.

invision studio ui

En la parte superior de la pantalla verás la barra superior, que nos muestra el nombre de nuestro documento, un menú desplegable de selección de herramientas y los controles de zoom. A la derecha de la barra superior tenemos acceso a las herramientas de colaboración y herramientas de creación de prototipos. La barra superior también muestra varias herramientas (como controles de alineación, operadores booleanos, etc.) según lo que se haya seleccionado.

invision studio topbar

A la derecha de la pantalla tenemos otra barra lateral. Esta es contextual y cambia dependiendo de lo que estemos haciendo. Puedes encontrar varias propiedades y detalles de documentos aquí, también opciones de exportación cuando sea pertinente.

Importando archivos de Sketch

Uno de los aspectos atractivos de Studio para mí es su capacidad para importar archivos de Sketch. Digamos que estás trabajando en un proyecto de Sketch y quieres moverlo a Studio sin perder ninguno de los detalles de la capa y su organización. No es necesario copiar o pegar; verás en la pantalla de inicio de Studio Abrir archivo de Studio o Sketch:

Open Studio or Sketch file

Haz clic en él, selecciona tu archivo de Sketch ¡y ya está! Studio importará todo perfectamente, incluyendo la estructura de las capas y los símbolos definidos en Sketch (que hallarás en Bibliotecas de documentos). Studio incluso importará todas las páginas presentes en tu archivo de Sketch.

Trabajar con capas y herramientas comunes

Trabajar con capas y algunas de las herramientas más comunes en Studio es bastante sencillo si estás acostumbrado a trabajar en Sketch o Adobe XD. Hay un alto grado de familiaridad, por lo que la transición (si decides trasladarte de una de las plataformas de la competencia) será fácil.

Las herramientas comunes en Studio se pueden encontrar en la barra superior:

Common tools in Studio

Entre ellos hallarás el rectángulo, el rectángulo redondeado (puedes alterar el radio del borde en la barra lateral de propiedades), la herramienta Elipse, las herramientas de Pluma, Texto, Importación de imágenes y Artboard. La creación de una mesa de trabajo se puede hacer manualmente, o puede escoger entre una selección de ajustes preestablecidos.

Para mayor información sobre las herramientas y los controles de capa de Studio, mira el video, o echa un vistazo al curso detallado que publiqué recientemente:

Conclusión

InVision Studio es una herramienta de diseño muy competitiva, en un mercado que se está volviendo extremadamente competitivo. Si estás familiarizado con Adobe XD, Sketch o Figma, entonces definitivamente deberías echar un vistazo a Studio y ver qué te puede ofrecer.

Enlaces útiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.