Pass Designer: qué es y cómo funciona la beta para Wallet

⏱️ Lectura: 14 min

Apple abrió la beta de Pass Designer, una app nueva que convierte crear un pass de Wallet en arrastrar campos y elegir colores en vez de escribir JSON a mano. Antes de esto, cualquier cafetería, aerolínea o venue que quisiera emitir una tarjeta de fidelidad o un boleto digital tenía que construir el archivo pass.json directamente o pagar por una herramienta de terceros.

La promesa central es la fidelidad visual: la página oficial de Pass Designer explica que la vista previa usa el mismo renderizador que iOS y watchOS, así que lo que se ve en la app de escritorio es exactamente lo que el usuario final recibe en su iPhone o Apple Watch.

TL;DR

• Pass Designer es la app beta de Apple para crear y previsualizar passes de Wallet sin escribir JSON a mano.
• La vista previa usa el mismo motor de renderizado de iOS y watchOS, así lo que ves es lo que ve el usuario.
• Los tags semánticos agregan datos estructurados que activan Siri Suggestions, Calendario y Mapas.
• La validación en tiempo real marca claves obligatorias faltantes antes de exportar el pass.
• Requiere macOS 27 y una cuenta de Apple Developer para descargarse.

¿Qué es Pass Designer?

Pass Designer es la aplicación oficial de Apple para macOS que permite crear, editar y previsualizar passes de Apple Wallet sin escribir código: define colores, campos, códigos de barras y tags semánticos para tarjetas de fidelidad, boletos de evento, cupones y tarjetas de embarque.

Por debajo, cada pass sigue siendo un archivo pass.json comprimido junto a sus imágenes en un .pkpass. La app no inventa un formato nuevo: expone con una interfaz gráfica el mismo esquema que Apple documenta en Wallet Passes desde hace más de una década, pero valida cada campo mientras lo editás.

Por qué importa el editor de Apple Wallet

Hasta ahora, diseñar un pass implicaba dos roles separados: alguien que armara el JSON con los campos correctos y alguien que revisara que los colores y el logo se vieran bien en pantalla. Un error de tipeo en una clave obligatoria, como passTypeIdentifier, rompía el pass recién al intentar abrirlo en un iPhone real.

El editor de Apple Wallet elimina ese ciclo de prueba y error. Como la vista previa renderiza con el mismo motor de iOS, un diseñador sin conocimientos de JSON puede ajustar el layout, probar contraste de colores y revisar cómo se ve el pass en una Apple Watch, todo antes de tocar una línea de código.

Cómo funciona la app para crear passes

Plantillas y colores

La app arranca con plantillas provistas por Apple para cada tipo de pass: boarding pass, cupón, boleto de evento, tarjeta de tienda y pass genérico. Desde ahí se ajustan por separado el color de fondo, el color de primer plano y el color de las etiquetas (labels), que son los tres parámetros que definen la identidad visual de la marca dentro de Wallet.

Vista previa en tiempo real

Cada cambio se refleja al instante en dos previsualizaciones paralelas, una para iPhone y otra para Apple Watch. Esto importa porque el espacio disponible en la pantalla del reloj es mucho menor, y un campo que se lee bien en el teléfono puede recortarse en la muñeca si no se diseña pensando en ambos tamaños desde el inicio.

El formato pass.json detrás del diseñador de tarjetas de Wallet

Todo pass, se edite a mano o con la app, termina siendo el mismo tipo de archivo. Un pass.json mínimo para una tarjeta de fidelidad luce así:

{
  "formatVersion": 1,
  "passTypeIdentifier": "pass.org.programacion.cafeteria",
  "serialNumber": "CAFE-00142",
  "teamIdentifier": "A1B2C3D4E5",
  "organizationName": "Cafeteria El Solitario",
  "description": "Tarjeta de fidelidad",
  "storeCard": {
    "primaryFields": [
      { "key": "balance", "label": "SELLOS", "value": "7 de 10" }
    ]
  },
  "backgroundColor": "rgb(60, 30, 10)",
  "foregroundColor": "rgb(255, 255, 255)"
}

Este JSON define una tarjeta de sellos con fondo marrón oscuro y texto blanco. La app valida al vuelo que passTypeIdentifier y teamIdentifier coincidan con un certificado real antes de dejar exportar el pass; si falta alguno, marca el campo en rojo en lugar de generar un archivo roto.

Tags semánticos: datos que Siri y Mapas entienden

Para boletos de evento y boarding passes, los tags semánticos agregan una capa de datos estructurados por encima de los campos visibles. Un boleto de evento con tags semánticos se ve igual en pantalla, pero además permite que Siri lo sugiera antes de la hora del evento y que Mapas ofrezca la ruta a la sede sin que el usuario abra Wallet:

{
  "eventTicket": {
    "primaryFields": [
      { "key": "event", "label": "EVENTO", "value": "Konfa Dev LATAM 2026" }
    ]
  },
  "semantics": {
    "eventName": "Konfa Dev LATAM 2026",
    "venueName": "Centro de Convenciones San Salvador",
    "eventStartDate": "2026-11-14T18:00-06:00"
  }
}

La app para crear passes además puede generar automáticamente una versión del pass sin el bloque semantics, para que siga funcionando en versiones viejas de Wallet que ignoran esa clave en vez de romperse con ella.

Ejemplos prácticos con la herramienta de diseño de passes

Pensemos en tres escenarios reales. Una cadena de café necesita una tarjeta de sellos simple: diez campos iguales, un contador y un color corporativo, el caso más básico de storeCard. Una aerolínea necesita un boarding pass con código de barras, puerta de embarque y datos semánticos de vuelo para que el sistema avise al usuario cuando esté por cerrar el check-in.

Un venue de música, en cambio, necesita boletos de evento con eventStartDate y venueName para que el pass aparezca solo en la pantalla de bloqueo el día del show. Los tres casos comparten el mismo esquema base de pass.json; lo que cambia es qué bloque de nivel superior se usa (storeCard, boardingPass o eventTicket) y qué tags semánticos tienen sentido para ese tipo de pass.

Cómo empezar: crea un pass.json sin el diseñador de tarjetas de Wallet

Para seguir esta sección necesitás una cuenta de Apple Developer (gratuita alcanza para generar un Pass Type ID certificate), el certificado intermedio Apple WWDR, y openssl más zip instalados (vienen por defecto en macOS y en la mayoría de distros Linux; en Windows, PowerShell no trae openssl y hay que instalarlo con winget install ShiningLight.OpenSSL.Light y usar Compress-Archive en lugar de zip).

Con el pass.json y las imágenes (icon.png, [email protected], logo.png) en una carpeta, el proceso manual tiene cuatro pasos:

# 1. valida que el JSON sea correcto
plutil -lint pass.json

# 2. separa certificado y llave privada desde el .p12 exportado de Keychain Access
openssl pkcs12 -in Certificates.p12 -clcerts -nokeys -out passcertificate.pem
openssl pkcs12 -in Certificates.p12 -nocerts -nodes -out passkey.pem

# 3. genera manifest.json con el hash SHA-1 de cada archivo
shasum -a 1 pass.json icon.png [email protected] logo.png > manifest.txt
python3 -c "import json; print(json.dumps({l.split()[1]: l.split()[0] for l in open('manifest.txt')}))" > manifest.json

# 4. firma el manifest con el certificado y el WWDR
openssl smime -binary -sign -certfile AppleWWDRCA.pem \
  -signer passcertificate.pem -inkey passkey.pem \
  -in manifest.json -out signature -outform DER

# 5. empaqueta el .pkpass
zip -r cafeteria.pkpass pass.json manifest.json signature icon.png [email protected] logo.png

El comando zip del último paso imprime algo como esto, confirmando que los seis archivos quedaron dentro del paquete:

  adding: pass.json (deflated 51%)
  adding: manifest.json (deflated 40%)
  adding: signature (stored 0%)
  adding: icon.png (stored 0%)
  adding: [email protected] (stored 0%)
  adding: logo.png (deflated 2%)

Para confirmar que el JSON es válido antes de firmar nada, plutil -lint pass.json devuelve pass.json: OK si la sintaxis está bien formada; cualquier otro mensaje señala la línea exacta del error.

💡 Tip: corré plutil -lint pass.json antes de firmar y comprimir. Es más rápido detectar una coma de más ahí que después de que Wallet rechace el .pkpass sin explicar por qué.

flowchart LR
    A["Elegir plantilla"] --> B["Editar campos y colores"]
    B --> C["Agregar tags semanticos"]
    C --> D["Vista previa en iOS y watchOS"]
    D --> E["Validacion automatica"]
    E --> F["Exportar pass.json o .pkpass"]

Casos de uso reales del editor de Apple Wallet

• Tarjetas de fidelidad, cadenas de café o retail con un contador de sellos que sube cada vez que el pass se actualiza desde el servidor.
• Boarding passes, aerolíneas que necesitan puerta, asiento y código de barras, con datos semánticos de vuelo para notificaciones automáticas.
• Boletos de evento, venues que quieren que el pass aparezca en la pantalla de bloqueo cerca de la hora y ubicación del show.
• Cupones, comercios con una oferta temporal, donde el campo relevantDate hace que el pass se destaque solo mientras la promoción está activa.

Errores comunes al usar la app para crear passes

