Recursos Cósmicos

CSS-Tricks

Tutoriales y artículos sobre CSS y desarrollo web frontend

Modern CSS Solutions

Soluciones modernas a problemas comunes de CSS

CSS Reference

Guía visual completa de propiedades CSS

CSS Gradient Generator

Generador de gradientes CSS con vista previa en tiempo real

Neumorphism.io

Generador de diseños neumórficos con CSS

CSS Grid Generator

Generador de layout con CSS Grid

Fancy Border Radius

Generador visual de border-radius avanzados

Animista

Generador de animaciones CSS personalizables

Clippy

Generador de clip-path CSS con vista previa en tiempo real

Haikei

Generador de formas SVG, patrones y fondos únicos

SVG Waves

Generador para crear ondas SVG instantáneamente

Get Waves

Crea ondas SVG para tus próximos diseños

Blobmaker

Crea formas orgánicas SVG para tus diseños

Shape Divider App

Generador de divisores de formas para sitios web

Blobs

Generador de formas hermosas para aplicaciones web y Flutter

Generador de separadores

Generador de separadores de secciones CSS

SVG Generator Wavy

Generador de transiciones onduladas SVG entre secciones

LottieFiles

Plataforma para animaciones Lottie ligeras y escalables

GSAP

La biblioteca estándar para animaciones web profesionales

Framer Motion

Biblioteca de animaciones para React

Keyframes.app | CSS Toolbox

Herramienta para crear animaciones CSS de forma visual

argyleink/transition.css

Biblioteca CSS para transiciones animadas personalizables

WAIT! Animate

Generador de retrasos para animaciones CSS

Can I animate...?

Base de datos para comprobar compatibilidad de animaciones CSS

AnimatiSS

Colección de animaciones CSS listas para usar

Coolors

Generador de paletas de colores y explorador de esquemas

Color Hunt

Colección de paletas de colores para diseñadores y artistas

Adobe Color

Rueda de color y herramientas de color profesionales

Paletton

Herramienta para crear esquemas de color personalizados

Colormind

Generador de paletas de colores usando inteligencia artificial

Khroma

Generador de paletas de colores personalizado basado en preferencias

ColorSpace

Herramienta para generar paletas de colores y gradientes

Randoma11y

Generador de paletas de colores accesibles

Color y Contraste

Guía interactiva para verificar el contraste de colores

Phosphor Icons

Conjunto flexible de iconos con múltiples estilos

Heroicons

Iconos hermosos hechos por los creadores de Tailwind CSS

Font Awesome

El conjunto de iconos más popular para web

Material Icons

Iconos de Google que siguen las directrices de Material Design

Feather Icons

Iconos minimalistas y personalizables

Ionicons

Conjunto de iconos diseñado para Ionic Framework, adaptable para cualquier uso

SVGL Icons por @Pheralb

Generador de iconos SVG simple y práctico creado por Pheralb

Iconscout

Plataforma con una amplia biblioteca de iconos, ilustraciones y recursos de diseño

Google Fonts

Biblioteca de fuentes web gratuitas

Type Scale

Calculadora visual de escalas tipográficas

Fontjoy

Generador de combinaciones tipográficas con IA

DaFont

Colección de fuentes gratuitas para descargar

Adobe Fonts

Servicio de fuentes profesionales para diseñadores

Font Squirrel

Fuentes gratuitas de alta calidad para uso comercial

CSS Froggy

Aprende CSS Flexbox jugando con una rana

Grid Garden

Aprende CSS Grid cultivando un jardín

Flexbox Defense

Juego para aprender Flexbox

CodeCombat

Aprende a programar jugando en un entorno de fantasía

CheckiO

Juego de desafíos de programación para aprender Python y JavaScript

CodinGame

Aprende a programar resolviendo desafíos mientras juegas

Robocode

Aprende Java creando robots que luchan entre sí

CSSBattle

Practica CSS en un entorno de batalla

CSS Diner

Aprende selectores de CSS jugando

Guess CSS!

Juego para poner a prueba tus habilidades con HTML y CSS

Coding Fantasy

Aprende CSS, HTML y JavaScript mientras programas juegos

WarriorJS

Aprende JavaScript mediante un juego de fantasía

The Bézier Game

Aprende a utilizar curvas Bézier jugando

Crunchzilla

