No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Introducción al software

3/20
Recursos

Bienvenido al fascinante mundo del diseño digital, donde la creatividad y la tecnología se fusionan para resolver problemas de manera eficiente e innovadora. Este viaje comienza entendiendo la importancia de elegir la herramienta adecuada, y aquí exploraremos algunos aspectos esenciales que todo diseñador debe conocer.

¿Cómo elegir el software adecuado para diseño digital?

Antes de sumergirte en el proceso creativo, es crucial identificar el problema que deseas resolver y el medio que vas a utilizar. Aunque el papel y lápiz son ideales para plasmar ideas iniciales, necesitarás herramientas más avanzadas al clarificar tu visión. Existen programas especializados para cada etapa del diseño digital:

  • Adobe Lightroom: Perfecto para catalogar y retocar fotos.
  • Blender: Ideal para diseño y modelado en 3D.
  • Adobe Photoshop y Pixelmator: Herramientas esenciales para retocar imágenes.
  • Adobe Illustrator: Utilizado para ilustración vectorial.
  • Adobe InDesign: Especializado en diseño editorial.
  • Sketch y Figma: Principales programas para diseño digital enfocados en UX/UI.

¿Por qué Figma es la herramienta ideal para diseñadores?

Figma se destaca en el mundo del diseño digital por varias razones que facilitan el trabajo diario de los diseñadores:

  • Almacenamiento en la nube: No te preocupes más por perder archivos. Con Figma, todo se guarda automáticamente en la nube.
  • Colaboración facilitada: Permite a múltiples personas trabajar en el mismo archivo en tiempo real, añadir comentarios y compartir proyectos con un simple enlace. Perfecto para el trabajo remoto.
  • Accesibilidad multiplataforma: Funciona en cualquier sistema operativo, ya que es una aplicación web. Solo necesitas un navegador de internet para acceder a tus diseños.

¿Cómo organizar tu trabajo en Figma?

Al ingresar a Figma, encontrarás una estructura organizada que te ayudará a gestionar tus proyectos de manera efectiva:

Navegación y herramientas

  • Barra de navegación: Aquí puedes volver a la página principal y administrar los archivos abiertos.
  • Barra de herramientas: Herramientas clave para el diseño, como dibujos vectoriales y textos, así como acciones de compartir y previsualizar.

Estructuración del archivo

  • Panel de capas: En la parte izquierda, muestra un listado de capas que puedes reorganizar mediante atajos de teclado o arrastrando con el mouse.
  • Canvas: Situado en el centro, es donde verás y modificarás todos tus diseños.
  • Panel de propiedades: Localizado a la derecha, es dinámico y se actualiza según lo seleccionado.

Propiedades y ajustes de los elementos

Figma te permite modificar diversas propiedades de cada elemento:

  • Propiedades básicas: Posición, tamaño y rotación.
  • Estilos visuales: Relleno, opacidad, bordes y efectos. La opacidad puede aplicarse al relleno individualmente o a toda la capa, afectando tanto el fondo como los bordes.

Armarse con estas herramientas no solo optimiza el proceso de diseño, sino que también empodera a los diseñadores para innovar y crear soluciones efectivas. Mantente curioso y sigue explorando este vibrante campo. ¡Tu potencial es ilimitado y siempre hay algo nuevo por aprender!

Aportes 33

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

ahora ha cambiado las herramientas que **antes estaba en la parte superior pasaron a la parte inferior** y ahora figma esta en español !!! ![](https://static.platzi.com/media/user_upload/image-83ed261b-065a-4d16-900c-71da29c8be2c.jpg)
Herramientas: FIGMA POR QUE? TODOS TUS FICHEROS VAN A ESTAR EN LA NUBE EL FICHERO LO PODES COMPARTIR CON UNA URL TIENE GUARADO DE AUTOMATICO 100% COLABORATIVA Y COMUNICACION DISPONIBLE PARA CUALQUIER PLATAFORMA FICHERO DE FIGMA: NAVEGATION HOME FiCHEROS ABIERTOS Y ACTIVOS BARRA DE HERRAMIENTAS: PANEL DE CAPAS CANVAS PANEL DE PROPIEDADES: dinamico Propiedades: dinamico Posicional tamaño Rotación Relleno opacidad Borde Efecto Opacidad de relleno vs opacidad de la capa
La clase introduce el software que se utilizará en diseño digital, enfatizando la importancia de entender el problema antes de elegir una herramienta. Se presentan diversas herramientas como Lightroom, Blender, Photoshop, Illustrator, InDesign, Sketch y Figma. Se destaca Figma por su almacenamiento en la nube, guardado automático, colaboración en tiempo real, y su accesibilidad desde cualquier navegador. Además, se explica la interfaz de Figma, incluyendo la barra de navegación, la barra de herramientas, y el panel de propiedades, así como la organización mediante capas.
El problema delimita el medio, el medio da estructura a la herramienta, la herramienta posibilita el diseño.
**Puntos importantes de la clase**: 1. **Todo diseño comienza con un problema**: Entender el problema es fundamental antes de comenzar el diseño. 2. **Herramientas digitales**: Existen diversas herramientas con propósitos específicos, como Lightroom, Blender, Photoshop, Illustrator, InDesign, entre otras. En este curso se enfocará en **Figma**. 3. **Características de Figma**: * Almacenamiento en la nube. * Compartición mediante enlaces. * Guardado automático. * Colaboración en tiempo real. * Accesible desde cualquier plataforma con un navegador. 4. **Interfaz de Figma**: * Barra de navegación (parte superior). * Barra de herramientas (dibujo, texto, compartir, previsualizar). * Panel de capas (izquierda), canvas (centro) y panel de propiedades (derecha). 5. **Propiedades de los elementos en Figma**: * Posición, tamaño y rotación. * Relleno, opacidad, bordes y efectos. * Diferencia entre opacidad aplicada al relleno y opacidad aplicada a toda la capa.

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

hola me llamo kliker
Para iniciar, siempre Papel y lápiz, es el punto de partida para comenzar a diseñar, recalcando que para una buena interfaz todo comienza por reconocer bien un problema
Gracias por la clase, y me gusto como se empezo "Todo comienza por un problema a resolver" y creo que no estaría de más complementar que ese problema realmente resulva laa o las necesidades de los usuarios.
Miren que Figma recientemente lo he utilizado para un proyecto reciente en el que me encuentro colaborando, y solamente me he metido con lo que nos mandan el equipo de UX en cuanto a las capas y a todo el diseño, pero aunque a mi si me gustaria entrarle de lleno a ello.
justo termine un curso de figma aquí en platzi, conceptos básicos y me me sorprendió todo lo que hace figma.
Por qué Figma y no Adobe XD que es en español y hace casi lo mismo? En Adobe XD también podemos copiar y pegar vectores, compartir el trabajo para desarrolladores y trabajar en equipo.
Figma me recuerda mucho a Ps
* ![]()**Todos tus ficheros van a estar en la nube** con lo cual te tienes que desocupar de decir dónde está tu fichero si es guardado la última carpeta si lo has borrado,  * ![]()Tienes guardado automático, por lo cual te olvidas de tu fichero se ha guardado y se ha ido la luz y guardado los últimos cambios es una herramienta 100% colaborativa mucha gente puede colaborar fichero diseñar dejar comentarios. * ![]()La organización los elementos en firmas se hace a través de capas recuerda que en la parte izquierda nuestro panel de capas y este es el orden en el cual tus capas van a estar localizadas en tu fichero que tenemos uno 1, 2 y 3 y aquí puedes ver como alterar el orden de los atajos de teclado te sirven para cambiar simplemente el orden. Gracias.

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.
No soy experto en Figma pero se me hizo muy fácil utilizar con mi experiencia previa con photoshop, prototipamos un app web y conseguimos un contrato, estoy muy interesado en seguir en él carrera de UI UX

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?