Tutoriales de croquis

Una guía de inicio rápido para UX Power Tools

Es tan fácil que te preguntarás por qué alguna vez diseñaste de otra manera.

UX Power Tools es el sistema de diseño de bocetos más avanzado jamás creado. Es como Bootstrap para diseñadores. Todo el trabajo duro ya está hecho para ti, por lo que puedes concentrarte en la parte divertida: realmente diseñar.

Los estilos, los símbolos y las técnicas especiales lo convertirán en un diseñador más eficiente y lo ayudarán a diseñar diseños más consistentes.

Esta Guía de inicio rápido está diseñada para mostrarle los conceptos básicos de la personalización y la ampliación del sistema para que coincida con su marca y se ajuste a su proceso de diseño.

Contenido de la Guía de inicio rápido

1. Introducción: ¡solo una introducción!
2. Configuración: antes de abrir los archivos
3. Colores: personalización y adición de colores
4. Tipografía: cambiar la fuente y los colores de fuente
5. Símbolos: introducción a los símbolos
6. Iconos: intercambiando iconos y agregando nuevos
7. Campos: personalización de campos de entrada
8. Botones: botones de personalización
9. Otras personalizaciones: ¡sombras, scrims y más!
10. Resumen: ¡Respira un poco!
11. Ayuda: Más ayuda + Servicios personalizados

1. Introducción

Soy diseñador de productos a tiempo completo para una agencia digital, y ayudo a aumentar entre 12 y 20 sistemas y marcos de diseño al año para nuevos proyectos de clientes. Construí UX Power Tools por necesidad para poder ser más eficiente, y ha aumentado mi productividad casi 10 veces.

Una vez que aprenda los conceptos básicos del sistema y tenga las cosas bajo sus dedos, estará diseñando de manera más precisa, más consistente y más eficiente. Miles de diseñadores aficionados y profesionales de todo el mundo en empresas grandes y pequeñas están utilizando UX Power Tools para acelerar sus flujos de trabajo.

Esta Guía de inicio rápido funciona tanto para el sistema web como para el sistema móvil, por lo que solo tiene que aprenderla una vez.

¡Hagámoslo!

11:28 pm EST - Aquí estamos diseñando UX Power Tools. Izquierda, Christian. Bien, Jon (yo). Un poco de sueño, un poco de cerveza y muchos marcadores de pizarra. No dejes que la camisa de Nueva York te engañe. Vivimos en Indianápolis, Indiana.

2. Configuración

Instale la fuente Open Sans

Está disponible de forma gratuita desde Google, y también viene junto con el paquete en sí. Se indica en el archivo Léame y Sketch también lo notificará. En este punto, solo estamos regañando! De todos modos, puedes cambiar esto más tarde, pero es bueno asegurarte de que esté instalado para comenzar para que no pierdas tus símbolos.

Cambiar la configuración de empuje

El sistema se basa en una cuadrícula de 8 píxeles para que pueda ahorrarse mucho dolor de cabeza al cambiar la configuración de empuje de 10px a 8px.

...

Todo instalado? ¡Maravilloso!

3. colores

Esta es la mejor manera de comenzar, por lo que hemos llamado acertadamente la página "Comenzar aquí". Es bastante difícil estropear esto, gente :)

Hay algunos tutoriales en esta página que puede seguir, pero esta Guía de inicio rápido lo guiará a través del mismo proceso con más detalle.

Style Stacks ™

UX Power Tools utiliza un pequeño truco de eficiencia llamado Style Stacks ™ (pendiente de patente) para facilitar la actualización masiva de muchos estilos de capa a la vez. Esos bloques de color que ve en la mesa de trabajo "Establecer colores y fuentes aquí" son en realidad pilas de rectángulos, cada uno con un estilo de capa diferente aplicado. Esto nos permite actualizar rápidamente todos esos estilos de capa al mismo tiempo. ¡Conveniente!

Cómo personalizar los colores

Paso 1
Haga clic y arrastre para seleccionar el bloque de color. Me gusta comenzar con el color de mi marca principal, por lo que seleccionaré "Principal". No solo haga clic en el bloque. Hay varios rectángulos en esta pila, y debe seleccionarlos todos.

¡He bloqueado todas las etiquetas para que no tenga que preocuparse por seleccionar accidentalmente el texto!