Cursos interactivos para aprender a programar

Dribbble

Plataforma para descubrir y compartir el trabajo de diseñadores de todo el mundo

Galerías de Componentes UI

Colección de galerías de componentes para facilitar el diseño de interfaces de usuario

Behance

Plataforma para descubrir portafolios creativos y trabajos de diseño

Awwwards

Galería de sitios web premiados por su diseño y creatividad

Figma Community

Comunidad donde se comparten archivos y recursos de diseño en Figma

CSS Gradient Generator

Generador de degradados CSS con vista previa en tiempo real

Fondos degradados

Los mejores sitios de gradientes en un solo lugar

Josh W Comeau

Generador de degradados CSS con una vista interactiva

Colección de degradados gratuitos

Colección de gradientes gratuitos para diseñadores y desarrolladores

Design Gradients

Sitio para descubrir y descargar gradientes para diseño

GradientArt

Editor avanzado para crear gradientes CSS personalizados

Editor degradados CSS

Editor de gradientes CSS fácil de usar

Easing Gradients

Gradientes con transiciones de easing para un diseño más suave

Descend Sun Multicolor Gradient

Gradiente multicolor gratuito para proyectos creativos

Filtros de Fotos Personalizados para CSS

Crea filtros de fotos estilo Instagram para CSS

Degradados Multicolor CSS

Degradados CSS y descargas JPG, 100% gratuitos

CSS Duotone

Herramienta para crear efectos de duotono en CSS

SVGOMG

Herramienta para optimizar SVGs en línea de forma sencilla

SVGO

CLI para optimizar gráficos vectoriales SVG

SVGator

Herramienta para crear animaciones SVG interactivas

FFFuel

Colección de generadores gratuitos de SVG, herramientas de color y recursos de diseño web

dddoodle

Colección de ilustraciones dibujadas a mano en formato SVG

bbblurry

Generador de formas decorativas borrosas en SVG

BgJar

Generador gratuito de fondos SVG personalizables

Pattern Monster

Generador de patrones SVG

SVG Backgrounds

Personaliza y aplica fondos SVG rápidamente

SVG Wave Generator

Generador para crear ondas SVG personalizables

Hero Patterns

Patrones SVG listos para usar en tus proyectos

SVGRepo

Colección de SVGs gratuitos para uso en proyectos

Remix Icon

Biblioteca de iconos SVG de código abierto

Boxicons

Colección de iconos vectoriales en SVG y Figma

Heroicons

Iconos SVG gratuitos para proyectos web

Tabler Icons

Colección de iconos SVG de código abierto

React

Biblioteca para construir interfaces de usuario interactivas

Vue.js

Framework progresivo para la construcción de interfaces de usuario

Angular

Plataforma para construir aplicaciones web dinámicas

Tailwind CSS

Framework de utilidades para estilizar componentes rápidamente

Bootstrap

Framework para diseño responsive y componentes UI

freeCodeCamp

Plataforma para aprender a programar de forma gratuita

Khan Academy

Recursos educativos gratuitos en una amplia gama de temas

Codeacademy

Aprende a programar interactuando con el código

CSS-Tricks

Consejos, trucos y técnicas sobre CSS y desarrollo front-end

Smashing Magazine

Artículos para diseñadores y desarrolladores web

Dev.to

Comunidad de desarrolladores compartiendo ideas y código

A List Apart

Explorando el diseño, desarrollo y significado del contenido web

Medium

Plataforma para que escritores y lectores compartan ideas

Figmalion

Recursos, tutoriales y tips para aprender Figma

Norman Nielsen Group

Recursos, investigaciones y artículos sobre experiencia de usuario

UX Collective

Artículos y recursos sobre experiencia de usuario y diseño de producto

Smashing Magazine

Artículos para diseño y desarrollo enfocados en UX/UI

Laws of UX

Principios psicológicos que guían el diseño de experiencia de usuario

Interaction Design Foundation

Cursos y recursos sobre diseño de interacción y UX

The UX Cookbook

Recetas y consejos para mejorar la experiencia de usuario

Maze

New

Plataforma de investigación de usuarios para validar diseños con tests y encuestas

Hotjar

New

Mapas de calor, grabaciones de sesiones y encuestas para entender a tus usuarios

Dovetail

New

Plataforma colaborativa para organizar y analizar la investigación de usuarios

