Companique, Parte 1: De Figma a una tienda de prestigio a medida
Parte 1 de 2. Esta parte cubre la entrega del diseño y la creación del tema. La parte 2 se publicará una vez que la tienda esté terminada, con la fotografía y el vídeo finales.
Creamos la tienda de Companique en Shopify, partiendo de un diseño completo en Figma de John Bresciani y ampliando el tema Prestige con secciones personalizadas para adaptarlo. La tienda se está preparando para su lanzamiento, previsto para el segundo trimestre de 2027, cuando la fotografía y el vídeo finales sustituirán el contenido provisional.
Resumen del proyecto
Companique es una marca neoyorquina de artículos de cuero de alta gama para perros y las personas que los pasean. La identidad de marca y el diseño de la tienda fueron creados en Figma por John Bresciani, de Bresciani Design, un diseñador independiente con sede en Australia. Nuestro trabajo consistió en convertir ese diseño en una tienda funcional de Shopify: una estética a medida sobre una base de tema probada, lista para el lanzamiento de la marca.
La fotografía final de los productos, el vídeo y los textos de la marca aún están en producción. Hasta que lleguen, la tienda utiliza imágenes y textos provisionales generados por IA para que el equipo pueda revisar una tienda completa antes del lanzamiento.
Objetivos
- Mantenernos fieles al diseño Traducir el sistema de Figma de John Bresciani a código del tema, respetando su tipografía, espaciado y diseño.
- Desarrollar sobre Prestige Ampliar el tema Prestige con secciones y bloques personalizados para los diseños de página de Companique.
- Hacerla revisable ahora Llenar cada página con contenido provisional para que se pueda revisar la tienda completa antes de que estén listos los recursos finales.
- Prepararla para el contenido de lanzamiento Estructurar las secciones para que las imágenes y los vídeos de alta calidad puedan añadirse más adelante sin tener que reconstruir nada.
Trabajo con el diseñador
Trabajamos directamente con los archivos de Figma de John Bresciani y mantuvimos el contacto con él a medida que se creaban las secciones, para que la intención del diseño se reflejara en la tienda en vivo. Las dudas sobre el espaciado, los estados y el comportamiento responsivo se resolvieron basándonos en el diseño en lugar de improvisar.
El diseño en Figma
El archivo de Figma de John Bresciani incluye la página de inicio, la página de producto y el carrito, diseñado para la resolución de escritorio con un sistema coherente de tipografía, color, botones y tarjetas de producto. Fue nuestra única referencia para la creación.
Cómo trabajamos
Base de la tienda y configuración del tema
Configuramos la tienda, instalamos Prestige como base y ajustamos los ajustes, la navegación y la estructura para que coincidieran con el mapa del sitio aprobado.
De Figma a las secciones del tema
Cada página y componente de Figma se reconstruyó como secciones y bloques personalizados de Liquid, ampliando la biblioteca de secciones de Prestige con elementos reutilizables para Companique.
Contenido provisional
Generamos textos e imágenes provisionales en la página de inicio, las páginas de producto y las páginas de contenido, y estructuramos cada sección para que la fotografía y el vídeo reales puedan sustituirlos más adelante.
Revisión y preparación para el lanzamiento
Comparamos cada sección con el archivo original de Figma en todos los puntos de ruptura y probamos la tienda en navegadores móviles y de escritorio antes de la entrega.
El resultado
Así se ve el diseño en la tienda hoy. Las imágenes y algunos textos aún son provisionales.
La página de inicio comienza con una imagen de estilo de vida a pantalla completa y una limpia fila de productos, seguida de secciones editoriales sobre la colección Hudson y la historia artesanal de la marca.
Las páginas de producto mantienen un diseño sencillo: una amplia galería de imágenes, selección de color y tamaño, la historia del producto y detalles desplegables sobre características, materiales y cuidado.
En dispositivos móviles, las mismas secciones se apilan en una sola columna, con un encabezado compacto y tarjetas de producto adaptadas al tamaño del teléfono.
Lo que sigue
La producción aún está en curso. Se espera que Companique se lance en el segundo trimestre de 2027 con fotografía y vídeo de alta calidad, y la tienda estará terminada una vez que ese contenido esté incorporado. Como las secciones se crearon para ello, los elementos provisionales pueden sustituirse directamente. Publicaremos la parte 2 entonces, mostrando la tienda terminada.
- Tema personalizado de Prestige creado a partir del diseño de Figma de John Bresciani
- Tienda completa con contenido provisional para su revisión
- Secciones preparadas para las imágenes y vídeos finales
- Lanzamiento previsto para el segundo trimestre de 2027, seguido de la parte 2