Paso 2
¿Ves cómo el inspector muestra rellenos, bordes y sombras internas? Esto se debe a que hay rectángulos en esta pila de estilos que tienen uno o más de estos atributos. Elija un color y actualice cada uno de estos valores de color. Me gusta ir de abajo hacia arriba porque ese selector de color puede interferir:

No verá el cambio de color cuando cambie las sombras internas y el borde porque están cambiando debajo del rectángulo superior. Pero no te preocupes, ¡todavía están siendo cambiados!

Paso 3
Sincroniza tus cambios. Sketch es súper elegante y, a pesar de que estos atributos se aplican a múltiples estilos de capa diferentes, sincroniza estos cambios con cada estilo de capa respectivo (relleno, borde, borde izquierdo, borde inferior, etc.):

ACTUALIZACIÓN DEL DIBUJO (31/8/2018):
La actualización y sincronización de estilos se ha movido al menú desplegable de estilos. Simplemente haga clic en "Actualizar estilo de capa" para guardar los cambios de color :)

Una forma rápida de ver si todo funcionó es consultar la página Componentes (si está utilizando el sistema web) o la página Guía de estilo (si está utilizando el sistema móvil). Deberías ver tu bonito color nuevo:

Hola mira, nuestro color! Los estilos de capa Paleta / UI / Relleno se usan con mayor frecuencia en todo el sistema, pero también verá que los estilos de borde se han actualizado si abre el menú desplegable de estilos de capa en el Inspector. Estos estilos son útiles en la página de símbolos. Llegaremos a esos más tarde.

Continúe haciendo esto para las otras pilas de estilo en la mesa de trabajo para completar los colores de su marca. Aquí hay un resumen rápido de cómo UXPT usa el color:

  • Primario: el color de su marca principal
  • Secundario: el color de su marca secundaria (si tiene uno)
  • Activo: esto es lo que uso para casillas de verificación, radios y otros estados activos. Tiendo a usar el color de la marca principal para esto, pero no es necesario.
  • Acento 1: su color de "éxito"
  • Acento 2: su color de "advertencia"
  • Acento 3: su color de "error"
  • Negro: tu base negra. Recomiendo usar un negro teñido (ver preguntas frecuentes)
  • Blanco: Tu base blanca. Usualmente solo uso #FFFFFF, pero el beige también es genial.

Preguntas frecuentes

¿Por qué no se actualizaron mis colores de texto cuando sincronicé mis cambios de color?
Los estilos de texto y los estilos de capa son diferentes. Solo estamos actualizando los estilos de capa en este paso. No se preocupe, llegaremos a los Estilos de texto en la siguiente sección.

¡No veo el cambio de color en otras páginas!
Asegúrate de arrastrar para seleccionar la pila de estilos completa y no solo hagas clic en el rectángulo en la parte superior. ¡Y no te olvides de sincronizar!

