¿Qué es Penpot?

Penpot es una plataforma de diseño y prototipado completamente gratuita y de código abierto que está revolucionando la forma en que diseñadores y equipos crean interfaces digitales. Desarrollada por la empresa española Kaleidos, Penpot se presenta como una alternativa ética y accesible a herramientas propietarias como Figma o Adobe XD.

Lo que hace especial a Penpot es su compromiso con los estándares web abiertos: utiliza SVG como formato nativo, funciona completamente en el navegador sin necesidad de instalación, y permite una colaboración en tiempo real sin límites de usuarios ni proyectos.

¿Por qué elegir Penpot?

Libertad total: Al ser código abierto, no dependes de suscripciones costosas ni de cambios repentinos en los términos de servicio. Puedes incluso instalarlo en tus propios servidores si lo necesitas.

Escalabilidad: Diseñado pensando en equipos, Penpot facilita la creación de sistemas de diseño consistentes que crecen con tu proyecto. Sus bibliotecas de componentes y estilos compartidos aseguran que todo tu equipo trabaje con coherencia.

Colaboración real: Múltiples personas pueden trabajar simultáneamente en el mismo archivo, viendo los cambios en tiempo real, sin límites artificiales.

Basado en estándares: Al usar SVG y CSS, tus diseños son más fáciles de traducir a código real, acortando la distancia entre diseño y desarrollo.

Tutorial Básico: Crea tu Primer Diseño en Penpot

1. Comenzando

Accede a Penpot: Visita penpot.app y crea una cuenta gratuita. No necesitas descargar nada, todo funciona en tu navegador.

Crea un proyecto: Una vez dentro, haz clic en "Create new project" (Crear nuevo proyecto). Dale un nombre descriptivo como "Mi primera aplicación" o "Rediseño web".

2. Tu Primera Página

Crea un tablero (Board): Dentro del proyecto, haz clic en "Create new file" (Crear nuevo archivo). Se abrirá el editor principal con un lienzo en blanco.

Agrega un marco (Frame): Piensa en los marcos como las pantallas de tu diseño. Presiona la tecla "A" o busca el icono de marco en la barra lateral. Luego haz clic en el lienzo y arrastra para crear tu marco. También puedes elegir tamaños predefinidos como "Desktop" o "Mobile" en el panel derecho.

3. Añadiendo Elementos Básicos

Rectángulos y formas: Presiona "R" para rectángulos, "E" para círculos. Simplemente dibuja en tu marco arrastrando el cursor. Estas serán las bases de tus botones, tarjetas y contenedores.

Texto: Presiona "T" y haz clic donde quieras escribir. En el panel derecho puedes cambiar la fuente, tamaño y color. Usa textos para títulos, descripciones y etiquetas de botones.

Imágenes: Arrastra cualquier imagen desde tu computadora directamente al lienzo. Penpot la insertará automáticamente.

4. Personalizando tus Diseños

Colores: Selecciona cualquier elemento y busca el apartado "Fill" (Relleno) en el panel derecho. Haz clic en el cuadro de color para elegir el que prefieras. Puedes usar colores sólidos, degradados o incluso patrones.

Bordes y sombras: En el mismo panel lateral derecho encontrarás opciones para agregar "Stroke" (bordes) y "Shadow" (sombras). Estos efectos dan profundidad y profesionalismo a tu diseño.

Alineación: Selecciona varios elementos y usa las opciones de alineación en la barra superior para organizarlos perfectamente. Esto es clave para un diseño limpio y ordenado.

5. Componentes: Tu Mejor Aliado

Los componentes son elementos reutilizables que puedes usar una y otra vez.

Crear un botón reutilizable: Diseña un botón (un rectángulo con texto). Selecciónalo, haz clic derecho y elige "Create component" (Crear componente). Ahora puedes arrastrarlo desde el panel de Assets (Recursos) tantas veces como necesites.

Modificar componentes: Si cambias el componente principal, todos los demás se actualizan automáticamente. Esto es perfecto para mantener consistencia en colores, tamaños y estilos.

6. Prototipos Interactivos

Conecta tus pantallas: Cambia al modo "Prototype" en la parte superior. Selecciona un botón en tu diseño, verás aparecer un pequeño círculo azul. Arrastra desde ese círculo hasta otro marco para crear una conexión.

Prueba tu prototipo: Haz clic en el icono de "Play" (reproducir) en la esquina superior derecha. Ahora puedes interactuar con tu diseño como si fuera una aplicación real.

7. Compartiendo tu Trabajo

Exporta tu diseño: Selecciona cualquier elemento o marco, haz clic derecho y elige "Export" (Exportar). Puedes guardarlo como PNG, JPG o SVG según tus necesidades.

Comparte el enlace: En la esquina superior derecha, haz clic en "Share" (Compartir). Puedes generar un enlace público o invitar a colaboradores específicos para que editen contigo en tiempo real.

Consejos para Aprovechar Penpot al Máximo

Usa las cuadrículas (Grids): Actívalas en View > Show Grid. Te ayudarán a mantener todo alineado y proporcionado.

Aprende los atajos de teclado: Presiona "?" para ver una lista completa. Los básicos como V (seleccionar), R (rectángulo), T (texto) acelerarán mucho tu trabajo.

Crea bibliotecas de colores: Guarda tus colores principales en el panel de estilos para mantener consistencia en todo el proyecto.

Organiza con capas: Nombra tus capas de forma descriptiva en el panel izquierdo. Cuando tu diseño crezca, te lo agradecerás.

Explora las plantillas: Penpot ofrece plantillas gratuitas para inspirarte y aprender viendo cómo otros estructuran sus diseños.

Cómo Penpot Te Ayuda a Crear Mejores Diseños

Iteración rápida: Al ser tan intuitivo, puedes probar múltiples ideas rápidamente sin frustrarte con herramientas complicadas.

Feedback inmediato: Comparte prototipos interactivos con clientes o usuarios y recoge opiniones antes de escribir una sola línea de código.

Consistencia profesional: Los sistemas de componentes y estilos aseguran que tus diseños se vean pulidos y coherentes, incluso si estás empezando.

Colaboración sin barreras: Trabaja con desarrolladores, otros diseñadores o stakeholders sin preocuparte por licencias o permisos limitados.

Aprendizaje continuo: La comunidad de Penpot es activa y comparte tutoriales, recursos y plantillas constantemente.

Conclusión

Penpot democratiza el diseño digital profesional, haciéndolo accesible para cualquier persona con una idea y ganas de crear. Ya seas un emprendedor diseñando tu primera landing page, un estudiante aprendiendo diseño UX/UI, o un diseñador experimentado buscando una alternativa ética, Penpot te ofrece todas las herramientas necesarias sin comprometer tu libertad creativa.

Lo mejor de todo es que al elegir Penpot, no solo obtienes una herramienta poderosa: te unes a un movimiento que cree en el software libre, la colaboración abierta y el diseño accesible para todos. ¿Estás listo para empezar a diseñar?