OscarRGB
OscarRGB
  • 185
  • 389 807
De Figma a Framer (Fácil y Rápido)
Convierte tu diseño web de Figma a Framer paso a paso.
📋 Resumen:
00:00 ¿Qué es Framer y por qué deberías conocerlo?
00:29 Comparación con el proceso previo de HTML
01:00 Preparación del diseño en Figma
01:50 Configuración inicial en Framer
03:00 Copiar y pegar capas desde Figma a Framer
05:00 Configuración de vistas responsivas en Framer
07:00 Ajustes para Tablet y Móvil
09:00 Detalles finales de diseño y responsive
12:00 Publicación de la web en un dominio gratuito
15:00 Conclusión y próximos pasos: Webflow, WordPress y más
❤️ Curso Figma Completo (Gratis): ua-cam.com/video/Smp-u-8ynbE/v-deo.html
✅ Descarga Figma en: oscarrgb.com/empezar-figma
✅ Descarga Elementor Pro: oscarrgb.com/elementor
🏆 Suscríbete para más:
ua-cam.com/channels/9asWl8y30o-l3N72JVFrAA.html
🚀 Únete a la Academia para Emprendedores Digitales co-freelance
🎁 15% de descuento con cupón "youtube" 👉🏻 co-freelance.com 👈🏻
#Figma #Framer #DiseñoWeb
Переглядів: 325

Відео