¿Qué significa "Color Drop for Black"?
Raramente uso negro puro (# 000000) cuando diseño. En cambio, me gusta usar negro que se tiñe hacia el color de mi marca principal. Este rectángulo de caída de color es su color primario con un rectángulo negro puro al 80% en la parte superior. Es un buen punto de partida para dejar caer el color de un color negro teñido.

¿Por qué solo 8 colores?
Mantenlo simple. Abogo por el uso del color muy deliberadamente en la interfaz de usuario, por lo que rara vez necesito más colores que este. Esa no es una regla difícil, ¡pero funciona para mí! Siéntase libre de agregar más. Lo que nos lleva convenientemente a ...

Cómo agregar más colores

A veces, desea utilizar un color terciario u otros acentos en todos sus diseños. Agregar un nuevo color es fácil:

  1. Arrastre para seleccionar una pila de estilo de color existente como lo hicimos antes.
  2. Copie el contenido de la pila con Command + C.
  3. Pegue esta copia de la pila en algún lugar de la mesa de trabajo de color.
  4. Actualice los colores como lo hicimos antes, pero no sincronice todavía.
  5. Agrupe esta pila de estilos (esto facilitará el repaso de todos los elementos de la pila). Ahora ve al grupo de pila de estilos y selecciona el rectángulo superior. Vaya al menú desplegable de estilos de capa en el Inspector y desplácese hasta el final. Seleccione "Crear nuevo estilo compartido". Dale un nuevo nombre.
  6. Repita el paso 5 hasta que haya creado nuevos estilos de capa para cada rectángulo en su nuevo grupo de pila de estilos. Cuando haya terminado, puede desagruparlo para que sea más fácil arrastrar y seleccionar más tarde.
  7. ¡Hecho! Crearemos símbolos de color para estos más adelante en la Sección 5: Símbolos.
Mira ese azul encantador que acabo de agregar. No olvides copiar y pegar toda la pila de estilos.

4. tipografía

La tipografía le da voz a su aplicación, por lo que en esta sección aprenderá a personalizar la fuente.

Convenientemente, podemos hacer todo desde la misma página ("Comience aquí") donde personalizamos nuestros colores:

Lo primero es lo primero. Esto no es un error:

Al igual que con nuestros colores, utilizamos pilas de estilos para ayudarnos a cambiar rápidamente varios estilos de texto a la vez. Entonces, aunque parece que solo está cambiando 18 estilos de texto en negro, en algunos casos está cambiando 72 estilos de texto de diferentes transparencias y alineaciones:

Las últimas dos líneas parecen duplicadas, pero una de ellas tiene 18 estilos alineados al centro y una tiene 18 estilos alineados a la izquierda.

La razón por la cual las cosas pueden parecer un poco desalineadas en la captura de pantalla anterior es porque algunos de los estilos de texto están alineados al centro y algunos de los estilos de texto están alineados a la izquierda. A veces hay pequeñas variaciones en el espacio entre letras, por lo que es posible que no se alineen perfectamente. Esto no tiene ningún efecto negativo en el sistema. Es puramente un capricho cosmético.

Cómo personalizar la fuente

Paso 1
Arrastre para seleccionar todo el texto en la mesa de trabajo "Comenzar aquí":

Puede retrasarse un segundo porque está seleccionando tantas capas. ¡Sin preocupaciones!

Paso 2
Elija una nueva tipografía en el panel Inspector. Tenga cuidado al desplazarse por las fuentes en el menú desplegable. Si encuentra una fuente que no tiene una variación en negrita, se eliminará el peso de la fuente "Negrita" para los estilos de texto que terminan en "... 2" y no verá texto en negrita en todo el texto de la mesa de trabajo estilos a medida que continúa desplazándose a través de las fuentes.

Los estilos de texto pueden parecer desalineados, pero todo lo que tiene que hacer es arrastrar para seleccionar una columna de texto, luego presionar el botón Alinear a la izquierda.

Paso 3
Sincronice sus cambios, ¡y listo! Si lo hizo bien, verá la actualización de su fuente en todo el archivo:

ACTUALIZACIÓN DEL DIBUJO (31/8/2018):
La actualización y sincronización de estilos se ha movido al menú desplegable de estilos. Simplemente haga clic en "Actualizar estilo de capa" para guardar los cambios de color :)

Preguntas frecuentes

¿Cuáles son los estilos de texto "... 2"?
Son la versión audaz de sus homólogos. Usamos un número para que esté abierto a lo que quieras. A veces, se usaría semi negrita, medio o negro para este estilo.
¿Cómo puedo cambiar rápidamente los estilos de texto en negrita para que sean más / menos negrita?
En la lista de capas, busque “2” (ponga un espacio antes del 2), seleccione todas las capas de texto, luego cambie el peso de la fuente en el panel Inspector. Sync!
¿Qué pasa con esta convención de nomenclatura "Small, Caption, Body ..."?
Estos nombres son solo para recordar. Eso significa que no tiene que usar "Cuerpo" para el texto del cuerpo. Cuando creamos el sistema, los nombres tradicionales de tamaño “XS, S, M, L, XL, XXL” eran difíciles de recordar, por lo que optamos por darles nombres. ¡Siéntase libre de cambiarlos si lo desea!
¿Qué significa Normal, Secundario e Inhabilitado en los estilos de texto?
Esos son diferentes tonos de ese color de estilo de texto. Normal es 100% opaco, Secundario es 50% opaco y Deshabilitado es 25% opaco. Se prefieren las transparencias porque si las usa sobre un color, se teñirán hacia ese color. Ejemplo: el texto blanco transparente al 50% sobre un fondo rojo se verá ligeramente rosado. Sobre azul, será azul claro.
¡Actualicé mi fuente y ahora los componentes están ajustados a la línea!
¡No te preocupes! La mayoría de los componentes del sistema tienen símbolos de texto alineados a la izquierda, por lo que todo lo que tiene que hacer es hacer que su componente sea un poco más ancho. Tan pronto como el texto ya no se ajuste a una nueva línea, su componente tendrá incluso relleno en ambos lados.
¡Actualicé mi fuente y ahora los SÍMBOLOS DE TEXTO están ajustando la línea!
¡Esto en realidad no rompe nada! Es solo un efecto secundario cosmético de algunos tipos de letra que tienen un interletraje más amplio. No amplíe los símbolos de texto. Si realmente le molesta, simplemente cambie el valor dentro de los símbolos de texto a algo más corto como "..." o "abc".
¡Actualicé mi fuente y ahora el texto no está centrado verticalmente en los símbolos!
Tuvimos que ser un poco más inteligentes con la forma en que se crearon los símbolos de texto (siguiente sección) para que actualizar la fuente fuera lo más fácil e indoloro posible. A veces, cuando actualiza la fuente, las capas de texto en los símbolos de texto que lo acompañan se desplazarán hacia arriba o hacia abajo dentro de la mesa de trabajo de símbolos, eliminando la alineación vertical. Simplemente vuelva a alinear el texto en el centro de la mesa de trabajo del símbolo y todo volverá a la normalidad.

