Introducción al software

Frase importante de la clase:

Todo comienza con un buen problema que hay que resolver, luego hay que conocer el medioy por último la herramienta.

Las diferentes herramientas tienen diferentes propósitos.

• Adobe Photoshop: se utiliza para retocar y manipular imágenes digitales.
• Adobe Illustrator: se utiliza para diseñar gráficos vectoriales y logotipos.
• Adobe InDesign: se utiliza para diseñar y maquetar publicaciones como revistas, folletos y libros.
• Adobe XD: se utiliza para diseñar prototipos y diseños de aplicaciones para dispositivos móviles.
• Adobe After Effects: se utiliza para crear animaciones y efectos de vídeo.
• Adobe Premiere Pro: se utiliza para editar y producir vídeos.
• Adobe Lightroom: se utiliza para organizar y retocar fotos.
• Adobe Audition: se utiliza para editar y mezclar audio.
• Sketch: se utiliza para diseñar aplicaciones web y móviles.
• Figma: se utiliza para diseñar interfaces gráficas y prototipos de aplicaciones.
• Corel Draw: se utiliza para diseñar gráficos vectoriales.
• Cinema 4D: se utiliza para diseñar efectos especiales y animaciones en 3D.
• Blender: se utiliza para crear contenido 3D y efectos visuales.
• Unreal Engine: se utiliza para crear juegos y experiencias de realidad virtual.
• Unity: se utiliza para desarrollar contenido interactivo, juegos y aplicaciones.

No soy diestro con Figma, apenas lo he manejado unas pocas horas, pero hasta el momento he visto que presenta unas cuantas ventajas (que no diré que los competidores las tengan o no, pues lo ignoro) que facilitan el flujo de trabajao, en especial con equipo:

1. Con cualquier software que funcione con ilustración vectorial puedes copiar y pegar formas y trazos, de tal manera que desde Illustrator o Corel o Inkscape o cualquier otro puedas diseñar elementos y pegarlos en Figma sin mayor problema, facilitando mucho el flujo de trabajo para los que somos mas diestros con estas herramientas.

2. Permite trabajar en equipo (multiples personas en un mismo proyecto de manera remota) con mucha facilidad.

3. Para los desarrolladores Front-End, permite copiar los íconos y elementos de Figma como SVG, permitiendo pegar el Path directamente al código (siendo SVG formas hechas de operaciones matemáticas, la propiedad path en HTML representa la forma en cuestión).

4. Cuenta con una gran cantidad de Plug-ins y Extensiones y galerias que facilitan mucho el buscar y usar íconos, fotos, place holders y más.

Aquí tienen un resumen de la clase que hice 😄

En mi experiencia personal, conocí a figma en el 2019 y para no venir del mundo del diseño me fue muy fácil de entender. Yo aún veo photoshop y siento que tiene tantas cosas que me pierdo.
Siento que su mayor fuerte, es que permite una curva fácil de aprendizaje. Hoy en dá (Febrero 2023) ha evolucionado mucho y hasta fue comprado por Adobe, espero que se mantenga la esencia del software.

Algunas características de figma

• Interfaz. …
• Función de creación de prototipos. …
• Colaboración eficaz entre diseñadores y desarrolladores. …
• Sistema de comentarios integrado. …
• Versionado. …
• Colaboración en tiempo real. …
• Desarrollo de componentes reutilizables. …
• Diseño responsive.

Introdución al software

Todo comienza por un problema que debemos resolver, sin entende el problema, no existe diseño, una vez conoces el medio y el problema debes buscar la herramienta adecuada.

Herramientas en el mercado:

• Light Room: Catalogar y retocar la organización de fotografias
• Blender: Diseño y modelado 3d
• Photoshop y PixelMator: retoque de imágenes
• ILustrator: Diseño Vectorial
• InDesign: Diseño editorial
• Figma y Sketch: Diseño digital UX/UI

¿Por qué figma?

• Todo esta en la nube, no debes preocuparte por guardar archivos o buscarlos
• Puedes compartir tu diseo tan solo compartiendo un link
• Guardado automatico
• Es 100% colaborativa, UX/UI es una carrera que tiene mucha comunicación de por medio y Figma facilita esta
• Esta disponible para cualquier plataforma, inclu puedes usarla desde el navegador
• Puedes organizar tus archivos

Propiedad básicas que tiene cualquier elemento en Figma

• Posición
• Tamaño
• Rotación
  1. Relleno
  2. Opacidad
  3. Borde
  4. Efecto
     1. Opacidad de relleno
     2. Opacidad de capa

Opiniones personales sobre Figma

Creo que Figma es la mejor herramienta de UX/UI, vengo de la suite de adobe y la gran diferencia es que FIgma hace que todo sea mucho más sencillo, comodo, intuitivo, es menos saturante y el entorno de Figma es agradable, te da muchas opciones de forma gratuita y la verdad es que tiene muchos recursos en la comunidad para practicar. Creo que uno de los problemas de adobe es que no es amigable con los usuarios nuevos, aparte de que si tienes una computadora de gama baja, muy dificilmente vas a poder usar sus servicios de forma optima, como figma lo puedes usar hasta en el navegador, le da libertad a los creadores con pocos recursos de crear, simplemente me encanta Figma.