UX Tools

New

Encuestas anuales sobre herramientas de diseño y tendencias del sector UX

Mobbin

New

Librería de capturas de pantalla de apps reales para inspiración UX/UI

Figma Community Plugins

Encuentra los mejores plugins de la comunidad para mejorar tu flujo de trabajo en Figma

FigJam

Herramienta colaborativa de diagramas y brainstorming de Figma

Figma Variables

New

Guía oficial para usar variables en Figma y crear sistemas de design tokens

Figma Auto Layout

New

Domina Auto Layout en Figma para crear diseños responsivos y escalables

Figma Dev Mode

New

Dev Mode: el puente entre diseño y código directo en Figma

Config — Figma's Annual Conference

New

Charlas y sesiones de la conferencia anual de Figma sobre diseño y producto

Figma Academy

New

Cursos y tutoriales oficiales de Figma para todos los niveles

Tokens Studio for Figma

New

Plugin para gestionar design tokens en Figma y sincronizar con código

Iconify for Figma

New

Plugin de Figma para acceder a más de 200.000 iconos de cientos de librerías

UI8 Marketplace

Plantillas premium, UI kits y componentes para proyectos de diseño

Landingfolio

Inspiración de diseño para páginas de aterrizaje modernas

Dribbble

Plataforma para explorar y compartir inspiración de diseño UI

Component Gallery

Colección de componentes de diseño para inspiración y referencia

shadcn/ui

New

Componentes accesibles y personalizables construidos con Radix UI y Tailwind CSS

Origin UI

New

Componentes de UI hermosos y accesibles construidos con Tailwind CSS y React

Magic UI

New

Componentes animados para React y Next.js — perfectos para landing pages

Aceternity UI

New

Componentes modernos con efectos visuales avanzados para React y Next.js

Park UI

New

Sistema de componentes construido sobre Ark UI con soporte para múltiples frameworks

Radix Themes

New

Sistema de diseño visual completo con temas y componentes de Radix UI

DaisyUI

New

Librería de componentes para Tailwind CSS con decenas de temas listos para usar

React Aria

New

Librería de hooks accesibles de Adobe para construir componentes UI en React

Can I include

Herramienta para verificar si un elemento HTML puede ser incluido en otro

HTML Reference

Guía visual completa de todos los elementos y atributos de HTML

Web.dev - HTML

Recursos para aprender HTML moderno con buenas prácticas

HTML DOM

Documentación interactiva de los métodos y propiedades del DOM HTML

CSS-Tricks HTML Guide

Una colección de artículos y ejemplos para entender mejor HTML

v0 by Vercel

Genera componentes UI con shadcn/ui a partir de texto o imágenes usando IA

Cursor

Editor de código con IA integrada para escribir, editar y refactorizar código

GitHub Copilot

Asistente de código IA de GitHub que sugiere líneas y funciones completas

Claude

Asistente IA de Anthropic para escribir, analizar, codificar y razonar

ChatGPT

Modelo de lenguaje de OpenAI para conversación, código y creación de contenido

Bolt.new

Construye y despliega aplicaciones web completas desde una descripción en texto

Lovable

Crea aplicaciones web completas con IA a partir de una simple descripción

Windsurf

Editor de código agentic con IA que anticipa y completa tareas de desarrollo

Perplexity AI

Motor de búsqueda con IA que cita fuentes y responde preguntas complejas

Galileo AI

Genera interfaces de usuario completas desde descripciones de texto con IA

Relume

Genera sitemaps, wireframes y componentes web con IA para sitios y apps

Magician (Figma)

Plugin de Figma con IA para generar iconos, texto e imágenes en tus diseños

Framer AI

Crea sitios web completos con texto generado por IA directamente en Framer

Adobe Firefly

Herramientas generativas de IA de Adobe para imágenes, texto y efectos

Midjourney

Genera imágenes de alta calidad a partir de descripciones de texto con IA

Uizard

Transforma bocetos y descripciones en prototipos de UI con IA

Codeium

Autocompletado de código con IA gratuito y compatible con más de 70 lenguajes

Anthropic API

API para construir aplicaciones con los modelos Claude de Anthropic

OpenAI API

API para acceder a GPT-4, DALL-E y otros modelos de OpenAI

Vercel AI SDK