Cambiar colores de texto

Paso 1
Arrastre para seleccionar una columna de estilos de texto, luego elija su nuevo color:

Paso 2
¡Sincroniza tus cambios!

Paso 3
Continúe haciendo esto para todas las otras columnas de estilos de texto. Por lo general, solo coloco el color de los rectángulos sobre cada columna.

Paso 4
¡Hecho!

Los símbolos

Cada capa individual en UX Power Tools está vinculada a un estilo de capa, estilo de texto o símbolo. Al igual que en CSS, todo está centralizado, por lo que si alguna vez necesitamos realizar actualizaciones en nuestro sistema, es fácil sincronizarlas en todo nuestro diseño.

Por esta misma razón, los símbolos son el quid de todo el archivo. Los símbolos se crean utilizando los estilos de capa y los estilos de texto que acabamos de definir, y con otros símbolos anidados para que realizar cambios sea sencillo.

Todo el sistema está construido utilizando CUATRO categorías de símbolos:

1. Símbolos de texto
Sketch le permite sobrescribir el valor de texto de un símbolo, pero no le permitirá sobrescribir los estilos de texto utilizados dentro de ese símbolo. Por lo tanto, los símbolos de texto son una solución inteligente para esta limitación. Como podemos anular e intercambiar símbolos anidados, hemos creado símbolos de cada uno de nuestros estilos de texto para permitirnos cambiar el estilo de nuestro texto. Ejemplo: quiero usar texto oscuro en un botón con un fondo claro y texto claro en un botón con un fondo oscuro. ¡Los símbolos de texto anidados nos permiten hacer esto! Véalos en acción a continuación:
2. Símbolos de color de relleno y borde (también conocidos como "Mixins")
Las anulaciones de símbolos serán su mejor amigo en UX Power Tools, y los símbolos de Relleno / Borde cambiarán su vida. Al igual que los símbolos de texto nos permiten anular el estilo de texto de un símbolo, los símbolos de color nos permiten anular rellenos y bordes. Cada vez que piense que usa o crea un símbolo que podría cambiar de color, es mejor usar un símbolo de color anidado. Véalos en acción a continuación:
3. Símbolos de contenedores
Los contenedores dan forma a elementos como botones, insignias y chips. Se construyen con símbolos de color, símbolos de estado y máscaras. Cambie la forma de un componente o el estado de un campo de texto anulando su contenedor. Véalos en acción a continuación:
Cambie la forma de un botón cambiando la anulación de Contenedor.Agregue un estado de desplazamiento a un campo cambiando el contenedor a Muestre otros estados de campo de texto eligiendo el tipo de contenedor
4. Símbolos de estado
Los símbolos de estado le ayudan a agregar un sentido de interacción a componentes como botones, chips e insignias. Siempre están anidados dentro de otro símbolo encima de un relleno de color porque usan modos de fusión para aclarar, oscurecer o desaturar el color del componente. Cualquier componente que use un símbolo de contenedor "heredará" automáticamente los estados, ya que están anidados dentro del símbolo del contenedor. Nota: Los estados son puramente cosméticos para mostrar a los desarrolladores cómo debe verse un estado de desplazamiento / presionado / enfoque. Como estamos usando modos de fusión, los desarrolladores no podrán usar Zeplin o InVision Inspect para estos estados. En cambio, recomiendo que usen las funciones aclarar () y oscurecer () en MENOS o Sass para lograr estos resultados en el código.

