Flow Collective Studio — Especificaciones para Figma

Variables de Color

Especificaciones completas de colores organizadas en paletas de referencia, tokens semánticos y tokens de componente.

Paleta de Referencia

Tokens Semánticos

Tokens de Componente

Estilos de Texto

Escalas tipográficas para Presentación (1920×1080), Documento (A4/Letter) y Web (landing pages).

Escala de Espaciado

Sistema de espaciado consistente para márgenes, paddings y gaps en todos los componentes.

Radio de Bordes

Valores de border-radius para mantener consistencia visual en todos los componentes.

Elevación y Sombras

Sistema de sombras para crear profundidad y jerarquía visual en la interfaz.

Especificaciones de Componentes

Detalles completos de cada componente Flow con previsualizaciones visuales.

Iconografía

Especificaciones para iconos y su implementación en diferentes contextos.

Especificaciones de Iconos

⚙️

Lucide o Phosphor — Estilo outline

Estilos: Lucide o Phosphor (outline)
Trazo: 1.5px
Tamaño inline: 24px
Tamaño feature: 48px
Color (claro): Charcoal #0f2c24
Color (oscuro): Off-white #f0eee9
Nota: Mantener proporción 1:1, evitar distorsión

Fotografía

Guías de procesamiento y aplicación de fotografías en el sistema de diseño.

Overlay Oscuro

Color: rgba(15, 44, 36, 0.75)
Uso: Fotografías sobre fondo oscuro
Intensidad: 75%

Overlay Negro

Color: rgba(0, 0, 0, 0.50)
Uso: Fotografías sobre fondo claro
Intensidad: 50%

Ajustes de Temperatura

Temperatura: +5% a +10% (más cálida)
Contraste: +10%
Saturación: -5% a -10% (más sutil)

Duotone

Color 1: Charcoal #0f2c24
Color 2: Dark Green #14382e
Intensidad: 60-70%

Border Radius

Web/Digital: 12px
Print: 0px (sin radio)

Guía de Exportación a Figma

Instrucciones paso a paso para implementar este sistema de diseño en Figma.

Crear colección de Variables

En Figma, ve a Assets → Variables y crea una nueva colección llamada "Flow Design System". Crea un grupo "colors" y añade todas las variables de referencia (green.500, green.600, etc.) y luego los tokens semánticos (surface.primary, text.primary, etc.). Asigna los valores hexadecimales exactos a cada variable.

Configurar estilos de texto

En Assets → Styles, crea estilos de texto para cada escala (Presentación, Documento, Web). Para cada estilo, establece la familia "Lato", el peso especificado, tamaño y line-height exactos. Agrupa los estilos en carpetas por escala para mejor organización.

Crear variantes de componentes

Para cada componente (Button CTA, Card, etc.), crea un componente principal en Figma. Usa Component → Create component. Luego crea variantes para estados diferentes (default, hover, active, disabled) usando Add variant. Conecta los colores a las variables creadas anteriormente.

Configurar Auto Layout con espaciado

En cada componente, activa Auto Layout y establece los valores de padding y gap según la escala (4px, 8px, 16px, 24px, etc.). Esto asegura que los espacios sean consistentes y responsivos cuando se creen instancias.

Configurar modos de color (Light/Dark)

En la colección de Variables, crea dos modos: "Light" y "Dark". Para cada variable, asigna valores diferentes según el modo. Por ejemplo, text.primary = #0f2c24 en Light y #f0eee9 en Dark. Luego usa estos modos en tus componentes para que cambien automáticamente.

Exportar y compartir

Publica tu librería de componentes en Figma (File → Save as library). Comparte el enlace con tu equipo para que todos puedan usar los componentes en sus proyectos. Los cambios en la librería se reflejarán automáticamente en todos los archivos que la usen.