Lolly
Abrir la app

Guía rápida

signed by Lollyquickstart.htmlHTMLpixels, not shapes11 KBAI generatedgenerated by ClaudeCompruébalo tú mismoDescarga el archivo firmado

Lolly convierte tus reglas - colores, tipografía, diseños, lógica - en herramientas que cualquiera puede usar para crear archivos terminados: imágenes, PDF, tarjetas para redes sociales, vídeo, rellenando unos pocos campos. Hay poco que aprender y nada que subir: crear y exportar ocurre en tu dispositivo, con o sin conexión.

Esta es la primera página que conviene leer. Dos cosas te hacen productivo: haz que Lolly sea tuya y aprovecha lo que ya tienes (tus archivos de diseño y tus tokens). Todo lo demás está a un enlace de distancia.

¿Eres nuevo en Lolly y solo quieres crear algo? Haz tu primer archivo te guía por un código QR, o abre la app, elige cualquier herramienta de la galería, rellena los campos y pulsa Exportar. Vuelve aquí cuando quieras que lleve tu marca.

La vista Utilidades - las herramientas de trabajo que corren en tu dispositivo, como Strip Hidden Data, Compress PDF y Convert Image, todas en un mismo sitio signed by Lollyvector SVG124 paths~29k nodes324 groups395 KBCompruébalo tú mismoDescarga el archivo firmadoLa vista Utilidades - las herramientas de trabajo que corren en tu dispositivo, como Strip Hidden Data, Compress PDF y Convert Image, todas en un mismo sitio signed by Lollyvector SVG124 paths~29k nodes324 groups396 KBCompruébalo tú mismoDescarga el archivo firmadoTry it in the app

1. Hazlo tuyo - configura tu sistema de diseño

Tu marca en Lolly es un pequeño documento de tokens de diseño - colores, tipografías y algunas reglas - contra el que se renderiza cada herramienta. Configúralo una vez y todo lo que crees respetará tu marca por construcción, no por revisión. Hay tres formas de empezar; elige la que encaje con dónde vive ya tu marca.

Empezar desde cero (el constructor del sistema de diseño)

