Juan Pablo Olmo

18.6K posts

Juan Pablo Olmo banner
Juan Pablo Olmo

Juan Pablo Olmo

@juanpol

En @Freepik, creo y evoluciono el sistema de diseño y las landing pages, mejorando la UX y potenciando nuestras herramientas de IA.

ÜT: 36.722571,-4.24925 Katılım Şubat 2007
168 Takip Edilen1.2K Takipçiler
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
📌 Git para UX designers La semana pasada compartí con una compañera una guía muy básica de Git en markdown. La comparto aquí porque cada vez veo a más UX y Product Designers trabajando cerca del código, pero sin una base mínima para no ir a ciegas. No es una guía avanzada. No pretende enseñar Git “bien”. Es simplemente el flujo básico real para poder trabajar sin depender siempre de otra persona. --- # clonar un repositorio # descarga el proyecto en tu ordenador git clone (aquí añades el link al repositorio.git) # entrar en la carpeta del proyecto cd repositorio # traer los últimos cambios del equipo # buena práctica antes de empezar a trabajar git pull # ver el estado de los archivos # qué has cambiado y qué está pendiente git status # ver el historial de commits # útil para entender qué se ha hecho antes git log --oneline # ver las ramas disponibles # la rama actual aparece marcada con * git branch # crear una rama nueva # para trabajar sin tocar main git checkout -b prueba-diseño # añadir cambios # prepara los archivos para guardarlos git add . # añadir solo un archivo concreto git add src/components/Button.jsx # crear un commit # guarda un punto de control con un mensaje claro git commit -m "ajustes de diseño en el perfil" # subir la rama nueva al repositorio remoto # solo la primera vez git push -u origin prueba-diseño # subir cambios habituales git push --- Lo justo para entender qué está pasando y no ir a ciegas. Si quieres más: Escribe "git" en comentarios y te paso el post que he publicado en mi blog donde comparto otras 2 ideas que estamos usando para ponérselo más fácil a UX y Product Designers. #git #github #vibecoding #productdesign
Juan Pablo Olmo tweet media
Español
0
0
0
28
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
Ayer compartí Pincel con la comunidad UX fomo. Hoy me encontré otra herramienta parecida. Y antes de la UX Talk me puse a probar. Pencil en Antigravity: arrancó sin problemas. Landing mínima en Astro. Siguiente paso: seguir en Cursor. Diseño, código y producto cada vez más mezclados. Qué 2026 más bonito se nos viene 🚀
Juan Pablo Olmo tweet media
Español
0
0
0
199
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
📌 Vibe coding y datos reales: cuándo y cómo entra Supabase en mi flujo En este proceso con IA hay una cosa que he dejado de hacer: tratar los datos como algo que se resuelve al final. Sigo empezando por diseño y sigo separando bien las fases, como te dije en el post anterior, pero ahora pienso la estructura de datos desde el inicio, aunque no la conecte todavía. No para “programar” antes de tiempo, sino para no romper decisiones de producto más adelante. Cuando trabajas con Supabase y herramientas como @cursor_ai , Google Antigravity o Google AI Studio, preparar la capa de datos con antelación cambia bastante el enfoque. Diseñas sabiendo qué información va a existir, cómo se va a relacionar y qué necesita cada pantalla, incluso aunque estés trabajando con datos simulados. En la práctica, esto implica tener claro desde el principio qué datos básicos vas a necesitar del proyecto en @supabase : 1️⃣ Project ID 2️⃣ API keys 3️⃣ Project URL No para usarlos todavía en producción, sino para definir bien la estructura, preparar la conexión correctamente y no improvisar más adelante. La conexión real puede llegar después, pero este trabajo previo evita rehacer pantallas, flujos y lógica cuando entran los datos de verdad. En el post que publiqué en mi blog explico dónde localizar exactamente esta información dentro de Supabase juanpol.com/conectar-supab… #vibecoding #cursor #supabase #productdesigner
Juan Pablo Olmo tweet media
Español
0
1
0
25
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
📌 Vibe coding, 3 fases y un MVP que funciona Estos días he estado trabajando en el MVP de una app que quiero llevar a producción. No voy a hablar de la idea ni de la temática. Lo interesante ha sido cómo he trabajado el proceso usando IA. En lugar de soltarle a la IA un prompt gigante esperando que lo hiciera todo, estructuré el trabajo en 3 fases claras, cada una con un tipo distinto de decisiones: 1️⃣ Diseño a nivel de UX Aquí solo pensé en pantallas, estados y flujos. Qué ve el usuario, qué puede hacer y qué ocurre después. Sin estética, sin estilos, sin jerarquía visual fina. 2️⃣ Funcionalidades y lógica interna En esta fase definí estados, reglas, persistencia y comportamiento en el tiempo. Cuándo algo se guarda, cuándo cambia y qué pasa al volver a entrar en la app. 3️⃣ Coherencia y refinado Aquí ajusté microcopy, eliminé texto técnico y me aseguré de que cada pantalla tuviera sentido sin obligar al usuario a pensar de más. Sin mezclar tareas. Sin delegar decisiones de producto en la IA. La IA fue una herramienta de ejecución rápida, no quien decidió por mí. juanpol.com/vibe-coding-mv… He escrito un post en el blog donde explico el enfoque con calma y comparto los 3 prompts completos que utilicé (ligeramente modificados). #VibeCoding
Español
0
1
0
33
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
📌 Crea tu HUB de recursos UX usando VIBE CODING youtube.com/live/ZgZqIorVx… semana pasada empezamos con una parte y hoy seguimos con otra, el hub de recursos que pidió la comunidad UX fomo.
YouTube video
YouTube
Juan Pablo Olmo tweet media
Español
0
1
0
27
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
📌 Diseño de producto aplicado a una comunidad UX youtube.com/live/8g9-gGnJW… Arrancamos con una charla muy ligada a la comunidad UX fomo. Una sesión para cruzar ideas y debatir qué tendrá (y qué no) nuestro sitio web. Si quieres unirte y pensar diseño de producto y comunidad, aquí tienes el link.
YouTube video
YouTube
Juan Pablo Olmo tweet media
Español
0
1
0
25
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
Ayer tocó arrastrar vectores... Después de los "problemas" que tuvimos con Figma Make volvemos a Figma Design y @figma Sites para no parar el Portfolio UX de la Comunidad UX fomo. Toca parar brevemente, revisar lo hecho, decidir con qué nos quedamos y seguir adelante. Si nos quieres acompañar ya tienes el link del tutorial en mi canal. 😘
Juan Pablo Olmo tweet media
Español
0
1
0
48
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
🧠 Antes de empezar a construir en @figma Make, necesitas una base clara: tus guidelines. En el nuevo tutorial te enseño cómo crearlas paso a paso: cómo definir los frameworks CSS, los breakpoints, los estilos y los tokens de color que marcarán el tono de todo tu proyecto. Diseñar con IA no es dejar que la máquina decida. Es aprender a hablarle con precisión. Por eso este tutorial va de algo más que diseño: va de pensar como un ingeniero sin dejar de ser diseñador. Busca en YouTube: “Figma Make para UX Designers: piensa como un ingeniero”
Juan Pablo Olmo tweet media
Español
0
1
2
54
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
🔥 Hoy envié un correo a los suscriptores de mi lista. Conté lo que pasó después del directo del viernes… Cuando dije “me voy a dormir” y acabé montando una app nueva en Figma Make conectada con #Firebase. Sí, a medianoche. Sí, funcionó. Y sí, sigo en shock. Si quieres leer el mail completo y enterarte antes que nadie de lo que estamos construyendo, avísame y de paso el link. Esto no para 🚀
Juan Pablo Olmo tweet media
Español
0
1
0
51
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
📌 Estuve sentado delante de Figma Make durante horas. Lo mezclé con Markdown, HTML y CSS. Cuatro ingredientes distintos que empiezan a hablar el mismo idioma cuando haces vibe coding. Uno de los últimos tutoriales te va a interesar, sobre todo si quieres construir web apps.
Juan Pablo Olmo tweet media
Español
0
1
0
78
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
Esta semana hicimos la design critique del proyecto Cinebla de nuestro compañero Leo Martin Hablamos del UX y el UI pero también del negocio. Una design critique diferente a otras, pero muy, muy interesante. Gracias Leiyo! 🙌
Juan Pablo Olmo tweet media
Español
0
1
0
61
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
🔥Figma Make no lo cuenta en su documentación Me pasó algo curioso con Figma Make. Probé algo que no he visto en ningún tutorial ni vídeo. Funcionó. Es un tip que servirá a muchos UX designers. Y lo cuento en el mail que mando hoy a todas las personas que se unieron a mi newsletter.
Juan Pablo Olmo tweet media
Español
0
1
1
68
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
📌 Publica tus proyectos UX sin código con Figma Make En el nuevo tutorial te muestro exactamente lo que te toca hacer ahora: publicar tus proyectos UX en tu portfolio. Vas a ver el flujo real de trabajo en @figma Make, paso a paso, para que entiendas: Cómo crear nuevas páginas, añadir las imágenes y la información de tus diseños Cómo mostrar tu nuevo proyecto en la home de tu portfolio UX Si ya estás diseñando tu portfolio y quieres que empiece a funcionar, este tutorial te va a servir muchísimo. Ye paso el link?
Juan Pablo Olmo tweet media
Español
0
1
0
74
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
📌 Lo que aprendí copiando de Figma Make a Figma Design Aquí debajo te pego la primera parte del mail que acabo de enviar a los suscriptores de mi newsletter. Es la escaleta que usé en el tutorial de ayer para exprimir la nueva función que Figma Make ofrece al usuario para llevar a Figma Design los desarrollos que hizo en Make. La escaleta: 1️⃣ Cómo copiar y pegar de Figma Make a Figma Design - Copiar y pegar - Copiar Dropdown - Copiar distintos breakpoints - Cómo se pegan los Auto Layout? - Cómo se pegan los Grids? - Cómo se pegan las Constraints? - Cómo se pegan los Components? 2️⃣ Analizamos nuestra Home (Vibe Coding con cabeza) - Hay Frametitis? - Comparemos nuestro ProjectCard hecho en Figma Design con el hecho en Figma Make 3️⃣ Hagamos algo de Vibe Coding prompt + librerías - Prompt de Erika - Hay Frametitis? - Mi prompt - Hay Frametitis? Lo respondimos todo y en el mail mando acceso directo al tutorial.
Juan Pablo Olmo tweet media
Español
0
1
0
60
Juan Pablo Olmo
Juan Pablo Olmo@juanpol·
UFFF... La design critique del proyecto de Dillan se coló entre las 3 mejores de toda la historia de UX fomo. Como te lo dije dentro de la sala, GRACIAS por presentar tu proyecto. GRACIAS a todos los demás por participar con vuestro feedback de tantísima calidad. Estoy orgulloso de todo lo que estamos haciendo juntos. Seguimos 😘
Juan Pablo Olmo tweet media
Español
0
1
0
38