Liquid Glass iOS 26 — FitTrack Pro Design System

Sección 01 — Dashboard

9:41

Hola, Carlos 👋

Miércoles, 18 junio · Meta diaria al 74%

🏃

8.240 pas

Pasos hoy

🔥

1.847 kcal

Calorías

💧

1,8 L

Hidratación

❤️

72 bpm

Frecuencia

Anillos activos

74% completado

Movimiento · Ejercicio · Pie

Próxima actividad

Carrera 5K — 18:30

Parque del Retiro · En 2h 12m

🏅

🏠

Inicio

📊

Stats

🗓️

Plan

👤

Perfil

＋

DashboardView.swift
// Metric card con Liquid Glass + tint
struct MetricCard: View {
    let icon: String
    let value: String
    let label: String
    let tintColor: Color

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Image(systemName: icon)
                .font(.title2)
            Text(value)
                .font(.title.bold())
            Text(label)
                .font(.caption)
                .opacity(0.6)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(16)
        .glassEffect( // ← Liquid Glass API
            .regular
                .tint(tintColor)
                .interactive(),
            in: .rect(cornerRadius: 18)
        )
    }
}
TabBar + FAB.swift
// Tab bar automáticamente glass en iOS 26
TabView(selection: $selectedTab) {
    DashboardView()
        .tabItem {
            Label("Inicio", systemImage: "house.fill")
        }
        .tag(0)
    // ... more tabs
}

// FAB con buttonStyle(.glassProminent)
Button(action: { showLogger = true }) {
    Image(systemName: "plus")
        .font(.title2.weight(.semibold))
        .frame(width: 52, height: 52)
}
.buttonStyle(.glassProminent)
.tint(.green)
GlassContainer.swift
// Múltiples glass → SIEMPRE en container
GlassEffectContainer(spacing: 16.0) {
    HStack(spacing: 16.0) {
        ForEach(metrics) { metric in
            MetricCard(
                icon: metric.icon,
                value: metric.formatted,
                label: metric.label,
                tintColor: metric.color
            )
        }
    }
}
// spacing=16 → glass cards se mantienen
// separadas sin fusionarse

Sección 02 — Componentes

Biblioteca de componentes Glass

Todos los estilos de botón y surface disponibles en iOS 26 Liquid Glass.

buttonStyle

.glass

buttonStyle

.glassProminent

glassEffect

.tint(.blue)

glassEffect

.tint(.orange)

Morfología con GlassEffectContainer

Cómo el parámetro spacing controla la fusión

🏃

💧

spacing: 60 → Elementos separados

🏃

💧

spacing: 8 → Glass se fusiona

🏃 8.240 pasos

💧 1.8L agua

🔥 1.847 kcal

spacing: 2 → Card unificada

Sección 03 — Design Tokens

Tokens de implementación para FitTrack Pro

Referencia rápida de valores, modificadores y uso recomendado por componente.

Componente	Modificador SwiftUI	Color / Tint	cornerRadius	interactive	Contexto
Metric Card — Pasos	`.glassEffect(.regular.tint(.green).interactive())`	#34C759	`18`	Sí	Dashboard grid
Metric Card — Calorías	`.glassEffect(.regular.tint(.orange).interactive())`	#FF9500	`18`	Sí	Dashboard grid
Metric Card — Agua	`.glassEffect(.regular.tint(.blue).interactive())`	#007AFF	`18`	Sí	Dashboard grid
FAB — Registrar	`.buttonStyle(.glassProminent).tint(.green)`	#34C759	`capsule`	Sí	Floating sobre scroll
Toolbar buttons	`.buttonStyle(.glass)`	System	`capsule`	Sí	NavigationBar
Tab bar	Automático iOS 26	System	—	Auto	TabView nativo
Activity Ring card	`.glassEffect()`	Sin tint	`22`	No	Card informativa
Widget homescreen	`.containerBackground(for: .widget)`	Accented	`22`	N/A	WidgetKit Small
GlassEffectContainer	`GlassEffectContainer(spacing: 16)`	—	—	Wrapper	Toda la grid metrics

Sección 04 — WidgetKit

Widgets con Liquid Glass + Accented Mode

Los widgets de iOS 26 deben soportar .accented rendering mode para el tono del Homescreen.

FitTrackWidget.swift

struct FitTrackWidgetView: View {
    @Environment(\.widgetRenderingMode)
    var renderingMode

    var body: some View {
        VStack(alignment: .leading) {
            Text("Pasos")
                .widgetAccentable() // ← accent group
            Text("\(entry.steps)")
                .font(.title.bold())
        }
        .containerBackground(for: .widget) {
            if renderingMode == .accented {
                Color.white.opacity(0.08)
            } else {
                Color.green.opacity(0.12)
            }
        }
    }
}

Sección 05 — Anti-patrones

Errores comunes al migrar a Liquid Glass

✗ Incorrecto

Múltiples glass sin container

Aplicar .glassEffect() a varias views sin envolver en GlassEffectContainer. Degrada el rendimiento y rompe las transiciones de morphing entre elementos.

// ❌ MAL
HStack {
  View1().glassEffect()
  View2().glassEffect() // render 2x
}

✓ Correcto

Siempre GlassEffectContainer

Envolver múltiples vistas glass en GlassEffectContainer. Renderizado en un solo pase, habilita morphing y garantiza que spacing controle la fusión visual.

// ✅ BIEN
GlassEffectContainer(spacing: 16) {
  HStack {
    View1().glassEffect()
    View2().glassEffect()
  }
}

✗ Incorrecto

Fondo opaco bajo glass

Usar .background(Color.white) detrás de un glass element anula el efecto de translucencia. El blur no tiene contenido dinámico que reflejar.

// ❌ MAL
.background(.white) // opaco
.glassEffect() // inútil

✓ Correcto

UIKit: clipsToBounds obligatorio

En UIKit, siempre activar clipsToBounds = true junto al cornerRadius. Sin él, el efecto glass se desborda fuera de los límites del view.

// ✅ BIEN (UIKit)
glassView.layer.cornerRadius = 20
glassView.clipsToBounds = true ← clave

Liquid GlassDesign System

Liquid Glass
Design System