SDK de TypeScript para construir interfaces con IA en React y Next.js

Hugging Face

Plataforma con miles de modelos, datasets y demos de IA open source

Attention Insight

Analiza diseños con IA para predecir hacia dónde miran los usuarios

Material Design 3

Sistema de diseño de Google con guías, componentes y tokens para Android y web

shadcn/ui

Componentes reutilizables construidos con Radix UI y Tailwind CSS, copiables en tu proyecto

Radix UI

Primitivos de UI accesibles y sin estilos para construir sistemas de diseño en React

IBM Carbon Design System

Sistema de diseño open source de IBM con guías y componentes para productos digitales

Shopify Polaris

Sistema de diseño de Shopify para crear experiencias consistentes en su plataforma

Atlassian Design System

Sistema de diseño de Atlassian con guías de UX, tokens y componentes para Jira y Confluence

GitHub Primer

Sistema de diseño open source de GitHub con componentes, iconos y guías de estilo

Adobe Spectrum

Sistema de diseño de Adobe que alimenta todos sus productos creativos y de experiencia

Microsoft Fluent 2

Sistema de diseño de Microsoft para crear experiencias coherentes en Windows y web

Ant Design

Sistema de diseño y librería de componentes React para interfaces de usuario empresariales

Apple Human Interface Guidelines

Guías oficiales de Apple para diseñar aplicaciones en iOS, macOS, watchOS y tvOS

Storybook

Herramienta para desarrollar, documentar y testear componentes UI de forma aislada

Zeroheight

Plataforma para documentar y publicar sistemas de diseño conectados a Figma

Supernova

Gestiona y publica tu design system desde Figma con tokens, documentación y código

Style Dictionary

Herramienta de Amazon para transformar design tokens en cualquier formato de código

Tokens Studio

Plugin de Figma para gestionar design tokens y sincronizarlos con el código

Lightning Design System

Sistema de diseño de Salesforce para construir interfaces de usuario enterprise

Paste by Twilio

Sistema de diseño accesible e inclusivo de Twilio para sus productos y APIs

The A11y Project

New

Recursos, listas de verificación y artículos sobre accesibilidad web impulsados por la comunidad

WebAIM

New

Guías, herramientas y formación para hacer la web accesible a personas con discapacidad

WCAG 2.2

New

Guías oficiales de accesibilidad al contenido web del W3C — el estándar de referencia

Axe DevTools

New

Extensión de navegador para detectar y solucionar problemas de accesibilidad automáticamente

Stark

New

Suite de accesibilidad para Figma y Sketch: contraste, simulación de daltonismo y más

Accessible Colors

New

Comprueba el ratio de contraste de color y obtén sugerencias accesibles al instante

WAVE Evaluation Tool

New

Herramienta visual para evaluar la accesibilidad de páginas web en el navegador

ARIA Authoring Practices Guide

New

Guía oficial del W3C para implementar patrones de ARIA de forma correcta y accesible

Inclusive Design Principles

New

Principios de diseño inclusivo para crear experiencias que funcionen para todos

Accessibility Insights

New

Herramienta de Microsoft para detectar problemas de accesibilidad en webs y apps

Color Review

New

Comprueba la accesibilidad del contraste de color en una interfaz visual e intuitiva

deque University

New

Cursos y formación profesional en accesibilidad digital por los creadores de axe

web.dev Performance

New

Guías y artículos de Google sobre rendimiento web, Core Web Vitals y optimización

PageSpeed Insights

New

Analiza el rendimiento de cualquier URL y obtén recomendaciones de mejora de Google

WebPageTest

New

Test de velocidad web avanzado con análisis detallado desde múltiples ubicaciones

Bundlephobia

New

Descubre el coste en tamaño de cualquier paquete npm antes de instalarlo

Squoosh

New

Compresor de imágenes de Google directamente en el navegador con comparativa visual

SVGOMG

New

Optimiza y limpia archivos SVG online con control total sobre los parámetros

Core Web Vitals

New

Documentación oficial de Google sobre LCP, CLS e INP — las métricas clave de UX

Lighthouse

New

Herramienta automática de auditoría de rendimiento, accesibilidad y SEO de Google

GTmetrix

New

Analiza la velocidad de carga de tu web y obtén recomendaciones de optimización

Cloudinary

New

Plataforma de gestión, optimización y entrega de imágenes y vídeos en la nube

