Diseñar una web o una app desde cero sin presupuesto ya no significa conformarse con algo mediocre. Los iconos, las tipografías y buena parte de los sistemas de diseño que usan las grandes empresas están disponibles gratis, muchos con licencias que permiten el uso comercial sin pedir permiso a nadie.
El problema suele ser el contrario: tantas opciones que se pierde una tarde eligiendo iconos. Esta guía se centra en los recursos para construir la interfaz: Figma, iconos, tipografías, color y mockups. Si lo que buscas son bancos de imágenes, plantillas y herramientas de diseño gráfico en general, los tienes en nuestra selección de recursos de diseño gratis para diseñadores.
Figma Community: plantillas y sistemas de diseño listos para usar
La comunidad de Figma es probablemente la mayor biblioteca de recursos de interfaz del mundo: kits de interfaz, sistemas de diseño, wireframes y plantillas de webs completas que se duplican en tu cuenta con un clic.
Lo que más merece la pena de Figma Community
Sistemas de diseño oficiales
Material Design 3 y Apple
Los kits oficiales de Google y Apple, con componentes que siguen sus guías de estilo.
Kits de wireframes
Prototipado rápido
Bloques en gris para pensar la estructura antes de entrar en colores y tipografías.
Kits de interfaz
Componentes completos
Botones, formularios, tablas y tarjetas coherentes entre sí, con variantes y estados.
Plantillas de webs
Páginas de aterrizaje y portfolios
Diseños adaptables que sirven de punto de partida para no empezar con la hoja en blanco.
Ojo con el plan gratuito de Figma, que se ha ido recortando: los borradores son ilimitados, pero la carpeta del equipo solo admite tres archivos de diseño, no hay bibliotecas compartidas y quien recibe una invitación a un borrador solo puede verlo. Para aprender o trabajar solo da de sobra. Si necesitas más sin pagar, Penpot es una alternativa de código abierto que puedes usar en la nube o en tu propio servidor. Comparamos ambas, y otras, en nuestra guía de herramientas de prototipado UI/UX.
Bibliotecas de iconos SVG gratuitas
Los iconos en SVG se ven nítidos a cualquier tamaño, pesan poco y se pueden colorear con CSS. Lo más importante al elegir biblioteca no es la cantidad, sino que todos los iconos compartan el mismo estilo de trazo, para que la interfaz se vea coherente.
Las bibliotecas que más usamos
- Lucide: continuación del clásico Feather, con muchos más iconos y paquetes para React, Vue o Svelte. Nuestra primera opción para casi cualquier proyecto.
- Heroicons: de los creadores de Tailwind CSS. Pocos iconos, pero muy cuidados, en versiones de contorno y relleno.
- Tabler Icons: miles de iconos con trazo de grosor ajustable, ideal para paneles de administración.
- Phosphor: seis pesos distintos para cada icono, de fino a duotono, perfecto si buscas una identidad más marcada.
- Material Symbols: los iconos de Google como fuente variable, con grosor y relleno regulables.
- Iconify: un buscador que reúne cientos de colecciones. Muy práctico, pero cada colección tiene su propia licencia.
Un consejo de rendimiento: no cargues una biblioteca entera para usar diez iconos. Copia el SVG de los que necesites o usa los paquetes que solo incluyen los iconos importados. Si quieres crear o ajustar alguno a mano, nuestro generador de iconos SVG te permite hacerlo en el navegador.
Tipografías web gratuitas y cómo usarlas bien
Google Fonts sigue siendo el gran catálogo de tipografías libres, con más de mil familias que se pueden usar en cualquier proyecto, también comercial. Estas son algunas apuestas seguras por tipo de uso:
Tipografías recomendadas por uso
Importante si tu web está en Europa: en 2022, un tribunal de Múnich condenó a una web a indemnizar a un usuario por cargar Google Fonts desde los servidores de Google, ya que eso transmitía su dirección IP sin consentimiento. La solución es sencilla: descarga las fuentes y sírvelas desde tu propio servidor. De paso, la web carga más rápido.
Dos reglas que funcionan casi siempre: no uses más de dos familias por proyecto y, cuando la fuente lo permita, elige la versión variable, que concentra todos los pesos en un solo archivo.
Paletas de colores: herramientas para acertar a la primera
Una paleta bonita en una muestra puede quedar fatal en una web real. Por eso las herramientas más útiles no son las que generan colores, sino las que te dejan verlos aplicados y comprobar el contraste.
- Coolors: genera paletas con la barra espaciadora, bloquea los colores que te gustan y exporta a CSS. Incluye comprobador de contraste.
- Adobe Color: paletas basadas en armonías de color y herramientas de accesibilidad, incluida la simulación de daltonismo.
- Realtime Colors: aplica tu paleta a una web de ejemplo en tiempo real. La forma más rápida de saber si funciona.
- Paleta de Tailwind CSS: escalas de colores ya equilibradas, perfectas si trabajas con ese framework.
- Color Hunt: paletas votadas por la comunidad, útiles como inspiración.
Comprueba siempre que el texto alcanza un contraste de al menos 4,5:1 con el fondo, el mínimo que piden las pautas de accesibilidad WCAG para el texto normal. Si partes de una imagen o un logotipo, nuestro extractor de colores saca su paleta en segundos, y el selector de colores te da los códigos en todos los formatos. Para ir más allá, repasamos más opciones en nuestra guía de herramientas de color y paletas.
Mockups, fotos y recursos para presentar tu trabajo
Un diseño se entiende mucho mejor dentro de un móvil, un portátil o un cartel que en un lienzo en blanco. Estos son los sitios a los que más volvemos:
- Mockup World y LS Graphics: mockups de dispositivos y papelería en PSD, con objetos inteligentes para colocar tu diseño en segundos.
- Shots: mockups de dispositivos directamente en el navegador, sin Photoshop.
- Freepik: vectores, ilustraciones y mockups. Con la cuenta gratuita, la mayoría exige atribuir al autor.
- Unsplash y Pexels: fotografías gratuitas que se pueden usar en proyectos comerciales.
Las licencias de las fotos tienen matices, sobre todo cuando aparecen personas o marcas. Lo explicamos con detalle en nuestra guía de bancos de imágenes gratis para uso comercial.
Tu kit de recursos según el tipo de proyecto
| Proyecto | Base | Iconos | Tipografía | Color |
|---|---|---|---|---|
| Web corporativa | Plantilla de Figma Community | Lucide | Inter | Coolors |
| Blog o revista | Wireframe propio | Heroicons | Playfair + Source Sans 3 | Realtime Colors |
| App móvil | Material Design 3 o kit de Apple | Material Symbols | La del sistema | Paleta de Material |
| Panel de administración | Kit de interfaz completo | Tabler Icons | Inter | Paleta de Tailwind |
| Marca con personalidad | Diseño propio | Phosphor | Poppins | Adobe Color |
Si vas a llevar el diseño a código, elegir bien el framework CSS ahorra mucho trabajo de maquetación. Lo analizamos en nuestra comparativa de los mejores frameworks CSS modernos. Y si dibujas a mano iconos o ilustraciones, una tableta gráfica cambia por completo la forma de trabajar frente al ratón.
Preguntas frecuentes sobre recursos de diseño gratis
¿Figma sigue siendo gratis?
Tiene un plan gratuito, Starter, con borradores ilimitados pero solo tres archivos de diseño en la carpeta del equipo, sin bibliotecas compartidas y con un historial de versiones limitado. Para trabajar solo o aprender es suficiente; para un equipo, se queda corto. Penpot es una alternativa de código abierto sin esas limitaciones.
¿Puedo usar iconos gratuitos en un proyecto comercial?
En la mayoría de las bibliotecas de iconos de código abierto, sí. Heroicons, Lucide, Tabler o Phosphor usan licencias permisivas como MIT o ISC que permiten el uso comercial sin atribución visible. Aun así, revisa siempre la licencia de cada biblioteca, sobre todo en agregadores como Iconify, que reúnen colecciones con licencias distintas.
¿Es legal usar Google Fonts en una web europea?
Sí, pero conviene alojar las fuentes en tu propio servidor. En 2022, un tribunal de Múnich condenó a una web a indemnizar a un usuario por cargar Google Fonts desde los servidores de Google, porque transmitía su dirección IP sin consentimiento. Descargar las fuentes y servirlas tú mismo evita el problema y además mejora el rendimiento.
¿Cómo elijo una paleta de colores accesible?
Comprueba que el texto tiene suficiente contraste con el fondo: las pautas WCAG piden al menos 4,5:1 para el texto normal. Herramientas como Adobe Color o Coolors incluyen comprobadores de contraste, y Realtime Colors permite ver la paleta aplicada a una web de ejemplo antes de decidir.
¿Freepik es gratis para uso comercial?
Con la cuenta gratuita puedes usar muchos recursos en proyectos comerciales, pero normalmente con la obligación de atribuir al autor. La suscripción de pago elimina la atribución y da acceso a todo el catálogo. Lee la licencia de cada recurso antes de usarlo en un trabajo para un cliente.
Conclusión: menos recursos, mejor elegidos
Con una plantilla de Figma Community, una biblioteca de iconos, una o dos tipografías y una paleta con buen contraste tienes todo lo necesario para una interfaz profesional. El resto es criterio: mantener la coherencia, revisar las licencias y no caer en la tentación de mezclar cinco estilos distintos porque son gratis.
Si tuviéramos que quedarnos con un kit mínimo, sería este: Lucide para los iconos, Inter para el texto, Realtime Colors para la paleta y las fuentes alojadas en tu propio servidor. Funciona en casi cualquier proyecto y no da problemas legales.