✅ De Figma a Web en minutos, las 2 mejores opciones
Переглядів 66128 днів тому
Convierte tus diseños de Figma en una web en HTML y CSS en cuestión de unos minutos. 📋 Resumen: 00:00 Introducción y objetivos del video 00:48 Cómo convertir diseños de Figma a HTML sin escribir código 02:30 Selección del diseño base en Figma 05:30 Ajustes de diseño para un responsive perfecto 06:56 Uso del plugin Anima: exportar a HTML 10:50 Añadir interacciones y animaciones sin código 13:10 ...
✅Guía para Auditar el UX de una Web/App
Переглядів 788Місяць тому
Una auditoría UX es la prueba de fuego para demostrar todos tus conocimientos como profesional del UX. En este video veremos el paso a paso de como crear una auditoria UX profesional, además veremos varias herramientas que nos ayudarán a trabajar de forma más eficiente en cada uno de los procesos. 1:15 El Brief 2:20 Definir objetivos 2:48 Métricas 3:40 Usuarios 5:20 Reglas heurísticas 7:19 Arqu...
🚨 Vuelve la IA en Figma: Ahora es Más Potente y Sin Copiar a Apple 💥
Переглядів 3,2 тис.2 місяці тому
Ya podemos volver a usar la IA generativa de Figma que llevábamos tiempo esperando. Una herramienta super útil que nos va a ayudar a desencallarnos o a no enfrentarnos a la pantalla en blanco. ✅ Descarga Figma en: oscarrgb.com/empezar-figma ✅ Descarga Elementor Pro: oscarrgb.com/elementor 📋 Resumen: 00:00 Introducción y el regreso de la IA en Figma 01:02 Historia de la IA en Figma y problemas p...
Animaciones en Figma (Tutorial Completo)
Переглядів 2,1 тис.4 місяці тому
Animaciones en Figma (Tutorial Completo)
✅ Cómo Afrontar un Proyecto UX (Paso a Paso)
Переглядів 1,1 тис.5 місяців тому
✅ Cómo Afrontar un Proyecto UX (Paso a Paso)
De Figma a Web en Segundos! Sin Código 🤯 El Nuevo Plugin de Wix Studio ✨
Переглядів 3,1 тис.5 місяців тому
De Figma a Web en Segundos! Sin Código 🤯 El Nuevo Plugin de Wix Studio ✨
Probamos la nueva IA de Figma
Переглядів 4,7 тис.5 місяців тому
Probamos la nueva IA de Figma
Variantes con Variables en Figma (Tutorial Español)
Переглядів 8296 місяців тому
Variantes con Variables en Figma (Tutorial Español)
✅Componentes de Figma - Así funcionan (Ejemplos)
Переглядів 2,1 тис.6 місяців тому
✅Componentes de Figma - Así funcionan (Ejemplos)
Crea tu Design System en Figma (Tutorial Completo)
Переглядів 7 тис.7 місяців тому
Crea tu Design System en Figma (Tutorial Completo)
Así se trabaj un proyecto de UX / UI (El Proceso)
Переглядів 4,4 тис.8 місяців тому
Así se trabaj un proyecto de UX / UI (El Proceso)
🏆Los Mejores Plugins de Figma para Crear Variables
Переглядів 6248 місяців тому
🏆Los Mejores Plugins de Figma para Crear Variables
Variables en Figma (Colores) - Paso a Paso
Переглядів 1,8 тис.8 місяців тому
Variables en Figma (Colores) - Paso a Paso
✅Bases del Diseño UX / UI - Atomic Design & Tokens ¿Qué es?
Переглядів 2,7 тис.8 місяців тому
✅Bases del Diseño UX / UI - Atomic Design & Tokens ¿Qué es?
Los Mejores Shortcuts de Figma (TOP 10)
Переглядів 2769 місяців тому
Los Mejores Shortcuts de Figma (TOP 10)
Convierte tus diseños de Figma en WEB
Переглядів 24 тис.9 місяців тому
Convierte tus diseños de Figma en WEB
✅ Curso WordPress y Elementor PRO 2024 - Tutorial Completo
Переглядів 24 тис.10 місяців тому
✅ Curso WordPress y Elementor PRO 2024 - Tutorial Completo
Elementor va a traer una novedad que va a hacer nuestra vida muy facil. #ux #elementor #diseñoweb
Переглядів 21411 місяців тому
Elementor va a traer una novedad que va a hacer nuestra vida muy facil. #ux #elementor #diseñoweb
✅ Configuración Elementor Pro antes de empezar y SER MÁS EFICIENTE
Переглядів 1,7 тис.Рік тому
✅ Configuración Elementor Pro antes de empezar y SER MÁS EFICIENTE
✅Variables en Figma 2024 (Tutorial y Ejemplo Práctico)
Переглядів 2,5 тис.Рік тому
✅Variables en Figma 2024 (Tutorial y Ejemplo Práctico)
✅ Tutorial Slider en Elementor Pro con Animaciones (Modo Avanzado)
Переглядів 2,1 тис.Рік тому
✅ Tutorial Slider en Elementor Pro con Animaciones (Modo Avanzado)
🌈 Teoría del Color - Diseño Gráfico
Переглядів 2,6 тис.Рік тому
🌈 Teoría del Color - Diseño Gráfico
✅ Componentes Interactivos en Figma 2024 (Tutorial y Ejemplo Real)
Переглядів 9 тис.Рік тому
✅ Componentes Interactivos en Figma 2024 (Tutorial y Ejemplo Real)
✅ Hacer Scrolldown en Elementor Pro (Truco) 💻
Переглядів 4,5 тис.Рік тому
✅ Hacer Scrolldown en Elementor Pro (Truco) 💻
Cómo Hacer un Diseño en Figma en Autolayout (Responsive Design)
Переглядів 25 тис.Рік тому
Cómo Hacer un Diseño en Figma en Autolayout (Responsive Design)
Diseño Web Movil ✅ Curso Diseño Web en Figma 2023 (Parte 13)
Переглядів 972Рік тому
Diseño Web Movil ✅ Curso Diseño Web en Figma 2023 (Parte 13)
Diseño Web Desktop ✅ Curso Diseño Web en Figma 2023 (Parte 12)
Переглядів 1,1 тис.Рік тому
Diseño Web Desktop ✅ Curso Diseño Web en Figma 2023 (Parte 12)
Diseñar Menú y sección Hero ✅ Curso Diseño Web en Figma 2023 (Parte 11)
Переглядів 1,2 тис.Рік тому
Diseñar Menú y sección Hero ✅ Curso Diseño Web en Figma 2023 (Parte 11)
Cómo Diseñar Botones Atractivos ✅ Curso Diseño Web en Figma 2023 (Parte 10)
Переглядів 1,2 тис.Рік тому
Cómo Diseñar Botones Atractivos ✅ Curso Diseño Web en Figma 2023 (Parte 10)

КОМЕНТАРІ

  • @estrelladeaurora6065
    @estrelladeaurora6065 День тому

    por lo que veo se esta haciendo un analisis que aria uno de marketing digital, Si uno solo va diseñar no le veo sentido

    • @OscarRGB
      @OscarRGB День тому

      El UX no es diseño, existe una pequeña parte en el UX que se llama UI y una parte del UI que es el diseño. Pero dentro del UX el diseño es una parte bastante pequeña, por eso no podemos centrar una auditoria UX en el diseño, sería un error, para eso podemos hacer una auditoría UI o de diseño visual.

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

    Esta muy bueno, por favor podrías hacer un tutorial de framer.

  • @alejosayas
    @alejosayas 4 дні тому

    Que buen laburo

  • @amaldo23
    @amaldo23 4 дні тому

    No veo el link para la descarga :(

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

    Excelente bro 🎉

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

    top

  • @_arkrois90
    @_arkrois90 8 днів тому

    gracias por el video, me gusto muchísimo y me abrió el entendimiento y me enseño que no me gusta para nada el ux soy mas del papel y diseñar que de tanta investigación y tanta muela

  • @arnaly11
    @arnaly11 8 днів тому

    Es una locura, lo estoy usando para un proyecto final de curso y es una joyita

  • @val-dm5pm
    @val-dm5pm 12 днів тому

    No pude dejar de ver a los ojos a ET 😭

  • @rebecalindo-cor
    @rebecalindo-cor 12 днів тому

    Holis estoy empezando en este mundo, y me causo mucha curiosidad de como colocaste ese 3D interactivo, de donde puedo sacar ese tipo de animaciones interactivas?

  • @reinantewhisper9333
    @reinantewhisper9333 16 днів тому

    Con esto se quedará un poquito atrás la IA de imágenes consistentes. De todos modos no entiendo como calcula con tanta precisión los cuerpos para que al rotar no tengan ni un solo fallo...

  • @iam__lenns.
    @iam__lenns. 19 днів тому

    eres el mejor, te lo juro, explicas de manera muy buena

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

      @@iam__lenns. muchas gracias!!!

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

    Oscar, das cursos en línea o algo así? Llevo 4 días viendo y practicando con el video, está excelente! Me gustaría seguir aprendiendo

  • @inteligenciafutura
    @inteligenciafutura 20 днів тому

    Aaaaaaaa o sea no sirve

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

      Vienes de hace mucho! haha ya vuelve a estar activa!

    • @inteligenciafutura
      @inteligenciafutura 20 днів тому

      @OscarRGB dónde está que no sale

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

      @ has de tener figma de pago y aparece en la barra flotante de herramientas tengo un video largo probándola de nuevo

    • @inteligenciafutura
      @inteligenciafutura 20 днів тому

      @@OscarRGB aaaaaaaaaaa si es de pago si que menos sirve

  • @gohan4896
    @gohan4896 21 день тому

    Hola, amigo, y en tu experiencia .....es mejor framer o anima? yo creo que es mejor anima.

    • @OscarRGB
      @OscarRGB 21 день тому

      @@gohan4896 bueno son cosas bien distintas, Anima es una ayuda para crear webs sin escribir código, o reduciendo esta tarea. Framer es una herramienta no code completa no code que te permite crear una web completa sin picar una sola linea de código.

  • @juanmanuelgarcia3367
    @juanmanuelgarcia3367 21 день тому

    Cual es el video completo :(

    • @iosoytravis
      @iosoytravis 13 годин тому

      parece ser que ya lo elimino de su canal

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

    Eres el puto amo, llegaras lejos bro!

    • @OscarRGB
      @OscarRGB 21 день тому

      @@pricetrex191 gracias amigo!!

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

    Para ti qué sería mejor? Wix o Elementor?

    • @OscarRGB
      @OscarRGB 21 день тому

      @@SoyJorgeLara complicado responder, las dos tienen sus mas y sus menos. Depende en cada caso usaría wordpress framer, webflow o wixstudio

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

    1:04:45 aca me quede

  • @marialaurazunda5698
    @marialaurazunda5698 24 дні тому

    La primera persona que lo explica muy claro !!! excelente contenido!!! y si pudieras hacer tablas!!! te agradecería un montón

    • @OscarRGB
      @OscarRGB 23 дні тому

      Muchas gracias María, tengo un video que hablo de tokens, pero en cada caso y necesidad de proyecto tendremos que crear nuestras tablas de forma distinta, a ver si me animo a hacer alguno mas :)

  • @Creativejungle_mkt
    @Creativejungle_mkt 25 днів тому

    ⭐⭐⭐⭐⭐

  • @alejandrogonzalezguzman2698
    @alejandrogonzalezguzman2698 26 днів тому

    Bro, te amo.

  • @verdugoyor
    @verdugoyor 28 днів тому

    Buenísimo, estaré expectante a los demás videos. Muy interesante el poder crear directamente desde Figma. Me pregunto si mantiene demasiado código basura o eso se podrá mejorar con algún plugin si lo llego a exportar a WP?. Más que nada por la penalización de Google y tiempos de cargas. Saludos maestro desde Chile 🤘🤘🤘

    • @OscarRGB
      @OscarRGB 23 дні тому

      En este caso es un código bastante limpio, pero tiene sus limitaciones. En el caso de exportar a Wordpress, lo veremos en próximos videos, se exporta como plantilla .json

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

    habrá que verlo en acción. No me gustaría vender ya la piel del oso.

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

    1:26 no me salen esas opciones

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

      Figma ahora lo ha actualizado, cuando lo seleccionas está en el panel derecho arriba del todo, pone qué tipo de elemento estás seleccionando, otro icono y seguidamente el de componentes, me pasó también, espero que te sirva. :)

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

    pORQUE LA BARRA A MI ME SALE MAS REDUCIDA Y ABAJO?

  • @karla.escobar.13
    @karla.escobar.13 Місяць тому

    holi! estaría genial un video sobre como optimizar el flujo; a penas encontré tu canal y qué joya, explicas bien bonito y conciso, sin duda contenido de calidad :)

    • @OscarRGB
      @OscarRGB День тому

      Muchas gracias! planteo el video que comentas!!

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

    Hola, se ve genial pero vas muy rápido 😢 no se pueden entender todos los pasos

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

    wow buen video gracias bro

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

      @@rubenn6160 muchas gracias!!

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

    Oscar a mi no me llega a salir lo de Design tools por lo cuál no puedo abrir el cuadro de Make prototipe, Hay alguna forma de poder activar esas funciones? Muchas gracias

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

    ya mero acabo todos los videos ajajajjaaj

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

      Eso es!!! a darle duro!!! haha gracias!

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

    hola me gastaría que hicieras un video de como hacer un portafolio tanto de UX , UI y juntos seria muy interesante y muy útil para muchos que estamos empezando.

  • @pe-mz9790
    @pe-mz9790 Місяць тому

    Tengo una duda, ya para hacer un diseño de pagina profesionalmente al cliente se le tendra que dar el diseño asi como muestras con los diseños de los botones, los colores etc etc?

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

    Este video no sirve, y no explica bien, no gasten su tiempo en esto.

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

    Antes el cliente decía: Puedes hacer que rote. Ahora: Puedes hacer que hable y cocine?

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

    Alguna manera de descargar desing system que no sea pagando co-freelance? Gracias. Algún video sino de ayuda de como crearlo? Un saludo

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

    Wow! También funciona para Divi??

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

    Estoy empezando en el diseño de páginas web. Me alegra encontrar tu canal. 👍

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

    Next cuando te clavaste en tema político, en tu referencia te fuiste a lo tendencioso.

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

      Como? creo que solo di datos objetivos y ninguna opinión, refréscame la memoria si no es así

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

    Hola tengo un problema no veo la IA en mi Figma y no entiendo cual puede ser el problema, la tengo de pago, si alguien puede ayudarme se lo agradezco ya que el soporte de figma parece invisible.

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

    Encontré tu canal ayer y estoy fascinada, lo que buscaba y bien explicado!

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

    Estoy sumamente agradecida con tu contenido!! Gracias por compartirlo. Una pregunta me gustaria saber si el curso de figma no lo vendes. Vi los cursos de la academia y me parecen increíbles pero la membresía mensual por los momentos no me lo puedo costear. Por eso me gustaria saber si en algún otro sitio tienes disponible únicamente el de Figma. Gracias de antemano.

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

      @@Teffanlu de aquí poco saco un nuevo curso de Figma actualizado que se venderá por separado :)

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

      @@OscarRGB gracias por tu respuesta, quedare pendiente con ese curso, me gusta como explicas y estoy sumamente interesada en aprender todo lo relacionado a figma

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

    Muchas gracias por el video!!. Estuve buscando el link de la página que citas en el minuto 17:20 pero no está en la descripción, me podrías comentar cuál es por favor?

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

    Mejor explicado imposible, gracias por compartir tu conocimiento.

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

      muchas gracias!

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

    Maravilloso

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

    Muchas gracias por el curso Oscar! Me ha sido de mucha ayuda👏

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

    estoy comenzando a conocer este programa y veo que tiene hasta para usarlo en la web y en el movil, estuve usando el google site para presentar trabajo pero esto es un nivel más para poder presentar proyectos! seguramente veas mis comentarios en tus demas videos xD

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

      Me alegra que entres a este mundo! Espero ver muchos comentarios tuyos! suerte en tu trayecto!!😍

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

    Excelente curso, muy completo, gracias por el tutorial.

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

      Muchas gracias!

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

    Hola! a mi si que me interesaría si hicieras un video de las etapas de flujo, yo lo vería entero aun si durara 3 horas 🤣 creo que es un tema muy importante e interesante 😜

    • @OscarRGB
      @OscarRGB День тому

      Muy buenas! pues anotado queda!!!

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

    Videazo!

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

      @@charliecazc muchas gracias!