Quickstart

The tool gallery - every tool as a card, grouped by category

Ginagawa ng Lolly ang iyong mga alituntunin - kulay, font, layout, lohika - na mga tool na magagamit ng kahit sino para gumawa ng mga natapos na file: mga larawan, PDF, social card, video, sa pamamagitan lang ng pagpuno ng ilang fields. Walang kailangang pag-aralan at walang kailangang i-upload: tumatakbo ang lahat sa device mo, online man o offline.

Ito ang unang pahinang dapat basahin. Dalawang bagay ang magpapaproduktibo sa iyo: gawing sarili mo ang Lolly (i-point ito sa iyong brand), at dalhin ang mga meron ka na (iyong mga design file at tokens). Isang link na lang ang layo ang lahat ng iba pa.

Bago sa Lolly at gusto mo lang gumawa ng something? Buksan ang app, pumili ng kahit anong tool mula sa gallery, punan ang mga blangko, at pindutin ang Render. Bumalik dito kapag gusto mo nang isuot nito ang iyong brand.

1. Gawing sarili mo - i-configure ang iyong brand

Ang brand mo sa Lolly ay isang maliit na design-tokens na dokumento - mga kulay, font, at ilang alituntunin - na ginagamit ng bawat tool bilang batayan sa pag-render. I-set ito nang isang beses at ang lahat ng gagawin mo ay on-brand na sa mismong pagkakabuo, hindi sa pag-review pa. May tatlong paraan para pumasok; piliin ang isa na tugma sa kung saan naroroon na ang iyong brand.

Magsimula mula sa wala (ang wizard)

The Brand Studio start screen - name, primary colour, and a derived palette

Sa unang pagbukas, dadalhin ka sa Start screen (#/start). Bigyan ito ng pangalan at isang primary na kulay at kukunin ng Lolly ang isang kumpleto at accessible na palette mula rito - light/dark surfaces, text, accents - gamit ang parehong colour maths na ginagamit ng engine sa lahat ng dako. Pumili ng font, at may gumaganang brand ka na sa loob ng wala pang isang minuto. Puwede mong pinuhin ang alinman dito sa ibang pagkakataon.

I-import ang brand na meron ka na

Kung nakuha na ang iyong brand bilang design tokens - mula sa Penpot, Tokens Studio (Figma), o kahit anong plain DTCG file - dalhin ito nang buo sa halip na i-type ulit. Dalawang paraan:

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

Tinatanggap ng ingest:brand ang lahat ng tatlong container kung saan ini-export ng Penpot / Tokens Studio ang parehong dokumento - isang solong tokens.json, isang directory ($metadata.json + mga per-set file), o isang project.penpot archive. Gamit ang --activate, ire-register nito ang brand bilang isang profile, lilipat dito, at ire-rebuild ang catalog. Tingnan ang Configuration kung paano magkasya ang mga brand pack at profile.

I-tune ito sa loob ng app

The Dashboard's Design-system tab - the active brand shown read-only

Kapag aktibo na ang isang brand, ang Your brand editor ng dashboard (#/d) ay isang live editor - palitan ang isang kulay o isang role at nag-a-update ang bawat preview sa pahina habang nagta-type ka. Ang parehong brand ay buod sa Profile → Your brand card. Totoo ang mga font: pumili mula sa Google Fonts at ise-store ng Lolly ang file sa device mo bilang isang brand asset, kaya nagbibiyahe ang typography mo kahit offline at wala nang kinukuha sa oras ng pag-render.

Kapag nasiyahan ka na, i-export ang brand bilang isang LollyBrand pack - isang solong file na maaaring i-import ng kasamahan mo para makuha ang eksaktong parehong palette, font, at alituntunin. Ganoon lumilipat ang isang brand sa pagitan ng mga tao at makina nang walang server sa gitna.

Nagbi-round-trip ang brand tokens sa dalawang direksyon. Dahil ang brand ng Lolly ay talagang DTCG tokens - ang format na direktang binabasa at isinusulat ng Penpot at dinadala ng Tokens Studio sa Figma - ang palette na ginagamit mo sa pag-design at ang palette na ipinapatupad ng Lolly ay iisang dokumento lang, hindi dalawang listahan na kailangan mong i-sync nang manu-mano. Tingnan ang Design Tokens.

2. Dalhin ang mga meron ka na

Hindi ka nagsisimula sa blangkong pahina. Binubuksan ng Lolly ang design work at ang mga open format na meron ka na.

Mga open-source na design file

Ang natapos na trabaho sa Figma, Penpot, Illustrator, InDesign, o kahit anong SVG app ay hindi na kailangang manatiling naka-lock sa app na ginamit mo sa pagguhit nito. Buksan ang Layout Studio, i-click ang Import a design, at magbubukas ang file bilang isang living layout - hindi isang flattened na larawan. Ang bawat layer ay nagiging isang editable na box: nananatiling maaaring i-retype ang text, nananatiling shapes ang mga shape, napupunta sa library mo ang mga larawan, at napapanatili nang tapat ang mga kumplikadong vector art. Dumarating na ito naka-conform na sa iyong mga brand face at alituntunin sa kulay.

Meron kaDalhin ito bilang
Isang Figma frameNative na .fig (File → Save local copy), o isang SVG export
Isang Penpot designAng .penpot export nito, o kahit anong SVG
Isang Illustrator fileNative na .ai (PDF-compatible) o .pdf - direktang bubukas
Isang InDesign layout.idml (File → Export → InDesign Markup)
Kahit ano paKahit anong SVG - ang universal na pinto papasok

Ang buong import ay nangyayari sa device mo - pino-parse ang file sa browser mo at walang ini-upload. Nasa Import a design ang buong detalye, at kung ano eksaktong nagpapatuloy.

Mula sa isang beses lang papuntang template

Ito ang bunga: ang na-import na layout ay isa lamang ordinaryong Layout Studio session, kaya kapag na-save mo na ito, mananatili itong nasa isang URL. Kahit sino na may Lolly ay puwedeng buksan ang URL na iyon, palitan ang mga salita, palitan ang isang larawan, at i-render ang sarili nilang bersyon - walang kailangang design app, at nananatiling naka-lock ang mga naka-lock na bahagi. Ang isang beses-lang na design ay nagiging isang reusable na tool. Iyon ang buong ideya, nakakamit nang hindi na kailangang magsulat ng kahit isang linya ng configuration.

Open data at open tools

Ang koleksyon ng community tools ay open source at brand-agnostic - QR code, street map, filter, privacy utilities - at nagre-render ito laban sa iyong brand sa sandaling i-activate mo ito.

The Utilities view - the on-device workhorses like Strip Hidden Data, Compress PDF and Convert Image, all in one place

Pakainin din ang mga tool ng sarili mong open data: i-paste o i-drop ang isang CSV o JSON table at pupunuin mula rito ang mga repeating fields ng isang tool, isang natapos na asset kada row.

3. Gumawa ng isang bagay, tapos ibahagi o i-automate ito

Literal ang "ang URL mismo ang API". Walang taong gumuhit ng chart sa ibaba: ang type nito, ang heading nito at ang buong data table nito ay tinipa sa address bar, at ang parehong link ay nagre-render ng parehong chart sa anumang device.

An area chart of monthly signups, every value of which arrived as a query parameter rather than a click

Kapag aktibo na ang isang brand at nasa kamay mo na ang iyong materyal, gumagawa ang bawat tool ng isang natapos na file:

Saan susunod

Tatlong pathway, depende sa kung ano ang dahilan mo rito: