Cómo Hacer un Diseño en Figma en Autolayout (Responsive Design)

Поділитися
Вставка
  • Опубліковано 11 вер 2024
  • Aprende como hacer un diseño web en versión móvil en Figma con Autolayout.
    ✅ Descarga Figma en: oscarrgb.com/e...
    ✅ Curso Figma Completo:
    🏆 Suscríbete para más:
    / @oscarrgb
    🚀 Únete a la Academia para Emprendedores Digitales co-freelance
    🎁 15% de descuento con cupón "youtube" 👉🏻 co-freelance.com 👈🏻
    #diseñoweb #figma #diseñomovil

КОМЕНТАРІ • 46

  • @AlvaroCampello-qw6yh
    @AlvaroCampello-qw6yh 3 місяці тому +17

    Que hagas un ciclo superior de diseño web y que tu profesora no sepa explicarte los autolayouts de forma correcta, vengas a youtube y un verdadero conocedor de la materia te lo explique en 10 minutos no tiene precio. mi like y mi suscripción jefe. Más como tú en las aulas y no tanto dinosaurio que no se reinventa con las nuevas tecnologías

    • @elsy3646
      @elsy3646 Місяць тому +1

      es cierto a mi me paso exactamente igual

    • @luisgsotom4164
      @luisgsotom4164 5 днів тому

      @@elsy3646 pasa, gaste en dos cursos pagos y son una calamidad, tire el dinero.. y el gran oscarRGB resolvió mi duda de manera rápida y clara.. gracias oscarRGB!

  • @EMC2707
    @EMC2707 Місяць тому +4

    Excelente explicación. Ahora le voy a bajar la velocidad y lo voy a ver 10 veces para entenderlo. Jaja. Fuera de broma, me quedó más claro y lo voy a practicar hasta que me quede. Gracias Óscar.

  • @ndc-01
    @ndc-01 4 місяці тому +6

    Siempre he sido de Indesign, Illustrator, y photoshop. Nunca me interesó el diseño web, o UI, pero al ver tus vídeos se me ha abierto un mundo. Figma es una impresionante herramienta.
    Muchas gracias.

    • @OscarRGB
      @OscarRGB  4 місяці тому +2

      Eso nos ha pasado a muchos, ojo, que es un vicio y acabarás haciéndolo casi todo con Figma jejeje

  • @vict0ria_23
    @vict0ria_23 4 місяці тому +2

    Me encanta! me ayuda muchísimo, justo estaba con muchas dudas y buscando aprender

  • @darianamchacon4115
    @darianamchacon4115 29 днів тому

    3 meses resumidos en 17 min...amo ♥!!!!!

  • @marialauramanduca2722
    @marialauramanduca2722 4 місяці тому +1

    La verdad explicado muy claro y yendo al punto, sin tanta parla. Gracias.

    • @OscarRGB
      @OscarRGB  4 місяці тому

      Muchas gracias Maria ☺️

  • @hugostiglitz1254
    @hugostiglitz1254 7 днів тому

    Muchas muchas gracias, muy buena la explicación que das, vi otros videos en donde terminaba mas perdido.... nuevo seguidor.

    • @OscarRGB
      @OscarRGB  7 днів тому

      @@hugostiglitz1254 muchas gracias!

  • @jonathanyanez5695
    @jonathanyanez5695 5 місяців тому +1

    Muchas gracias amigo, estoy aprendiendo con figma y es de los mejores videos que he podido ver. Mucho curro tiene esto. Gracias!!!

    • @OscarRGB
      @OscarRGB  5 місяців тому

      Muchas gracias! Acuérdate de suscribírte para no perderte los siguientes.

  • @nuriawettstein
    @nuriawettstein 3 місяці тому

    Sos un genio, wacho! Pensé que solo tenías IG y ahora te veo por youtube.

    • @OscarRGB
      @OscarRGB  2 місяці тому +1

      muchas gracias! me alegra que me conozcas por otras redes!

  • @blader6685
    @blader6685 4 місяці тому

    Gracias por la explicacion, la verdad antes no sabia bien como implementar el autolayout, pese a tener experiencia ya que todo lo hacia de manera manual, pero con tu video reducire mi flujo de trabajo a la mitad.

    • @OscarRGB
      @OscarRGB  4 місяці тому

      me alegro mucho! entender el autolayout es un antes y un después!

  • @paolasalas7010
    @paolasalas7010 4 місяці тому

    De todos los videos que he visto este es el mejor, muchas gracias la explicación es buenísima!

    • @OscarRGB
      @OscarRGB  4 місяці тому

      Muchas gracias Paola!!!!☺️

  • @KarinaElenaAquiseQuispe-ql8ro
    @KarinaElenaAquiseQuispe-ql8ro 5 місяців тому

    Muchas pero muchas mucha muchisisisisisisisimas gracias! Bien explicado, conciso directo a la vena!

    • @OscarRGB
      @OscarRGB  5 місяців тому

      Muchas gracias Karina!

  • @carlahormaiztegui8203
    @carlahormaiztegui8203 3 місяці тому

    Un capo! Súper claro todo, excelente como lo explicas 🙌 Gracias por el video!

    • @OscarRGB
      @OscarRGB  3 місяці тому

      Muchas gracias!!🤩

  • @designermecs
    @designermecs 7 місяців тому

    mil gracias por la ayuda! tu video ha sido el más completo de todos los que he visto y me ha ayudado un montón a terminar de dominarlo. los últimos 10 minutos del video son la clave 🔥 mi reto es pasar de un frame desktop (1440px de ancho) a responsive (por ej. 375px) y que todo se vaya ajustando solo. ¿Esto se puede? 👀 ¡Muchas gracias de nuevo por compartir el contenido!

    • @OscarRGB
      @OscarRGB  7 місяців тому

      Si se puede! Autolayout + warp o existe un plugin llamado breakpoints que sirve para ello 😉

  • @diegomantilla6714
    @diegomantilla6714 3 місяці тому

    Espectacular video bro, me salvaste la vida. QUE CRACK!!!!!!

    • @OscarRGB
      @OscarRGB  2 місяці тому

      Muchas gracias Diego!

  • @tvmines
    @tvmines 18 годин тому

    no es suficiente el like! exploto de agradecimiento! :D

    • @OscarRGB
      @OscarRGB  7 годин тому

      @@tvmines muchas gracias! Puedes seguirme en insta también, seguro que encuentras algo que te ayude 😀

  • @MrMoneks1
    @MrMoneks1 2 місяці тому

    Gracias por compartir tu conocimiento. Tengo una duda, abría algun problema si se manda un proyecto de figma al area de desarrollo sin autolayout? a parte de ayudarte a hacer responsive tiene otra utilidad para los desarroladores? 🤔

  • @luisafernandabautista2540
    @luisafernandabautista2540 2 місяці тому

    Hola Oscar! Muchas gracias por el tutorial !! Hace poco comencé a familiarizarme con Figma y me gustaría adoptar las mejores prácticas. Tengo la duda de cómo debo nombrar cada capa sin tener tanta confusión o repetición de palabras pero usando nombres cortos para ser eficientes.
    En qué orden o secuencia debería aparecer ? Por ejemplo, si tengo 3 grupos de izquierda a derecha dentro de mi frame, estos deberían aparecer en la lista de las capas de arriba a abajo :
    Grupo 1, desayuno
    Grupo 2, almuerzo
    Grupo 3, postre
    o por el contrario quedarían según se van creando:
    Grupo 3, postre
    Grupo 2, almuerzo
    Grupo 1, desayuno
    Con respecto al manejo de pixeles no tengo ni idea, alguna recomendación? He escuchado que todo debería trabajarse en distancias de multiplos de 8, pero en tus ejemplos vi que usas distancias diferentes, cómo se maneja ese tema? Gracias.

    • @OscarRGB
      @OscarRGB  2 місяці тому +1

      En el tema nombrar capas no hay ninguna ley, algo que tu entiendas bien y que los colaboradores puedan interpretar, mantener esos criterios en todo el proyecto, a mi me gusta ser muy concreto para evitar errores, contenedor postres, contenido postres, titulo postres… para el tema del tamaño si, la regla de los 4 y 8px, eso si siempre comienzo esa tabla con 2px,4,8,12…

  • @LisandroTomasTudelaMorello
    @LisandroTomasTudelaMorello 9 місяців тому +1

    buenisimo el video! gracias!

  • @Arias_AndresToro
    @Arias_AndresToro 3 місяці тому

    Ya quisiera yo que illustrator tuviese esta herramienta

  • @danielarp4515
    @danielarp4515 2 місяці тому

    Muy bueno, muchas gracias

  • @danieloLema
    @danieloLema Місяць тому

    Pero finalmente el ejercicio de autolayout no se pudo hacer con las imágenes de retratos en círculo? lo intente y no pude:(

  • @devsantiago
    @devsantiago 5 місяців тому

    Excelente vídeo.

  • @darksitopx
    @darksitopx 10 місяців тому +1

    WOW 😊

  • @SailynAblakck
    @SailynAblakck 22 дні тому

    intento hacerlo con una estructura que tenia montada en figma como proyecto y me pasa que sigo los pasos, hug, fix container, (son mas imagenes que texto) y cuando meto todo en un autolayout y wrap para un diseño responsive me mueve todo de lugar y se descuadra, no sé que hago mallll ayuda porfa

    • @OscarRGB
      @OscarRGB  22 дні тому +1

      Ostras sin ver lo que estás haciendo es muy complicado poderte ayudar mira que tengas todos los elementos en fill container si quieres que lleguen de punta a punta, crea tamaños horizontal máximo y mínimo de cada elemento para que hagan el salto en wrap justo cuando tu quieras.

  • @freddygarcatwz
    @freddygarcatwz 6 місяців тому

    Buen vídeo amigo!

    • @OscarRGB
      @OscarRGB  5 місяців тому

      Gracias Freddy!

  • @johannavelazco9702
    @johannavelazco9702 4 місяці тому

    👏👏👏

  • @leosombra8708
    @leosombra8708 8 місяців тому

    muy buen video

    • @OscarRGB
      @OscarRGB  5 місяців тому

      Gracias Leo!