Open Props

New

Variables CSS de diseño superpotenciadas para construir interfaces consistentes más rápido

Scroll-driven Animations

New

Guía completa de Google sobre animaciones vinculadas al scroll con CSS puro

CSS Container Queries

New

Guía de referencia para container queries: el cambio más grande en CSS responsive

View Transitions API

New

Crea transiciones fluidas entre páginas y estados con la View Transitions API

CSS Cascade Layers

New

Aprende a usar @layer para controlar la cascada CSS de forma predecible y escalable

CSS Nesting

New

CSS nesting nativo: escribe CSS anidado como en Sass pero sin preprocesador

UnoCSS

New

Motor de CSS atómico instantáneo y ultraflexible con generación bajo demanda

Panda CSS

New

Framework CSS en tiempo de compilación con type-safe tokens y utilidades

CSS Weekly

New

Newsletter semanal con los artículos, tutoriales y recursos de CSS más relevantes

Josh W Comeau Blog

New

Artículos profundos y visuales sobre CSS moderno por uno de los mejores educadores web

CSS { In Real Life }

New

Blog de Michelle Barker con artículos técnicos sobre CSS moderno y design engineering

Defensive CSS

New

Patrones y técnicas CSS para prevenir problemas de UI antes de que ocurran

CSS-Tricks

Tutorials and articles about CSS and frontend development

Modern CSS Solutions

Modern solutions for common CSS problems

CSS Reference

Complete visual guide to CSS properties

CSS Gradient Generator

CSS gradient generator with real-time preview

Neumorphism.io

Generate soft-UI CSS code

CSS Grid Generator

CSS Grid layout generator

Fancy Border Radius

Visual generator for advanced border-radius

Animista

Customizable CSS animations generator

Clippy

CSS clip-path generator with real-time preview

Haikei

Generator for unique SVG shapes, patterns, and backgrounds

SVG Waves

Instant generator for SVG wave shapes

Get Waves

Create SVG waves for your next design

Blobmaker

Create organic SVG shapes for your designs

Shape Divider App

Generator for shape dividers in websites

Blobs

Generate beautiful blob shapes for web and Flutter apps

Section Separator

CSS section separator generator

SVG Generator Wavy

Generator for SVG wavy transitions between sections

LottieFiles

Platform for lightweight, scalable Lottie animations

GSAP

The standard for professional web animations

Framer Motion

Production-ready animation library for React

Keyframes.app | CSS Toolbox

Tool for visually creating CSS animations

argyleink/transition.css

CSS library for customizable animated transitions

WAIT! Animate

CSS animation delay generator

Can I animate...?

Database for checking CSS animation compatibility

AnimatiSS

Collection of ready-to-use CSS animations

Coolors

Color schemes generator and palettes explorer

Color Hunt

Collection of color palettes for designers and artists

Adobe Color

Professional color wheel and color tools

Paletton

Tool for creating custom color schemes

Colormind

Color palette generator using artificial intelligence

Khroma

Color palette generator customized based on preferences

ColorSpace

Tool to generate color palettes and gradients

Randoma11y

Accessible color palettes generator

Color and Contrast

Interactive guide to check color contrast

Phosphor Icons

Flexible icon set with multiple styles

Heroicons

Beautiful icons by the makers of Tailwind CSS

Font Awesome

The web most popular icon set

Material Icons

Google icons following the Material Design guidelines

Feather Icons

Minimalist and customizable icons

Ionicons

Icon set designed for the Ionic Framework, adaptable for any use

SVGL Icons by @Pheralb

Simple and practical SVG icon generator created by Pheralb

Iconscout

Platform with a vast library of icons, illustrations, and design resources

Google Fonts

Free web font library

Type Scale

Visual type scale calculator

Fontjoy

AI-powered font pairing generator

DaFont

Collection of free fonts for download

Adobe Fonts

Professional font service for designers

Font Squirrel

High-quality free fonts for commercial use

CSS Froggy

Learn CSS Flexbox by playing with a frog

Grid Garden

Learn CSS Grid by growing a garden

Flexbox Defense

A game to learn Flexbox

CodeCombat

Learn to code by playing in a fantasy world

CheckiO

Programming challenges game to learn Python and JavaScript

CodinGame

Learn to code by solving challenges while playing games

Robocode

Learn Java by creating robots that battle each other

CSSBattle

Practice CSS in a battle environment

CSS Diner

Learn CSS selectors by playing

Guess CSS!

Game to test your HTML and CSS skills

Coding Fantasy

Learn CSS, HTML, and JavaScript through coding games

WarriorJS

Learn JavaScript through a fantasy game

The Bézier Game

Learn to use Bézier curves by playing

Crunchzilla

Interactive courses for learning to code

Dribbble

Platform to discover and share work from designers around the world

UI Component Galleries

Collection of component galleries to help design user interfaces

Behance

Platform to discover creative portfolios and design work

Awwwards

Gallery of award-winning websites for design and creativity

Figma Community

Community where design files and resources are shared in Figma

CSS Gradient Generator

CSS gradient generator with real-time preview

Gradient Backgrounds

The best gradient sites all in one place

Josh W Comeau

CSS gradient generator with an interactive view

Free Gradients Collection by itmeo.com

Free gradients collection for designers and developers

Design Gradients

Site to discover and download design gradients

GradientArt

Advanced editor to create custom CSS gradients

CSS Gradient Editor

Easy-to-use CSS gradient editor

Easing Gradients

Gradients with easing transitions for smoother designs

Descend Sun Multicolor Gradient

Free multicolor gradient for creative projects

Create Custom Photo Filters for CSS

Create Instagram-like photo filters for CSS

Multicolor CSS Gradients

CSS gradients and JPG downloads, 100% free

CSS Duotone

Tool for creating duotone effects in CSS

SVGOMG

Online tool to easily optimize SVGs

SVGO

CLI for optimizing SVG vector graphics

SVGator

Tool for creating interactive SVG animations

FFFuel

Collection of free SVG generators, color tools, and web design resources

dddoodle

Collection of hand-drawn SVG illustrations

bbblurry

Generator of blurry decorative SVG shapes

BgJar

Free generator for customizable SVG backgrounds

Pattern Monster

SVG pattern generator

SVG Backgrounds

Quickly customize and apply SVG backgrounds

SVG Wave Generator

Generator to create customizable SVG waves

Hero Patterns

Ready-to-use SVG patterns for your projects

SVGRepo

Collection of free SVGs for use in projects

Remix Icon

Open-source SVG icon library

Boxicons

Collection of vector icons in SVG and Figma

Heroicons

Free SVG icons for web projects

Tabler Icons

Open-source SVG icon collection

React

Library for building interactive user interfaces

Vue.js

Progressive framework for building user interfaces

Angular

Platform for building dynamic web applications

Tailwind CSS

Utility-first CSS framework for rapid UI development

Bootstrap

Framework for responsive design and UI components

freeCodeCamp

Learn to code for free with an interactive curriculum

Khan Academy

Free educational resources on a wide range of topics

Codecademy

Learn to code by interacting with real code

CSS-Tricks

Tips, tricks, and techniques on using CSS and front-end development

Smashing Magazine

Articles for web designers and developers

Dev.to

Community of developers sharing ideas and code

A List Apart

Exploring the design, development, and meaning of web content

Medium

Platform for writers and readers to share ideas

Figmalion

Resources, tutorials, and tips to learn Figma

Norman Nielsen Group

Resources, research, and articles about user experience

UX Collective

Articles and resources about user experience and product design

Smashing Magazine

Articles for designers and developers focused on UX/UI

Laws of UX

Psychological principles that guide user experience design

Interaction Design Foundation

Courses and resources about interaction design and UX

The UX Cookbook

Recipes and tips to improve user experience

Maze

New

User research platform to validate designs with tests and surveys

Hotjar

New

Heatmaps, session recordings, and surveys to understand your users

Dovetail

New

Collaborative platform for organizing and analyzing user research

UX Tools

New

Annual surveys on design tools and UX industry trends

Mobbin

New

Screenshot library from real apps for UX/UI design inspiration

Figma Community Plugins

Discover the best community plugins to enhance your Figma workflow

FigJam

Collaborative diagramming and brainstorming tool by Figma

Figma Variables

New

Official guide to using variables in Figma and creating design token systems

Figma Auto Layout

New

Master Auto Layout in Figma to create responsive and scalable designs

Figma Dev Mode

New

Dev Mode: the bridge between design and code, built right into Figma

Config — Figma's Annual Conference

New

Talks and sessions from Figma's annual conference on design and product

Figma Academy

New

Official Figma courses and tutorials for all skill levels

Tokens Studio for Figma

New

Plugin to manage design tokens in Figma and sync with code

Iconify for Figma

New

Figma plugin to access 200,000+ icons from hundreds of libraries

UI8 Marketplace

Premium templates, UI kits, and components for design projects

Landingfolio

Design inspiration for modern landing pages

Dribbble

Platform to explore and share UI design inspiration

Component Gallery

Collection of design components for inspiration and reference

shadcn/ui

New

Accessible, customizable components built with Radix UI and Tailwind CSS

Origin UI

New

Beautiful and accessible UI components built with Tailwind CSS and React

Magic UI

New

Animated components for React and Next.js — perfect for landing pages

Aceternity UI

New

Modern components with advanced visual effects for React and Next.js

Park UI

New

Component system built on Ark UI with multi-framework support

Radix Themes

New

Complete visual design system with themes and components from Radix UI

DaisyUI

New

Component library for Tailwind CSS with dozens of ready-made themes

React Aria

New

Adobe's accessible hooks library for building UI components in React

Can I include

Tool to check if an HTML element can be included in another

HTML Reference

Comprehensive visual guide to all HTML elements and attributes

Web.dev - HTML

Resources to learn modern HTML with best practices

HTML DOM

Interactive documentation of HTML DOM methods and properties

CSS-Tricks HTML Guide

A collection of articles and examples to better understand HTML

v0 by Vercel

Generate UI components with shadcn/ui from text or images using AI

Cursor

AI-powered code editor for writing, editing and refactoring code

GitHub Copilot

GitHub AI coding assistant that suggests lines and entire functions

Claude

Anthropic's AI assistant for writing, analysis, coding and reasoning

ChatGPT

OpenAI's language model for conversation, coding and content creation

Bolt.new

Build and deploy full-stack web apps from a text description

Lovable

Create full web applications with AI from a simple description

Windsurf

Agentic AI code editor that anticipates and completes development tasks

Perplexity AI

AI-powered search engine that cites sources and answers complex questions

Galileo AI

Generate complete user interfaces from text descriptions with AI

Relume

Generate sitemaps, wireframes and web components with AI

Magician (Figma)

Figma plugin with AI to generate icons, copy and images in your designs

Framer AI

Build complete websites with AI-generated content directly in Framer

Adobe Firefly

Adobe generative AI tools for images, text effects and more

Midjourney

Generate high-quality images from text descriptions using AI

Uizard

Transform sketches and descriptions into UI prototypes with AI

Codeium

Free AI code completion compatible with 70+ programming languages

Anthropic API

API for building applications with Anthropic Claude models

OpenAI API

API to access GPT-4, DALL-E and other OpenAI models

Vercel AI SDK

TypeScript SDK for building AI-powered interfaces in React and Next.js

Hugging Face

Platform with thousands of open-source AI models, datasets and demos

Attention Insight

Analyze designs with AI to predict where users will look

Material Design 3

Google's design system with guidelines, components and tokens for Android and web

shadcn/ui

Reusable components built with Radix UI and Tailwind CSS, copy-paste into your project

Radix UI

Accessible, unstyled UI primitives for building design systems in React

IBM Carbon Design System

IBM's open-source design system with guidelines and components for digital products

Shopify Polaris

Shopify's design system for creating consistent experiences across their platform

Atlassian Design System

Atlassian design system with UX guidelines, tokens and components for Jira and Confluence

GitHub Primer

GitHub's open-source design system with components, icons and style guidelines

Adobe Spectrum

Adobe's design system powering all their creative and experience products

Microsoft Fluent 2

Microsoft's design system for creating coherent experiences across Windows and web

Ant Design

Design system and React component library for enterprise user interfaces

Apple Human Interface Guidelines

Apple's official guidelines for designing apps on iOS, macOS, watchOS and tvOS

Storybook

Tool to develop, document and test UI components in isolation

Zeroheight

Platform to document and publish design systems connected to Figma

Supernova

Manage and publish your design system from Figma with tokens, docs and code

Style Dictionary

Amazon's tool for transforming design tokens into any code format

Tokens Studio

Figma plugin to manage design tokens and sync them with your codebase