Preguntas frecuentes

¿Cómo agrego nuevos rellenos para que estén disponibles en los menús desplegables?
Duplique una de las mesas de trabajo Mixin / Fill en la página Símbolos, elija un nuevo color para el rectángulo, luego agregue un estilo de capa para su nuevo color. Agregar el estilo de capa es opcional, pero recomendamos usar siempre estilos de capa para que se actualice rápidamente más adelante si termina usándolo en varios lugares. Precaución: no cambie el tamaño de esta mesa de trabajo. Debe tener exactamente el mismo tamaño que todas las otras mesas de trabajo Mixin / Fill para que aparezca en el menú desplegable del panel Inspector.

Íconos

Los iconos son probablemente la parte más tediosa del kit, pero terminarán ahorrándote un montón de tiempo a largo plazo. Usando esta técnica, hacemos nuestras máscaras de iconos, luego colocamos un símbolo Mixin / Fill sobre él.

¡Debido a que Sketch nos permite anular símbolos, podemos cambiar el color de este icono a cualquier color que hayamos agregado como símbolo!

Cómo intercambiar un ícono

Intercambiar íconos es muy fácil usando el panel de anulación en el Inspector:

Puede cambiar el color usando el menú desplegable justo debajo del icono.

Cómo agregar un ícono

  1. Duplique un icono existente, luego elimine la capa de máscara.
  2. Pegue su nuevo ícono y asegúrese de crear una sola ruta. Puede hacer esto con Capa → Combinar → Unión o Capa → Combinar → Diferencia.
  3. Elimine todos los rellenos en la ruta del icono. No se llena!
  4. Coloque la ruta de su icono debajo de la capa "↳ Color".
  5. Convierta el icono en una máscara (presione Control + Comando + M).
  6. ¡Hecho!

Preguntas frecuentes

Esto lleva una eternidad.
No está optimizado al principio, pero ganarás todo ese tiempo a largo plazo. Promesa.
¿Hay una manera mas rápida?
No que yo sepa. Si alguien quiere hacer un conjunto de iconos de máscaras, ¡eso hará que este proceso sea muchísimo más rápido!
¿Se admite este método de icono en Zeplin, InVision, [herramienta de transferencia de desarrollo]?
Por lo general, envío a mi (s) equipo (s) de desarrollo la fuente del ícono real y / o el sprite SVG, así que no me preocupo demasiado por esto. Dicho esto, Zeplin hace un gran trabajo leyendo las anulaciones de color, y generalmente le permite exportar los SVG muy bien.
¡Mi ícono no aparece en el menú desplegable de anulación de íconos!
Asegúrese de que la mesa de trabajo de iconos tenga exactamente el mismo tamaño que todas las otras mesas de trabajo de iconos. Si no es así, no aparecerá.

Campos

Los campos (o entradas ... lo que desee) están formados por dos piezas principales: un contenedor y algo de texto. Tanto el contenedor como el texto son símbolos, por lo que podemos anularlos fácilmente para adaptarse a diversas situaciones.

Como todos los símbolos en el sistema, los campos de texto son completamente redimensionables. Si el texto no se ajusta, solo hazlo más ancho o más alto.

Personalizar campos

Si desea cambiar la forma o el estilo de un campo de texto, la mayor parte del trabajo debe realizarse en los símbolos Mixin / Container / Field:

  • Campos sin bordes: elimine la capa "Borde".
  • Campos con una sombra: agregue una sombra a la capa "Máscara".
  • Campos de esquina dura: establezca el radio del borde de los símbolos Mixin / Border y la máscara Contenedor / Campo en cero.
  • Campos de diseño de material: haga campos de esquina dura, luego cambie la capa "Borde" a Mixin / Border / Bottom-Active. Deberá crear otro símbolo de combinación de borde inferior para el estado predeterminado.

Preguntas frecuentes

¿Qué es el ícono "Cambiar tamaño"?
Eso es para cuando intentas representar un área de texto. Siéntase libre de eliminar esto si cree que no lo necesitará.
¿Puedo eliminar el símbolo "Cursor"?
¡Seguro! Lo encuentro útil de vez en cuando, pero depende de usted.