La primera vez que la abres aterrizas en la galería, con un breve diálogo de bienvenida encima que ofrece tres formas de empezar - Hazlo tuyo (el Brand Studio, en #/start), Trae tu diseño (suelta un archivo de Figma, Penpot, InDesign o PDF y se abre como una maquetación editable - la vía más rápida a Aprovecha lo que ya tienes, más abajo) y Explorar las herramientas de la comunidad - además de una fila de idiomas si el inglés no es el tuyo. Elige la primera tarjeta y aterrizas en el Brand Studio. Dale un nombre y un color primario, y Lolly deriva de él una paleta completa y accesible - superficies claras/oscuras, texto, acentos - con las mismas matemáticas de color que el motor usa en todo lo demás.

La sala Colores del Estudio de Marca en una instalación nueva - un chip en vivo, un campo, y toda la primera decisión signed by Lollyvector SVG167 paths~11k nodes243 groups1 image191 KBCompruébalo tú mismoDescarga el archivo firmadoLa sala Colores del Estudio de Marca en una instalación nueva - un chip en vivo, un campo, y toda la primera decisión signed by Lollyvector SVG167 paths~11k nodes243 groups1 image191 KBCompruébalo tú mismoDescarga el archivo firmado Elige una fuente, y tendrás una marca funcional en menos de un minuto. A partir de ahí, las seis salas del estudio - Resumen, Colores, Tipografía, Logotipos, Tokens, Archivos - te dejan llevarla tan lejos como quieras, en cualquier orden, refinando cualquier parte cada vez que vuelvas. La pestaña Sistema de diseño del panel (#/d) muestra el resultado en modo solo lectura y remite de vuelta a #/start, que es donde ocurre la edición (un sistema de diseño bloqueado permanece de solo lectura, mientras que tus propios sistemas locales siguen siendo editables).

Importar una marca que ya tienes

Si tu marca ya está capturada como tokens de diseño - desde Penpot, Tokens Studio (Figma) o cualquier archivo DTCG plano - tráela entera en lugar de volver a escribirla. Dos vías:

# a monolithic tokens.json, a one-file-per-set directory, or a Penpot project archive
pnpm run ingest:brand ./my-tokens.json --name acme --label "Acme" --activate

ingest:brand acepta los tres contenedores en los que Penpot / Tokens Studio exportan el mismo documento: un único tokens.json, un directorio ($metadata.json + archivos por conjunto) o un archivo project.penpot. Con --activate registra la marca como perfil, cambia a ella y reconstruye el catálogo. Consulta Configuración para ver cómo encajan los paquetes de marca y los perfiles.

Ajústala en la app

Una vez activa una marca, sigue dándole forma en el Brand Studio (#/start) - cambia un color o un rol y cada vista previa de la app se actualiza mientras escribes. (La pestaña Sistema de diseño del panel, en #/d, muestra la marca en solo lectura; el estudio es donde la editas.)

La pestaña Sistema de diseño del panel - la marca activa mostrada en solo lectura signed by Lollyvector SVG100 paths~11k nodes151 groups1 image227 KBCompruébalo tú mismoDescarga el archivo firmadoLa pestaña Sistema de diseño del panel - la marca activa mostrada en solo lectura signed by Lollyvector SVG79 paths~11k nodes146 groups1 image211 KBCompruébalo tú mismoDescarga el archivo firmado La misma marca se resume en la tarjeta Perfil → Tu marca. Las tipografías son reales: elige entre Google Fonts y Lolly guarda el archivo en tu dispositivo como recurso de marca, así que tu tipografía viaja sin conexión y nada se descarga en el momento de renderizar.

Cuando estés satisfecho, exporta la marca como paquete LollyBrand - un único archivo que un compañero puede importar para obtener exactamente la misma paleta, tipografías y reglas. Así es como una marca viaja entre personas y máquinas sin un servidor de por medio.

Los tokens de marca van y vienen en ambos sentidos. Como la marca de Lolly es tokens DTCG - el formato que Penpot lee y escribe de forma nativa y que Tokens Studio lleva a Figma - la paleta con la que diseñas y la paleta que Lolly aplica son un mismo documento, no dos listas que mantienes sincronizadas a mano. Consulta Tokens de diseño.

2. Aprovecha lo que ya tienes

No partes de una página en blanco. Lolly abre el trabajo de diseño y los formatos abiertos que ya tienes.

Archivos de diseño de código abierto

El trabajo terminado en Figma, Penpot, Illustrator, InDesign o cualquier app de SVG no tiene por qué quedarse encerrado en la app donde lo dibujaste. Abre Design, haz clic en Importar un diseño y el archivo se abre como una maquetación viva - no una imagen aplanada. Cada capa se convierte en una caja editable: el texto se puede volver a escribir, las formas siguen siendo formas, las imágenes llegan a tu biblioteca y el arte vectorial complejo se conserva fielmente. Llega ya adaptado a tus tipografías y reglas de color de marca.

Si tienesImpórtalo como
Un frame de Figma.fig nativo (Archivo → Guardar copia local), o una exportación SVG
Un diseño de PenpotSu exportación .penpot, o cualquier SVG
Un archivo de Illustrator.ai nativo (compatible con PDF) o .pdf - se abre directamente
Un diseño de InDesign.idml (Archivo → Exportar → InDesign Markup)
Cualquier otra cosaCualquier SVG - la puerta universal de entrada

Toda la importación ocurre en tu dispositivo - el archivo se analiza en tu navegador y nada se sube. Los detalles completos y qué se conserva exactamente están en Importar un diseño.

¿Tienes en cambio una presentación de PowerPoint? Suelta el .pptx en cualquier superficie de carga para archivar sus diapositivas como recursos, escribe una presentación nueva desde Markdown en Markdown Slides, o ejecuta Rebrand para recuperar la misma presentación retematizada, con los gráficos y las animaciones intactos.

De algo puntual a una plantilla

Aquí está la recompensa: una maquetación importada es una sesión normal de Design, así que en cuanto la guardas, vive en una URL. Cualquiera con Lolly puede abrir esa URL, cambiar el texto, sustituir una imagen y renderizar su propia versión - sin app de diseño, y las partes bloqueadas siguen bloqueadas. Un diseño puntual se convierte en una herramienta reutilizable. Esa es toda la idea, y se llega ahí sin escribir ni una línea de configuración.

Datos abiertos y herramientas abiertas

El conjunto de herramientas de la comunidad es de código abierto y agnóstico de marca - códigos QR, mapas de calles, filtros, utilidades de privacidad - y se renderiza contra tu marca en cuanto la activas.

Alimenta las herramientas también con tus propios datos abiertos: pega o suelta una tabla CSV o JSON y los campos repetibles de una herramienta se rellenan a partir de ella, un recurso terminado por fila.

3. Crea algo y luego comparte o automatiza el resultado

Con una marca activa y tu material a mano, cada herramienta produce un archivo terminado:

"Una URL es la API" es literal. El gráfico de abajo no lo dibujó nadie: su tipo, su título y toda su tabla de datos se escribieron en la barra de direcciones, y el mismo enlace renderiza el mismo gráfico en cualquier dispositivo.

Un gráfico de área de altas mensuales, cuyos valores llegaron todos como parámetro de consulta en lugar de con un clic signed by Lollyvector SVG14 paths~1.1k nodes3 groups19 KBCompruébalo tú mismoDescarga el archivo firmadoUn gráfico de área de altas mensuales, cuyos valores llegaron todos como parámetro de consulta en lugar de con un clic signed by Lollyvector SVG14 paths~1.1k nodes3 groups19 KBCompruébalo tú mismoDescarga el archivo firmado

A dónde ir ahora

Tres caminos, según lo que hayas venido a hacer: