Con qué diseño y construyo
Las herramientas que hay detrás del trabajo, y la razón por la que cada una sigue aquí. Nada de esta lista es una recomendación para nadie más. Es lo que encaja con mi forma de trabajar entre un archivo de Figma y un front end desplegado.
Diseño
Figma hace la mayor parte del trabajo. Los demás están aquí porque un cliente o un proyecto ya vive en ellos.
- Figma
- Donde empieza y termina prácticamente todo proyecto. Los componentes, las variantes y el auto layout se corresponden lo bastante con cómo se construye de verdad un front end como para que el archivo siga siendo útil después del handoff, en vez de convertirse en una foto del diseño.
- Framer
- Para sitios donde el diseño y la página publicada deben ser el mismo artefacto, y para animaciones que es más fácil demostrar que describir en una especificación.
- Webflow
- Cuando un cliente necesita editar y publicar contenido por su cuenta después, sin un desarrollador de por medio. Se elige por quién mantiene el sitio, no por cómo está construido.
- Sketch
- Solo cuando un proyecto llega en él. Muchos productos de larga trayectoria todavía tienen su fuente de verdad en una biblioteca de Sketch, y convertir una rara vez compensa la interrupción.
Front end
Lo suficiente para llevar un diseño hasta producción, y para saber mientras diseño qué ideas son baratas y cuáles caras.
- React
- El modelo de componentes se alinea con cómo se estructura un design system, de modo que el componente de Figma y el componente en código siguen siendo la misma unidad, en lugar de dos inventarios paralelos.
- Next.js
- App Router y server components por defecto. La mayor parte de lo que construyo se guía por el contenido y debería entregarse como HTML estático, este sitio incluido.
- Tailwind CSS
- Los design tokens como única forma de escribir un valor. Hace que una elección de espaciado o de color fuera del sistema se vea en la revisión, una restricción que vale más que la velocidad.
- TypeScript
- Sobre todo para la capa de contenido. Tipar la forma de un caso de estudio o de un servicio hace que un campo que falta sea un error de compilación, en lugar de un hueco en blanco que alguien detecta en producción.
- HTML & CSS
- Sigue siendo la parte que decide si un desarrollo es bueno. La semántica, el orden de foco y el contraste son decisiones de diseño que resultan estar escritas en el marcado.
- PHP
- Para proyectos sobre stacks de PHP existentes, normalmente un front end que tiene que encajar en algo que ya está en marcha, en lugar de un desarrollo desde cero.
Este sitio
Porque un portafolio debería poder responder a la pregunta que él mismo invita a hacer.
- GSAP
- ScrollTrigger y SplitText para las apariciones de los títulos y las secuencias guiadas por el scroll. Cada primitiva de movimiento comprueba prefers-reduced-motion y se degrada a un layout estático y totalmente visible.
- Lenis
- Scroll suave, gobernado por el ticker de GSAP en lugar de su propio frame de animación. En un bucle aparte, los elementos fijados y de parallax van un frame por detrás de la posición del scroll.
- three.js
- El fondo de partículas, mantenido en una sola draw call. Un portafolio que le cuesta la batería a un móvil solo por mirarlo ha hecho el intercambio equivocado.
¿Con curiosidad por ver cómo se usan en un proyecto real?
Ver todos los casos