😱 ¿Se acerca el final de Figma? Diseño + IA - Review de tldraw.com (makereal)
Вставка
- Опубліковано 8 лип 2024
- ¿Acabará la IA con Figma? En esta píldora repasamos makereal.tldraw.com, que utiliza inteligencia artificial para convertir bocetos en código real de manera revolucionaria en el diseño. Se compara con las capacidades de Figma y se exploran ejemplos de su funcionamiento.
0:00 - Intro
0:49 - Figma y Jordan Singer
1:58 - tldraw.com ¿qué es es?
4:00 - Ejemplo 1: Botón que cambia el color.
6:24 - Ejemplo 2: Creador de avatares random.
7:59 - Ejemplo 3: Accordion, con neumorphism style.
10:17 - Ejemplo 4: Lógica de flujo de review.
12:22 - Ejemplo 5: Crear web con estilo de un ejemplo como Stripe.com
🧠 Nueva herramienta que incorpora IA para convertir bocetos en código real.
🔄 Cambia el paradigma del diseño, superando a herramientas como Figma.
💻 Se muestra su funcionamiento con ejemplos: creación de botones, generador de avatares y un acordeón.
🚀 Utiliza Tailwind CSS y permite una rápida generación de código funcional.
📝 Ofrece capacidades avanzadas como generación de lógica de programación.
👩💻 Potencialmente revolucionario para diseñadores y desarrolladores.
Pros frente a Figma
🧠 Incorpora inteligencia artificial para convertir bocetos en código real, lo que acelera significativamente el proceso de desarrollo.
💻 Permite una rápida generación de código funcional, lo que puede ahorrar tiempo y recursos en el desarrollo web.
📝 Ofrece capacidades avanzadas y brinda flexibilidad en el diseño de interfaces interactivas.
👩💻 Potencialmente revolucionario para diseñadores y desarrolladores al cambiar el paradigma del diseño y el desarrollo web.
Contras de tldraw frente a Figma
🤖 Aunque la IA es poderosa, puede no ser tan versátil como las herramientas manuales de diseño en Figma en términos de personalización y control completo.
🖌️ Figma es una herramienta ampliamente establecida y utilizada en la industria del diseño, con una comunidad sólida y una amplia gama de complementos y recursos disponibles.
📚 Figma ofrece una mayor cantidad de recursos de aprendizaje y documentación debido a su longevidad en el mercado, lo que facilita la adopción y formación de equipos.
🚀 La implementación de tldraw en los flujos de trabajo existentes puede requerir tiempo y esfuerzo de adaptación, mientras que Figma se integra fácilmente con otros servicios y herramientas.
🌐 La disponibilidad y la estabilidad a largo plazo de tldraw en comparación con Figma pueden ser inciertas, ya que es una herramienta relativamente nueva en el mercado.
Locuraaaaaa!!!! Testing estos días. Madre mía. Como enseño tailwind, HTML, CSS al estilo clásico 🤯
Impresionante!
Increíble!
Que espectacular! Gracias por la píldora Raúl!
me ha encantado el video.
Impresionado me hallo! 🤯 Siempre a la última... Hay que seguir muy atentos! Gracias Raúl!
Gracias a ti!
WOW!!
¡Excelente video, Raúl! Creo que sería interesante un próximo video en donde muestres como se puede seguir "desafiando" a esta herramienta con los prompts hasta lograr un diseño lo más fiel posible al que tengas en mente. Ya sea mejorando los textos para que apliquen la voz y el tono de nuestra compañía, pidiendo que aplique el branding de nuestro producto, que tome datos de nuestro design system, etc. Saludos desde Argentina 🇦🇷
Gracias por el feedback ;) Quiero hacer esta semana una segunda parte con más ejemplos y el modelo de pago de ChatGPT 4Vision. A ver que tal sale. 🤗
Me ha volao la cabeza!!
molaria mas videos de tldraw
Tiene posibilidades monstruosas, me encantan estas cosillas. Gracias, Raúl 🫂
Totalmente Raúl, todo por hacer 🤩
Tienes ahí a Eric Flat! Qué grande
En shock!
bueno bueno!
jajajajaj madre mia que cantidad de extensiones en el navegador!!! ya veo de dónde viene el diógenes de los plugins de Figma, que locura....
Faaaaa 💥💥😳😳
Uf. Es tremendo esto. Las dinámicas se ven luego de que sucedieron como el conectar puntos de Steve Jobs. Esto tendrá su propia evolución más allá de nosotros y veremos si podemos subirnos a la ola o quedar ahogados. Digo esto porque habrá que reinventarse -una vez más- y ver donde aportamos valor como diseñadores. A priori creo que habría un mix entre diseño y frontend, mucho mas mancomunado que en la actualidad. ¡Qué lejos quedan los tiempos de aprender un par de soft y tirar con eso 5 años!
Raúl, gracias infinitas por traer siempre lo último, siendo portavoz de hacia donde irá la cosa. En mi caso, gracias a ti, por haberme hecho conocer Framer me ha cambiado la forma de trabajar.
Hola Martín, que alegría siempre leerte. 🙌 Hay que seguir conectado a esta revolución que es lo más importante que ha pasado desde la creación de internet. Saldremos adelante, seguro. A seguir dándole caña también a Framer. 🚀
Justo lo que esta haciendo Figma y competidores como Penpot, por ejemplo
Creería que el rol de UI designer como tal ya estaría desvaneciendose no? porque pasamos directamente de hacer el wireframe a ya dejarlo listo en ui en unos segundos.
El buen designer es aquel que comienza con wireframe, hasta el entregable al desarrollador. Nunca he estado de acuerdo en separar UI y UX, el perfil siempre fue UX/UI o incluso un Product designer.
Y si aún así deseas hablar solo de UI, seria un especialista enfocado en sistema de diseño.
@@PaulJonathan29 Depende, cuando son proyectos que son más de largo plazo si pueden requerir una investigación constante así como de testeo de usabilidad por parte de UX, y eso sin contar los copys también, Es por eso que en este caso si es mejor separar el rol.
Que pasadaaa , pensar que al momento de prototipar interacciones complicadas en unos segundos los puedo sacar
Súper ilusionante lo que nos espera. Gracias por comentar. ;)
Yo aprendiendo Figma y me sale ese título 😢 ¡ya valió todo!
Jaja, tú sigue aprendiendo Figma que le queda mucha vida 🚀
Lo mismo me pasó, quedé 😱🤯
Shh dime tu q uno tiene q aprender a pogramar
Muy interesante. El código generado en su HTML es semántico ? Podra estar optimizado para SEO lo que creemos? o Solo es para prototipos?
El código es bastante bueno, pero no se si valdría para este caso, lo siento. Dependerá del caso.
Tengo miedo y me entusiasma a partes iguales. Mil gracias por tu curro, Raúl, eres nuestro pequeño diazepam
Jaja Inma, piropazo ❣️
Hola Raúl. Muchas gracias por tu video y tus explicaciones.
¿Te quería preguntar si nos podrías compartir uno de los códigos que generaste? Por favor
Quisiera probar los códigos para ver si funcionan en mi editor visual de páginas web antes de gastar mi dinero, aunque probablemente igual lo haga. ajaja
Gracias
Hola! Si entras a ChatGPT puedes adquirir el mínimo de tokens que son 5 euros y te da para un montón de pruebas, 👌
Superr🎉 que saltos cuanticos esta dando el diseño ayayai, haz utilizado uizard? Tambien incorpora ia con prompt para crear toda una web
Hola, esto va muy rápido... UIzard lo usé en los tiempos que empezó con Sketch... Ahora hay herramientas mucho más potentes, pero habrá que estar con 100 ojos. ;)
@@RaulMarin_Figma muy cierto, a mi me ha facilitado la vida, gracias por tus videos, estoy por aprender framer!
Genial@@marcosgonzalez9922 Framer es una herramienta genial 👌
¡Ojo con esta herramienta!
Me llama la atención... ¿Crees que sería capaz de traducir sketches y a la vez, si le proporcionamos un link a nuestro design system y le decimos que lo use, podría generar los diseños directamente adaptados a un design system?
Hola, eso que comentas es 100% posible. El equipo de Airbnb ya tenía cosas parecidas hace años y lo compartían por aquí 🥳🥳 airbnb.design/sketching-interfaces/
Muy interesante! Me pregunto si no hay algún problema de seguridad por eso de los NDA
Hola! Bueno con los NDA ha problema siempre en todo lo que hagamos. Igual que los hubo con la nube etc. Ya iremos viendo como avanza todo esto y su legislación ;)
Hola Raúl, excelente video, pero entre a la página y la eliminaron, no pude revisarla
Hola Luis, ¿a qué página te refieres? tldraw funciona a tarves de este enlace makereal.tldraw.com/
Hola buenas que precio aprox tiene su uso
Hola pues la API 4V(ision) que es un pago extra a los 20 euros de ChatGPT4 se tarifica por cada 1000 tokens. Por request yo diría que sale a unos 0.03 euros. La página de pricing es esta openai.com/pricing
dios... mío..
Gracias Raúl. Voy buscando financiación para abrir una floristería
🤣🤣
Jaja, la montamos juntos ;)
Existe forma de conseguir una api key gratis? O como se hace?
No se pueden usar las API Keys gratis. Hay que pagar como mínimo 5$
Tengo GPT-4 y saqué mi API key, pero al hacer clic en "make real", me aparece un error que dice que mi key no existe o que no tengo acceso. Por cierto, soy de Latam.
tengo que pagar por una key?
Hola, si, funciona solo con la API 4Vision que es un pago extra de tokens. Adicional al pago pro de ChattGPT de 20$.
Grabaré un video esta semana haciendo mas pruebas y hablando del modelo de negocio de OpennAI
@@RaulMarin_Figma donde encuentro esa tarifa de pago? cual es el precio del pago extra? es del mismo gpt? o es del makereal?
@@bohorquez1452 En la página de ChatGPT tienes el pricing de uso de esa API por tokens (puedes pre-comprar lo que necesites) De momento tldraw es free.
Hola! y para crear lo que queramos tenemos que pagar no?
😊
Así es! Requiere pago extra de la API de ChatGPT
@@RaulMarin_Figma que valor tiene? Y se puede después exportar a framer o Figma?
¿Se puede editar? ¿Se puede llevar a Figma para trabajar?
Hola, lo que se puede hacer es traer de Figma el diseño e iterarlo aquí.
Saludos!! pero pide una clave api, como se puede obtener?
Hola! La APi para poder usar esta aplicación es de pago en OpenaAI
Quien me presta una API de chatgpt-4 :(
Es lento, consume mucha memoria y es bastante bobo para hacer codigo, en esencia funciona por similitud estadistica, no piensa y actua para crear el codigo.
Gracias por tu opinión Carlos. Tienes toda la razón en que queda mucho por mejorar. Lo interesante, a mi modo de ver, es como está cambiando la manera de trabajar con herramientas de diseño. Ahí tenemos mucho recorrido todavía y cada vez serán menos torpes. 🤗
@@RaulMarin_Figma todas las herramientas basadas en chatgpt funcionan bajo un paradigma que requiere supervicion y entrenamiento constante para parecer inteligente aún así es incapaz de hacer cálculos simples o utilizar la lógica para llevar a cabo algo. Watson era mucho más interesante.