Botones

Los botones son muy similares a los campos en que se construyen utilizando otros símbolos. El símbolo de texto de nido en el botón está configurado para cambiar el tamaño, lo que garantiza que siempre se mantenga el relleno perfecto izquierdo / derecho.

El mejor truco para garantizar un acolchado perfecto es el 1px Nudge ™. Simplemente cambie el tamaño de su botón hasta que el texto comience a ajustarse, luego hágalo 1px más ancho:

Acolchado perfecto!

UX Power Tools también tiene un botón centrado en caso de que desee usarlo en la parte inferior de un modal (o algo similar):

Botones de personalización

Si desea cambiar la forma o el estilo de un botón, la mayor parte del trabajo debe realizarse en los símbolos Mixin / Button:

Hemos hecho la mayor parte del trabajo para darle un montón de formas de botones para elegir, pero si desea que la forma predeterminada de su botón sea más redondeada o más dura, cambie la máscara de Mixin / Button / Fill.

Preguntas frecuentes

¿Cómo agrego una sombra a mi botón?
Seleccione la capa Máscara en un contenedor Mixin / Button en la página Símbolos y agregue una sombra. No olvides hacer todos los contenedores de botones.

Otras personalizaciones

En la página " Comience aquí", hay un tablero para " ¡Ajuste otras cosas aquí!" Aquí es donde puede ajustar cosas como sombras y scrims.

Personalizando Scrims Sólidos

Cuando personaliza sus colores en la página "Comenzar aquí", los scrims en negro y color cambiarán automáticamente por usted. Siéntase libre de jugar con los niveles de transparencia hasta que encuentre algo que le guste. Los puse sobre algunos fondos de imagen para ayudarlo a medir la legibilidad.

Personalizar la malla de degradado

Tendrá que actualizar la malla de degradado a mano. Así es, un cañamazo hecho a mano. Me gusta hacer que una malla degradada pase del 50% de mi base negra al 0% de mi base negra.

Personalizando Sombras

Hay 6 niveles de sombra para que pueda elegir. Depende de usted decidir cuándo y dónde desea usarlos, pero Material Design tiene algunas ideas interesantes sobre el uso de sombras en lo que respecta al "material digital".

Siempre defiendo el uso de su color negro base para sus sombras en lugar de negro puro: # 000000 (Me inspiré en el artículo de Ian Storm Taylor de 2012. Esto le dará a su aplicación una sensación más suave y las sombras no se verán tan duras. todo a la vez es rápido:

  1. Seleccione su color negro base y copie el valor hexadecimal.
  2. Resalta los 6 bloques de sombra.
  3. Abra el selector de color de sombra y pegue su valor hexadecimal.
  4. Presione enter.
  5. Sincronización, y listo!
No tuve que sincronizar aquí porque ya estaba usando mi color negro base.

Resumen

¡Felicitaciones por obtener el sistema de diseño más rápido disponible para Sketch! Sé que todo esto parece bastante abrumador, pero solo tienes que personalizar todo lo que quieras. Honestamente, creemos que se ve bastante bien fuera de la caja. Cambia algunos colores y listo.

¿Quién debería usarlo?

  • Diseñadores UX
  • Diseñadores de UI
  • Gerentes de producto (para una estructura de alambre más precisa)
  • Desarrolladores (que no quieren meterse con el diseño)
  • CEOs emprendedores (porque ¿por qué no?)

¿Aún no tienes el sistema?

Visite nuestro sitio para leer más sobre nuestros dos sistemas de diseño (web y móvil), descargue una demostración o tome los dos a continuación. Cada sistema viene con un obsequio de más de 70 tipos de gráficos únicos (en temas oscuros y claros) para que la próxima vez que bossman solicite un "tablero de instrumentos sexy como los que veo en Dribbble", no saques los ojos por completo de tu cabeza

¿Aún necesitas ayuda?

  • Saluda por correo electrónico: hello@uxpower.tools
  • ... o Twitter
  • …o Facebook
  • ... o LinkedIn

¿Quieres un sistema de diseño personalizado?

Si todo esto parece demasiado complicado, o si está migrando desde otra aplicación (Illustrator, Photoshop, Axure, Adobe XD, etc.), ¡permítanos ayudarlo! Envíenos un correo electrónico y lo ayudaremos a poner en marcha a su equipo en poco tiempo.