• teamIdentifier desalineado, si no coincide exactamente con el Team ID del certificado, Wallet rechaza el pass sin un mensaje claro de error.
• Contraste de colores, definir foregroundColor y backgroundColor casi idénticos vuelve el texto ilegible en pantallas con brillo bajo.
• Formato de código de barras equivocado, mezclar PKBarcodeFormatQR con un lector que solo acepta PDF417 hace que el escaneo falle en el punto de venta.
• serialNumber repetido, dos passes con el mismo número de serie para el mismo passTypeIdentifier se sobrescriben entre sí en el dispositivo del usuario.
• webServiceURL sin authenticationToken, declarar la URL de actualizaciones sin el token obligatorio impide que el servidor reciba los pedidos de Wallet.

Comparativa: Pass Designer vs edición manual de JSON

Profundizando: así valida tags semánticos PassKit Designer

Cuando Wallet abre un .pkpass, primero descomprime el archivo y recalcula el hash SHA-1 de cada elemento listado en manifest.json. Si un solo byte de pass.json o de una imagen cambió después de firmar, el hash no coincide y el dispositivo rechaza el pass completo en silencio, sin instalarlo.

La firma en sí no protege el contenido contra lectura, solo garantiza integridad: cualquiera puede abrir un .pkpass con un descompresor de archivos y leer el JSON de adentro. Lo que la firma impide es que alguien modifique un pass legítimo después de que salió del servidor sin que Wallet lo detecte.

Para passes que cambian con el tiempo, como un boarding pass que actualiza la puerta de embarque, el pass declara un webServiceURL y un authenticationToken. Cuando el servidor tiene una actualización, dispara un push silencioso vía APNs; Wallet recibe ese push y le pide al servidor la versión nueva del pass, sin que el usuario tenga que hacer nada:

sequenceDiagram
    participant U as Usuario
    participant W as Apple Wallet
    participant S as Servidor del pass
    participant A as APNs
    U->>W: agrega el pass a Wallet
    W->>S: registra el device token
    S-->>A: push de actualizacion
    A-->>W: notifica cambio disponible
    W->>S: solicita el pass actualizado
    S-->>W: responde pass.json nuevo
    Note over U,W: el pass se actualiza sin reabrir la app

Los cinco tipos de pass que soporta PassKit (boarding pass, cupón, boleto de evento, tarjeta de tienda y genérico) comparten exactamente este mismo ciclo de firma y actualización; lo único que cambia entre ellos es qué campos visibles y qué tags semánticos tiene sentido declarar:

flowchart TD
    A["PassKit: tipos de pass"] --> B["Boarding Pass"]
    A --> C["Coupon"]
    A --> D["Event Ticket"]
    A --> E["Store Card"]
    A --> F["Generic"]

⚠️ Ojo: la beta de este editor solo instala sobre macOS 27. Si tu equipo está en una versión anterior, no hay forma de probarlo hoy más que escribiendo el pass.json a mano.

📖 Resumen en Telegram: Ver resumen

Tu próximo paso: escribí un pass.json de una tarjeta de fidelidad simple, corré plutil -lint pass.json para confirmar que es válido y firmalo con los comandos de openssl de la sección anterior.

Preguntas frecuentes

¿Pass Designer es gratis?

Sí, se descarga sin costo con una cuenta de Apple Developer, pero solo instala sobre macOS 27 mientras dure la beta.

¿Qué aportan los tags semánticos que agrega el diseñador de tarjetas de Wallet?

Convierten campos de texto plano en datos estructurados que Siri, Calendario y Mapas pueden leer directamente, habilitando sugerencias y rutas sin que el usuario abra Wallet.

¿Necesito PassKit Designer para generar passes desde un backend?

No. Para generación masiva o dinámica conviene una librería como passkit-generator en Node.js, que firma y empaqueta los .pkpass por código.

¿Qué pasa si el editor de Apple Wallet marca un campo en rojo?

Indica una clave obligatoria faltante o inválida, como passTypeIdentifier o teamIdentifier; el pass no se puede exportar hasta corregirlo.

¿Los passes creados con la app para crear passes funcionan en Apple Watch?

Sí, la vista previa incluye el layout de Apple Watch desde el inicio, con el mismo motor de renderizado que usa watchOS.

Referencias

• Apple Developer: Pass Designer: página oficial de la beta, requisitos y descarga.
• Apple Developer: Wallet Passes: referencia completa del formato pass.json y las claves semánticas.
• Wikipedia: Apple Wallet: historia y evolución de la app de Apple para passes y tarjetas.
• GitHub: passkit-generator: librería open source en Node.js para generar y firmar archivos .pkpass.

📱 ¿Te gusta este contenido? Únete a nuestro canal de Telegram @programacion donde publicamos a diario lo más relevante de tecnología, IA y desarrollo. Resúmenes rápidos, contenido fresco todos los días.

Imagen destacada: Foto de Logan Voss en Unsplash