Excelente clase! Actualmente en la mayoria (por no decir todas) las ofertas laborales de diseñadores UX/UI tienen como requisito manejo de FIGMA.

Figma es todo , el nivel de trabajo en equipo es excepcional. Muy aparte su comunidad, creación de UI Kits, Plugins no lo tiene otro.
No es bueno casarse con una herramienta… SI pero Figma en lo persona lo tiene todo…

¿Por qué Figma? Todo está en la nube del programa y se estará guardando automáticamente, también se puede compartir el proyecto con más personas y es funcional tanto en windows como en mac lo que hace que sea una herramienta muy colaborativa para el desarrollo de proyectos web.

**Propiedad básicas que tiene cualquier elemento en Figma** - Posición - Tamaño - Rotación 1. Relleno 2. Opacidad 3. Borde 4. Efecto 1. Opacidad de relleno 2. Opacidad de capa

Un fichero de diseño digital es un archivo digital que contiene información y datos que se usan para crear gráficos, imágenes y otras piezas de diseño. Los ficheros de diseño digital generalmente se guardan en un formato digital específico, como el formato de archivo SVG, PNG o JPEG, que se puede abrir y editar con un software de diseño digital específico. Estos archivos pueden incluir texto, imágenes vectoriales, imágenes de mapa de bits, capas, objetos vectoriales, formas, colores y otros elementos de diseño.

Usé Adobe XD pero sin embargo Figma resulto demasiado util, intuitivo y practico, que bueno ver en este curso que lo recomiendan!

La única cuestión que le veo problema es si yo lo se usar y los demás no, es trabajar solo en el programa.

Figma está muy orientado al trabajo colaborativo. Y tiene una gran compatibilidad, desde trabajar en el navegador web hasta trabajar en distros de linux

Clase 3 - Introducción al software

Repaso de la clase

¿Cuáles son las etapas a nivel general por las que pasamos en diseño digital?

• Búsqueda de la solución a un problema.
• Encontrar qué medio se va a usar para resolver el problema.
• Identificar qué herramienta usará para solucionar el problema

¿Cuál es la herramienta que podemos usar para exportar de manera rápida un problema en diseño digital?

• Papel y lápiz.

¿Qué herramientas de software podemos usar en diseño digital?

• Lightroom.
• Blender.
• Photoshop.
• Illustrator.
• Indesign.
• Sketch y Figma

¿Para qué nos sirve Lightroom?

• Para catalogar, retocar y organizar nuestras fotografías.

¿Para qué nos sirve Blender?

• Lo usamos en el modelado 3D.

¿Para qué nos sirve Photoshop?

• Para retocar imágenes.

¿Para qué nos sirve Illustrator?

• Para ilustración vectorial.

¿Para qué nos sirve Indesign?

• Para el diseño editorial.

¿Para qué nos sirve Sketch y Figma?

• Para diseño UI/UX.

¿Cuáles son las características de Figma?

• Todos los ficheros o archivos estarán en la nube.
• Permite compartir fácilmente nuestros ficheros o archivos con una URL.
• Se pueden asignar roles y permisos.
• Autoguardado.
• Es 100% una plataforma colaborativa.
• Es multiplataforma.

¿Qué tipo de vistas tenemos de nuestros ficheros o archivos en Figma?

• Tabla
• Miniatura.
• Listado.

¿Cuál es la estructura de la ventana de un fichero o archivo en Figamma?

• Barra de navegación
  • Botón de Home.
  • Fichero activo.
  • Ficheros abiertos.
• Barra de herramientas
  • Herramientas principales para diseñar (dibujar, vectores, texto).
  • Acciones para compartir, previsualizar y prototipar.
• Sección principal.
  • Panel de capas
  • Canvas
  • Panel de propiedades.

¿Por qué el panel de propiedades es importante?

• Porque este cambia dinámicamente dependiendo de lo que tengamos seleccionado en nuestro canvas.

¿Qué usamos para organizar nuestro diseño en Figma?

• Capas

¿Cómo podemos alterar el orden de las capas?

• Mouse: Dando clic y arrastrando las capas de arriba abajo.
• Atajos de teclado CTRL + ALT + ↑ (Arriba) y CTRL + ALT + ↓ (Abajo).

¿Cuáles son las propiedades básicas y que todo elemento tiene en Figma?

• Posición.
• Tamaño.
• Rotación.
• Relleno.
• Opacidad.
• Borde.
• Efecto.

¿Qué pasa si agregamos opacidad al relleno?

• Esto solo afectará al relleno del elemento y no al borde.

¿Qué pasa si agregamos opacidad a la capa?

• Esto afecta al relleno y al borde del elemento.

Debemos conocer el medio y el problema. Una vez que tengamos claro el problema podremos saber que vamos a resolver.

Me pregunto cuantos de nosotros empezamos en el diseño digital sin saberlo, dibujando en paint.

Para mi fue primero paint, luego descubrí photoshop, ahora practicamente todo lo hago desde una sola app: Figma.

Gracias

Para que me muestran esto si ya esta el curso de figma. Dios mío quien diseño la rutas?