00:00:00Este es Penpot, una herramienta de diseño de código abierto que compite con otras como Figma.
00:00:05Ahora, sí, al principio parece Figma, pero no se comporta para nada como ella.
00:00:10Porque bajo el capó, utiliza CSS real, no algo que tengas que convertir después.
00:00:15Y eso cambia el problema de la entrega de diseños de una forma importante.
00:00:18Déjenme mostrarles a lo que me refiero.
00:00:20Penpot es una herramienta de diseño y prototipado de interfaces basada en navegador.
00:00:29En la superficie, sí, suena como Figma o Sketch.
00:00:32Pero en realidad, aquí está la gran diferencia.
00:00:35Penpot es 100% de código abierto y está construido sobre estándares web reales.
00:00:40SVG, CSS Flexbox, Grid y HTML.
00:00:43Así que en lugar de diseñar dentro de algo que tienes que decodificar y desestructurar después,
00:00:49ya estás más cerca de cómo funciona realmente la web.
00:00:52Puedes autoalojarlo con Docker en un solo comando,
00:00:54que es lo que haré en este video, ya que eso es lo que me apasiona.
00:00:58Versiones de código abierto de herramientas y ver cómo se comparan.
00:01:01Ahora, con Penpot, los diseñadores siguen teniendo componentes, diseños y prototipos.
00:01:06Pero los desarrolladores obtienen la parte que realmente importa: una salida que parece código real.
00:01:11No hay una capa intermedia extraña, no hay que adivinar qué está pasando.
00:01:14Y es gratis.
00:01:15Archivos ilimitados, colaboradores ilimitados, por eso a la gente le importa esto.
00:01:20Si disfrutas de las herramientas de código abierto y los consejos de programación que aceleran tu flujo de trabajo,
00:01:23asegúrate de suscribirte al canal.
00:01:25Tenemos videos saliendo todo el tiempo.
00:01:27Ahora, Penpot es una herramienta de diseño.
00:01:28Entonces, ¿por qué debería importarte, especialmente si eres desarrollador?
00:01:31Porque esto soluciona un problema muy específico.
00:01:34El dolor de entregar un proyecto o convertir un diseño en código real.
00:01:39Penpot hace que el diseño se sienta nativo para la web.
00:01:42Así que cuando inspeccionas algo, no estás adivinando, lo estás leyendo.
00:01:46Déjenme mostrarles.
00:01:48Muy bien, momento de una demostración rápida, gente.
00:01:50Esto se está ejecutando en vivo en mi instancia autoalojada de Penpot.
00:01:54Levanté esto con un solo comando Docker Compose up usando el archivo
00:01:58Docker Compose que configuramos.
00:02:00Esto fue genial.
00:02:02Así que tomó algo de tiempo levantarlo, pero ahora que está en marcha, funciona de maravilla.
00:02:07Y obtenemos una buena página de inicio aquí, un aspecto limpio donde puedo crear un nuevo proyecto.
00:02:12Ahora vamos a construir algo, solo una tarjeta simple, nada elegante.
00:02:16Solo un contenedor, configurarlo en flexbox, añadir algo de relleno.
00:02:21Voy a añadir un título, algo de texto y un botón.
00:02:24Quizás añadir algo más aquí, otra tarjeta, puedo copiar y pegar.
00:02:28Haré algunas ediciones rápidas.
00:02:30Cambiaremos al modo de inspección.
00:02:32Y esta es la parte importante.
00:02:33Obtienes una estructura limpia en el CSS real, propiedades flexbox, espaciado, diseño.
00:02:39No es una traducción aproximada, es algo que ya entiendes.
00:02:42Puedes copiar esto y pegarlo directamente en tu proyecto.
00:02:46También tienes variantes, tokens, flujos de prototipado y exportación como SVG.
00:02:51Esa es la gran ventaja aquí.
00:02:52Esto elimina una tonelada de fricción para los equipos de desarrollo,
00:02:54especialmente cuando tú mismo eres dueño de toda la pila tecnológica.
00:02:58Ahora hablemos de la parte donde la mayoría de los desarrolladores se vuelven escépticos.
00:03:02Al principio, esto suena como, genial, otra herramienta de diseño.
00:03:06Pero la diferencia no es cómo se ve, es cómo funciona.
00:03:09Figma simula diseños.
00:03:12El diseño automático está inspirado en flexbox, pero aun así terminas traduciendo todo esto en tu
00:03:16cabeza.
00:03:17Penpot empieza mucho más cerca del CSS real, así que
00:03:21hay menos conversión mental entre el diseño y el código.
00:03:25Luego está el bloqueo, ¿cierto?
00:03:26Figma utiliza archivos propietarios.
00:03:29Tenemos modelos de precios por asiento.
00:03:31Penpot es de código abierto, así que puedes autoalojarlo.
00:03:34Tus datos permanecen en SVG, CSS y JSON.
00:03:38La entrega de diseños también es diferente porque en Figma se siente como una capa extra, ¿cierto?
00:03:42Modo de desarrollo, complementos, pasos adicionales.
00:03:45En Penpot, está integrado directamente.
00:03:47La vista de inspección ya está más cerca de lo que realmente necesitamos.
00:03:50Y para ser justos, Figma es genial.
00:03:53Lo uso, es enorme, es un ecosistema pulido.
00:03:56Pero Penpot está claramente construido pensando en los desarrolladores desde el principio.
00:04:00Entonces, ¿qué es lo que realmente les gusta a los desarrolladores de esto?
00:04:02Bueno, lo más importante que dije, ¿cierto?
00:04:04Es simple, el problema de la entrega de diseños se hace más pequeño.
00:04:07Eso es enorme para nosotros.
00:04:08Ya no estás haciendo ingeniería inversa de diseños.
00:04:11Estás leyendo algo que se mapea directamente a CSS.
00:04:15Eso también se refleja en los tokens de diseño.
00:04:18Colores, espaciado, tipografía, están estructurados de una manera que se siente más cercana a
00:04:22como ya piensas en código.
00:04:24Y el autoalojamiento es un gran problema para algunos equipos.
00:04:27Si te importa la privacidad, las herramientas internas, CI/CD, todo esto importa, ¿cierto?
00:04:33Pero el código abierto no es perfecto, ninguna herramienta es perfecta, incluso Figma, ¿verdad?
00:04:37Pero Penpot puede tener problemas con archivos muy grandes.
00:04:40El ecosistema de complementos es mucho más pequeño.
00:04:43Y si estás muy metido en Figma, entonces habrá una cierta curva de aprendizaje,
00:04:47pero sinceramente, es súper sencillo de aprender porque es una forma diferente de pensar.
00:04:51Así que sí, menos pulido en algunas áreas, pero una brecha mucho más pequeña entre diseño y
00:04:56desarrollo, que sinceramente es lo que muchos de nosotros buscamos.
00:04:59Ahora, ¿vale la pena usarlo?
00:05:01Yo creo que sí.
00:05:02Fue muy divertido.
00:05:02Disfruto de herramientas como esta.
00:05:03Así que para muchos de ustedes, desarrolladores, sí.
00:05:06Si estás trabajando en proyectos paralelos o cualquier cosa pesada en desarrollo, esto tiene sentido,
00:05:10especialmente si te importa ahorrar dinero, ¿cierto?
00:05:12Estás construyendo un MVP, estás construyendo algo como esto,
00:05:14estás tratando de evitar el bloqueo, y
00:05:16quieres obtener diseños que se traduzcan limpiamente en código.
00:05:19Ahora, si estás en una gran empresa con sistemas de diseño masivos,
00:05:23ya estás construido alrededor de Figma.
00:05:24Así que probablemente no vas a cambiar a esto, al menos no de la noche a la mañana, pero
00:05:28ese no es realmente el punto.
00:05:29Penpot no necesita reemplazar todo para ser útil.
00:05:31Para muchos equipos, para muchos de ustedes, cubre la mayor parte de lo que necesitan,
00:05:35hace que el desarrollo sea más rápido.
00:05:36Y es por eso que más desarrolladores están empezando a probarlo realmente.
00:05:39Reduce todo ese tiempo de entrega que toma llevar un diseño al código.
00:05:45Si quieres probarlo, es fácil.
00:05:46Ve a la aplicación de Penpot, usa la versión en la nube, o haz lo que yo hice.
00:05:50Autoalójalo con Docker si quieres más control, igual que aquí.
00:05:54Si disfrutas de las herramientas de código abierto y consejos de programación como este,
00:05:57asegúrate de suscribirte al canal de Better Stack.
00:05:59Nos vemos en otro video.