COMO DISEÑAR UNA APP MOBILE? | tutorial en FIGMA 2022

Поділитися
Вставка
  • Опубліковано 9 лис 2024
  • Bienvenidos a un nuevo video tutorial de figma, en el cual repasamos el proceso de como diseñar una aplicación móvil en figma, en este tutorial repasaremos algunos aspectos tales como la interfaz UI y UX en figma, hacer botones, y en una próxima entrega podemos repasar las animaciones en figma.
    Sígueme en:
    dribbble.com/o...
    behance.net/ot...
    / otigutierrez
    / otigutierrez94

КОМЕНТАРІ • 134

  • @OtiGutierrez
    @OtiGutierrez  2 роки тому +29

    Hola amigos! les dejo por acá otro video bastante útil de las herramientas y funciones de figma
    ua-cam.com/video/inlaQSRuEww/v-deo.html

  • @ASMRyanira
    @ASMRyanira 2 роки тому +8

    Acababa de descargarme Figma y quería un tutorial para ir probando funciones y tal y me ha sido super útil. Fácil de seguir y el tiempo me ha pasado volando. ¡Gracias!

    • @OtiGutierrez
      @OtiGutierrez  2 роки тому

      excelente May! te dejo otro por aca por si quieres seguir aprendiendo donde explico un poco mas en detalle

  • @holgeredudangulocastillo645
    @holgeredudangulocastillo645 26 днів тому +2

    Este si explica muy bien. Con este tutorial me quedo 👍🏽

  • @brunogortarisimeoni
    @brunogortarisimeoni Рік тому +4

    Genio total Oti! Estoy muy agradecido con todo lo aprendido y enamorado de los resultados obtenidos!
    ¡Gracias!

  • @matiiaas182
    @matiiaas182 Рік тому +3

    Tutorial que va al grano muy bueno!

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

    Wow Gutierrez muchísimas gracias por este Tutorial, la verdad que no sabía por dónde comenzar, todo está muy bien explicado. Gracias. Gracias. Gracias.

  • @personalbranding772
    @personalbranding772 Рік тому +2

    Hola, amé tu vídeo. Estoy iniciándome en el mundo del Diseño UX/UI y me fue superútil. Claro está, apliqué algunas de las prácticas que realizaste. Gracias.

  • @davcinalfon9318
    @davcinalfon9318 Рік тому +6

    Gracias Oti. por tu valioso tiempo.
    Yo estoy nueva en figma, te agradecería que siempre mencionaras las teclas que usas para saber como se hace.🙂😊

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 роки тому +12

    Estaría genial subieras más material para ir aprendiendo diseño con Figma y como ir usando sus herramientas , me suscribo , saludos .

  • @nazarenavazquez5719
    @nazarenavazquez5719 Рік тому +4

    20:04 alt y shift para q no se nos mueva
    20:21 add autolayault . Mantiene el espaciado correctamente

  • @Mystyc_Gero
    @Mystyc_Gero 2 роки тому +4

    Excelente! Sos un genio! Me salvaste el proyecto final de mi curso! Gracia Gracias!

  • @JoséPiano-j2n
    @JoséPiano-j2n 2 місяці тому

    Me encantó ese tutorial muchas gracias!!!! Lo estoy poniendo en práctica!! Explicas muy bien 😊😊

  • @Jesusrev
    @Jesusrev Рік тому +26

    Esta muy bueno el tutorial y estoy practicando con el, pero me gustaria que hicieras un tutorial explicando como hacer funcional el diseño. Es decir, como animar los botones, los slides, y la navegacion. Se que haria mas largo el tutorial pero es mas facil aprender asi, que ver todas las cosas por separado

    • @davcinalfon9318
      @davcinalfon9318 Рік тому

      Estoy de acuerdo.

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

      Para hacerlo funcional te tocaría utilizar algún lenguaje de programación como C# utilizando .Net Maui te puede servir, etc.

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

      con axure rp puedes diseñar y meterle animación, saludos

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

    Excelente, me sirvio mucho. Tendras algun curso en UDEMY actualzado, me lo compraria ya. Esta muy entendible este tutorial pero necesito mucho mas alla. Gracias

  • @annaneokov
    @annaneokov Рік тому

    Sigui todos los pasos y pude diseñar mi primer app en figma. Muchas graciaas

  • @Sorprendente1
    @Sorprendente1 Рік тому

    Gracias Hermano, nisiquiera habia terminado de ver el video y me avente un monton de paginas ya hasta ahorita pude terminar de ver el video, pero gracias:3

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

    Practique y aprendi! Graciassssssssssss!!

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

    Muchas gracias , salve mi tesis gracias a tu ayuda!!

  • @worknotalento
    @worknotalento Рік тому +2

    Hola ! Gracias por el video. ¿A partir de este diseño en Figma se podría crear una aplicación con el mismo figma? Gracias y un saludo

  • @cevanni_
    @cevanni_ Рік тому +7

    Muy buen video me sirvió muchísimo, podrías hacer un video explicando como pasar este diseño a código?

    • @MrEmiliosp
      @MrEmiliosp Рік тому +1

      estoy en las mismas jaja

  • @AngelABT10
    @AngelABT10 2 роки тому +3

    Excelente video.. pero como hago que sea mas interactivo para el cliente. me explico: Que pueda darle a botones de login y te mande a tu cuenta, o que ya dentro de algo te haga una accion.
    Saludos

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

    ESTARIA PIOLA QUE DEJES EL PROYECTO

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

    Espectacular

  • @josemiguelsenecadelatorren5418
    @josemiguelsenecadelatorren5418 10 місяців тому

    muy claro y preciso 10 de 10

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

    excelente, muy buenisimo

  • @yudelkabormita7780
    @yudelkabormita7780 Рік тому

    Excelente. Gracias por tu explicación

  • @RelaxingMusicFonti
    @RelaxingMusicFonti Рік тому

    Gracias por el tuto, excelente paso a paso. Como hago para volverlo interactivo...

  • @valentingalesio7850
    @valentingalesio7850 10 днів тому

    Gracias oti !

  • @frproductionsDG
    @frproductionsDG Рік тому +2

    hola bor, como se hace despues para plasmar lo que se diseño a la web digamos que sea funcional???

  • @exelobregon
    @exelobregon 2 роки тому

    Muy buena explicación, y para mi buena práctica. Gracias

  • @anibalasprilla85
    @anibalasprilla85 2 роки тому +1

    Hola a todos, Oti gracias por compartir el conocimiento... pero como paso a usar lo diseñado en Figma en React Native?

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

    Mil gracias!!!!! me has salvado

  • @Mitteralter
    @Mitteralter 19 днів тому

    Se conecta ? Para cuando se de play sea dinámico y se pueda navegar entre pantallas ?

  • @aldomolina6925
    @aldomolina6925 Рік тому

    Excelente, Muchas gracias!

  • @xmagic98
    @xmagic98 2 роки тому +2

    se agradecería un tutorial del prototipado

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

    Muchas gracias!

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

    excelente en muy practico

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

    6:36 crear nueva capa

  • @monaurbana2
    @monaurbana2 2 роки тому +1

    hola hay alguna parte 2 de en donde hagas navegable la app?

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

    CHUUUUUUULADA GRACIAS AMIGO

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

      con gusto gohan, espero tu suscripcion!

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

    Capo!

  • @marcoshernandez3353
    @marcoshernandez3353 Рік тому +5

    Hola! excelente el tutorial, pero me gustaria saber como llegamos al tema de la funcionalidad, el slide de los elementos, el cambio del menu, etc...
    BTW, Suscrito de una vez

  • @deybetancourt2428
    @deybetancourt2428 2 роки тому

    Increibleeee todoo me ayudo muchisimo

  • @a.penate3017
    @a.penate3017 Рік тому

    gracias oti por el video, sabes como puede regresar una accion a como estaba antes? con en word donde le das a la flecha de atras para remover la accion? graxias

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

      Yo solo presiono Ctrl + Z y me funciona normal.

  • @hamburgueson_company
    @hamburgueson_company 2 роки тому +1

    Sirve Para Android 10 Xiaomi 9C No Sé Pregunto Estaría Que Así Sea

  • @francobubanz3655
    @francobubanz3655 Рік тому

    10 meses y el video más útil y corto 10 de 10, te pregunto cómo descargo lo que diseñe?

  • @alainbrizuela3718
    @alainbrizuela3718 2 роки тому +22

    Como llevo el diseño a android studio??

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

    7:52 nueva página

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

    amigo, y tienes o existe un tuto para obtener los codes de Figma para exportarlo a Android Studio ?

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

    Hola como lo.muestras a tus clientes???

  • @nelsonrivas9590
    @nelsonrivas9590 Рік тому

    Ofi saludos , donde podré escribirte en directo ?

  • @cadaherbe1620
    @cadaherbe1620 Рік тому

    muchas gracias, muy buena

  • @xmagic98
    @xmagic98 2 роки тому

    Excelente video gracias

  • @pablocigoy2170
    @pablocigoy2170 Рік тому

    muy bueno!

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

    Tremendo

  • @ChrisAranaDesign
    @ChrisAranaDesign 9 місяців тому

    gracias

  • @MrBredXD
    @MrBredXD Рік тому +1

    Hola, una duda, cuando escojo font awseme 5 free aun así no me deja observar el icono.

    • @OtiGutierrez
      @OtiGutierrez  Рік тому

      Hola Brian, fijate que el icono que quieres usar esta disponible en esa version de Font Awesome, (tambien hay font awesome light y regular) asegurate de usar el correcto

  • @alvaroasis
    @alvaroasis 11 місяців тому

    Amigo en que video (lo busque a la rapida y no encontre) enseñas a instalar el tema de la font awesome 5??? gracias saludos!

    • @OtiGutierrez
      @OtiGutierrez  10 місяців тому +2

      saludos Alvaro, puedes revisar mis primeros videos, donde pasamos diseño a codigo, ahi explico como instalarlo a detalle

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

    Pero para que funciones como sería?

  • @gabylu661
    @gabylu661 10 місяців тому

    buen video!!!

  • @mileydismiranda2933
    @mileydismiranda2933 Рік тому

    Graciaaaaas ❤

  • @danielruiz2864
    @danielruiz2864 2 роки тому

    Buen video, gracias

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

    Estimado, sino me reconoce el icono fontawesome a pesar de que cambie el tipo de letra?

  • @moisesjaramillo8466
    @moisesjaramillo8466 11 місяців тому

    ¿pero como lo conectas para que cambie de frame?

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

    oye amigo y las interacciones de menu y botones?

    • @zelaya29
      @zelaya29 2 дні тому

      figma solo es un simulador

  • @lucario1DC
    @lucario1DC 2 роки тому

    Que interesante nuevo sub

  • @xcolori
    @xcolori Рік тому +1

    excelente

  • @AzaxM-C
    @AzaxM-C 2 роки тому

    hola muy buen video, solo que a mi solo se logran ver algunos iconos y otros no :(

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

    14:22 como hacer animacion a un objeto

  • @edudelolmo8192
    @edudelolmo8192 2 роки тому

    Hola, Puedes compartir el proyecto figma? Gracias

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

    Holaaa!! necesito ayuda. No puedo pegar iconos de font awesome. Aguien me puede ayudar. Gracias

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

    solo faltó el como hacer los registro y el olvidé mi contraseña, lo demás estuvo bien. Buen tutorial...

  • @gabotuterror9670
    @gabotuterror9670 7 місяців тому +1

    Como hago si no me sale la imagen del icono menu , aun cuando lo estoy cambiando a tipo de texto : Font Awesome 5 free

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

      Tengo el mismo problema, ¿Alguien sabe como?

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

      @@ramirezdemariaycamposisaac1215 la descargue nomas y la copie y pegue como imagen. Pero no se como solucionarlo de la otra manera

  • @martinasilva14
    @martinasilva14 2 роки тому

    Buenas! Estoy con un tema. Estoy diseñando una app, y tambien tengo imagenes donde debo hacer scroll para el costado… para eso debo hacer otro frame o agrando la pagina y diseño todo alli! Muchas gracias

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

    aja osea es solo diseño, como uso el diseño donde lo puedo usar?

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

    xd cuando intento crear el font awesome, escojo la fuente se desaparece._., alguna solucion

  • @prismaintelectual
    @prismaintelectual 2 роки тому

    Como puedes colocarle a un botón 58 x 308 en vez de 50 x 300?? que ansiedad T_T

  • @vaitiareweb8370
    @vaitiareweb8370 2 роки тому +1

    gracias por el material, super util. ¿como se hacen las animaciones de los botones como se ve en el video de inicio?

    • @tamierda20
      @tamierda20 2 роки тому +2

      Habia entrado a mirar solo eso =( jajaj

  • @anabelbeltran4950
    @anabelbeltran4950 9 місяців тому

    Hola, perdón por mi desconocimiento, pero FIGMA es gratuito?

    • @OtiGutierrez
      @OtiGutierrez  9 місяців тому

      Hola!, Figma ofrece una version gratis y una de pago, puedes usar la que mas te convenga!

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

    11:30 como cambiar una imagen formas

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

    like y sub, se puede crear una app de sticker para WhatsApp?

  • @josemariogastelumsoto8243
    @josemariogastelumsoto8243 2 роки тому

    Como se pone un logo para que el fondo (de la imagen de logo) sea transparente ?

    • @OtiGutierrez
      @OtiGutierrez  2 роки тому

      Saludos Jose Mario, deberia bastar que la imagen sea formato png (y tenga el fondo transparente) figma respeta el formato y muestra el logo sin fondo

  • @maycolsamaniego9234
    @maycolsamaniego9234 Рік тому

    Hola Donde puedo descargar todo ese archivo hecho ??

  • @animalspaceoficial
    @animalspaceoficial 2 роки тому

    Hola Oti Gutiérrez me podrías decir como instalar una app creada en figma por favor 🙏😭🤧

    • @tecnozex4040
      @tecnozex4040 Рік тому +1

      Eso no ese posible, debes crear la app como tal para usarla, figma solo te hace una representacion grafica del diseño

  • @majo53847
    @majo53847 2 роки тому

    no usas la grid 8 se ve visualmente muy desorganizado

  • @axelmanuelperezpantoja
    @axelmanuelperezpantoja Рік тому

    Como creo el archivo

  • @TomasLopezTV
    @TomasLopezTV 2 роки тому +8

    genial pero ahora como la llevo al celular, su programacion???

    • @mauriciolopez8036
      @mauriciolopez8036 Рік тому +6

      Amigo esto es solo UI diseño ahora llevarlo al celular lo hace el equipo de desarrollo que son ingenieros informáticos con especialidad en app y tratan de hacer lo más parecido posible al diseño, es como el arquitecto y sus planos vs el ingeniero y sus albañiles

    • @mauriciolopez8036
      @mauriciolopez8036 Рік тому +2

      Conlleva mucho código por detras

    • @cityfight6665
      @cityfight6665 Рік тому +4

      Puedes usar algún framework y realizar la app Mobil, ejemplo React Native, Angular con Ionic o por último java con Android studio.

    • @gaby_dflores
      @gaby_dflores Рік тому +1

      Esto es como un ejemplo de lo que tú deseas!! Es como mostrarle un corte de cabello a tu peluquero y el lo realiza... Es igual acá...

    • @Iris-h2r
      @Iris-h2r Рік тому

      En los equipos de desarrollo es importante tener antes un diseño establecido antes de la implementacion ..

  • @SuperRedbuff
    @SuperRedbuff Рік тому

    Una vez que terminaste todo tu proceso de diseñar en figma, cual es el siguiente paso?

    • @didierlugo7892
      @didierlugo7892 Рік тому

      soy muy nuevo en esto pero creo que ya pasaría al proceso de programación código código código

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

    creo que figma a tenido cambios y este tutorial no me esta ayudando con la nueva versión de figma, alguien podría ayudarme por fa o es que me instale una versión pirata XD no lo se

  • @MilanPinto-w3q
    @MilanPinto-w3q 3 місяці тому

    ONI-CHAN

  • @conglo3650
    @conglo3650 Рік тому

    Creo que no sirve de mucho tu tutorial si no usas autolayout

  • @Ander.Holden
    @Ander.Holden 9 місяців тому

    Muy bueno y todo, pero no somo maquinas para seguir a tu ritmo, explicar super flahs

  • @MilanPinto-w3q
    @MilanPinto-w3q 4 місяці тому

    soy gay mama

  • @jonathanromero3034
    @jonathanromero3034 2 роки тому

    Le doy un dislike por lo mismo, tutorial youtubers no hacen las cosas paso a paso si no que dejan los vacios, platzi 2 , no enseñas a crear un projecto si no que deja a la persona busque a ver si encuentra el mismo acceso que esa persona.

    • @andrearasparia3069
      @andrearasparia3069 2 роки тому

      Si la persona quisiera buscarlo por si misma no vería este tutorial.

  • @zanares1015
    @zanares1015 Рік тому

    Porfavor diseñadores web empezar a trabajar con múltiples de 16px que luego para pasarlo a rem es un coñazo xd

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

      Tengo entendido que se trabaja con múltiplos de 8 px

  • @mnr1510
    @mnr1510 Рік тому +2

    ahora como lo paso a codigo html,css y js

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

    siempre he dicho que se aprende mas haciendo que viendo clases de fundamentos

  • @ChrisAranaDesign
    @ChrisAranaDesign 9 місяців тому

    gracias