Herramientas

Adobe XD

    Flujo de trabajo

  1. Usar las grillas para saber cuanto miden de punto a punto cada cosa, alinear bien y cuantas columnas abarcan
  2. Para usar la grid solo debo de dar click en el cuadro donde dice cuadricula, donde también puedo poner el ancho que quiero que haya entre cada columna
  3. Con los botones de la parte superior derecha puedo alinear mis rectangulos
  4. gridcalculator para calcular la grilla de tu proyecto de diseño y cuanto deberian medir los espacios entre tus columnas
  5. Si las columnas miden 1000px y el resto del lienzo 920, divides 920 entre 2 y obtengo el resto del lado derecho e izquierdo
  6. ctrl + 1 es el comando para que te ponga el lienzo en el tamaño real nuestra página
  7. En la parte inferior derecha hay un boton que se llama predeterminado que lo puedo usar para guardar el estilo de las grillas
  8. En la parte inferior izquierda no olvides a los activos, capas y componentes te serviran cuando uses imagenes y fondos
  9. PRESIONAR CANDADO todo lo agrupado en el icono de capas para que no se pueda arrastrar

    Comandos utiles

  1. barra espaciadora presionada el cursos cambiara a una manita y podrás mover tu lienzo
  2. ctrl + 1 nos muestra como se vería nuestro sitio web, se trabaja mucho con este y ctrl + 3
  3. ctrl + 2 hace un zoom mas cercano
  4. ctrl + 3 te aleja para que se vea completo
  5. ctrl + d te duplica una imagen o texto, las puedes ver presionando el ícono capas en la parte inferior izquierda
  6. ctrl + g para agrupar imagenes, las mete en una carpeta, ctrl + click
  7. ctrl + shift + alt + arrastrar te duplica el texto seleccionado
  8. shift + left arrow juntas las cajas de texto y te mueve 10px hacia la izquierda la caja de texto

  1. TIPS

  2. barra espaciadora presionada el cursos cambiara a una manita y podrás mover tu lienzo
  3. Se trabaja mucho con ctrl + 1 y ctrl + 3
  4. Se pueden arrastrar imagenes al lienzo
  5. Cuando haces Zoom y te quieres mover en el lienzo, es como barra espaciadora y click en medio del mouse pat hasta que el icono de la manita cierre el puño

Figma

    Comienzo

  1. Frame
  2. Grid 12
  3. Margen 360px
  4. Las reglas van 20px a los lados de la última columna
  5. Crear un contenedor Main y ponerle candado
  6. Crear Header

    Comandos utiles

  1. Shift + 1 Es un zoom para que se vean todos tus frames
  2. Shift + 2 Seleccionar un frame
  3. SHift + R Para que aparezcan las reglas
  4. Ctrl + Shift + 4 Aparece la cuadricula
  5. Ctrl + G Selecciona varias cosas y las vuelves un grupo y puedes hacer grupos con grupos
  6. Ctrl + D DUplicar, duplicas y jalas el componente
  7. Shift + A: Add auto Layout, para repartir el espacio equitativamente

    TIPS

  1. Con las flechas recorres un 1 pixel
  2. Layout Grid sirve para agregar una cuadricula
  3. Se puede seleccionar 2 objetos y cambiarle el color a los 2 o 3, eligiendo colores, primarios y secundarios
  4. Ir armando grupos antes de pasar a otra actividad
  5. Los colores primarios se crean en fill
  6. Crear componentes con click derecho como si fueras a cambiar el nombre
  7. Puedes copiar bloques de platillas usando Ctrl + C
  8. SI modificas un componente maestro, todos los componentes hijos van a cambiar también
  9. Detach Instance se desconecta del componente maestro y así puedes modificarlo,
  10. Si quieres tener buenos estilos, usa los colores que se te recomiendan en las maquetas
  11. Libraries cuando uses un diseño de otra persona, le das click en assets y luego en library y exportas, luego en tu area de trabajo, le das click en assets luego library y activas los estilos y desactivas los tuyos
  12. Si un trabajo se sobre-encima solo pon el layer que quieres arriba, un renglon arriba(en la barra del lado izquierdo)
  13. Constrains and Resizing sirve para colocar un frame orientado arriba, abajo, del tamaño del ancho etc y que se quede fijo
  14. manypixels para sacar imagenes cool
  15. Para poner imagenes solo arrastralas al lienzo
  16. Centrar los textos horizontal y verticalmente con los botones
  18. Efecto wave: una ola, se hace con la pluma y al unir todos los puntos, redondeas los elementos dandole click a los puntitos y al terminar, presionas DONE, si quieres colorearlo no olvides la gota de agua en el rombo de blanco y negro.
  19. Los vectores como el efecto wave también se pueden exportar
  20. EXPERTO EN MARKETING PARA VENDER PRODUCTOS/SERVICIOS HONESTOS.