Lolly перетворює ваші правила - кольори, шрифти, макети, логіку - на інструменти, якими будь-хто може створювати готові файли: зображення, PDF, картки для соцмереж, відео, заповнивши кілька полів. Вчитися майже нічого не треба і завантажувати нічого не потрібно: створення та експорт відбуваються на вашому пристрої, онлайн чи офлайн.
Це та сторінка, яку варто прочитати першою. Продуктивними вас зроблять дві речі: зробіть Lolly своїм і перенесіть те, що у вас уже є (ваші дизайн-файли та токени). Усе інше - за одне посилання звідси.
Вперше в Lolly і просто хочете щось зробити? Зробіть щось за 60 секунд проведе вас через три приклади, або відкрийте застосунок, виберіть у галереї будь-який інструмент, заповніть поля й натисніть Export. Поверніться сюди, коли захочете, щоб усе було в вашому бренді.
signed by Lollyvector SVGПеревірте саміGet the signed file134 paths~35k nodes251 groups705 KB
signed by Lollyvector SVGПеревірте саміGet the signed file134 paths~35k nodes251 groups706 KBTry it in the app
1. Зробіть його своїм - налаштуйте свою дизайн-систему
Ваш бренд у Lolly - це невеликий документ дизайн-токенів: кольори, шрифти й кілька правил, за якими рендериться кожен інструмент. Налаштуйте його один раз - і все, що ви створюєте, відповідає бренду за побудовою, а не за результатом перевірки. Є три способи почати; виберіть той, що відповідає тому, де ваш бренд живе зараз.
Почати з нуля (конструктор дизайн-системи)
Під час першого запуску ви потрапляєте до галереї, а поверх неї - короткий вітальний діалог із трьома способами почати: Make it yours (Brand Studio за адресою #/start), Bring your design (перетягніть файл Figma, Penpot, InDesign або PDF - і він відкриється як редагований макет, найшвидший шлях до розділу Перенесіть те, що у вас уже є нижче) і Explore the community tools, а також ряд мов, якщо англійська вам не підходить. Виберіть першу картку - і ви опинитеся в Brand Studio. Дайте бренду назву та основний колір, і Lolly виведе з нього повну, доступну палітру - світлі й темні поверхні, текст, акценти - за тією самою колірною математикою, яку рушій використовує всюди.
signed by Lollyvector SVGПеревірте саміGet the signed file61 paths~9.4k nodes77 groups200 KB
signed by Lollyvector SVGПеревірте саміGet the signed file61 paths~9.4k nodes77 groups200 KB Виберіть шрифт - і менш ніж за хвилину у вас є робочий бренд. Далі шість кімнат студії - Overview, Colours, Type, Logos, Tokens, Files - дають змогу розвивати його як завгодно, у будь-якому порядку, уточнюючи будь-що щоразу, коли ви повертаєтесь. Вкладка Design system на дашборді (#/d) показує результат лише для перегляду й веде назад до #/start, де відбувається редагування (якщо ви не працюєте зі збіркою Lolly із заблокованим брендом, де бренд фіксований і змінювати нічого).
Імпортуйте бренд, який у вас уже є
Якщо ваш бренд уже описано дизайн-токенами - з Penpot, Tokens Studio (Figma) чи будь-якого звичайного файлу DTCG - перенесіть його цілком, а не набирайте заново. Два шляхи:
- У застосунку: конструктор дизайн-системи: Brand Studio (
#/start) приймає його через Add from… унизу панелі кімнат - файл токенів, експорт Penpot, SVG або пакетLollyBrand. Перетягніть його - і палітра засвітиться. - З командного рядка, щоб зібрати багаторазовий пакет бренду:
# 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" --activateingest:brand приймає всі три контейнери, у яких Penpot / Tokens Studio експортують той самий документ: один tokens.json, каталог ($metadata.json + файли по наборах) або архів project.penpot. З --activate команда реєструє бренд як профіль, перемикається на нього й перебудовує каталог. Про те, як пакети брендів і профілі поєднуються, читайте в розділі Конфігурація.
Налаштуйте його в застосунку
Коли бренд активний, продовжуйте формувати його в Brand Studio (#/start): змініть колір або роль - і кожен попередній перегляд у застосунку оновиться просто під час введення. (Вкладка Design system на дашборді за адресою #/d лише показує бренд; редагування відбувається у студії.)
signed by Lollyvector SVGПеревірте саміGet the signed file280 paths~12k nodes140 groups1 image182 KB
signed by Lollyvector SVGПеревірте саміGet the signed file280 paths~12k nodes140 groups1 image181 KB Той самий бренд коротко описано на картці Profile → Your brand. Шрифти справжні: виберіть із Google Fonts - і Lolly збереже файл на вашому пристрої як ресурс бренду, тож ваша типографіка працює офлайн і нічого не завантажується під час рендерингу.
Коли результат вас влаштовує, експортуйте бренд як пакет LollyBrand - один файл, який колега може імпортувати й отримати точно ту саму палітру, шрифти та правила. Саме так бренд переходить між людьми та машинами без сервера посередині.
Токени бренду переносяться в обидва боки. Оскільки бренд у Lolly і є токенами DTCG - формат, який Penpot читає й записує напряму, а Tokens Studio приносить у Figma, - палітра, якою ви проєктуєте, і палітра, яку Lolly застосовує, є одним документом, а не двома списками, що їх ви вручну тримаєте синхронними. Див. Дизайн-токени.
2. Перенесіть те, що у вас уже є
Ви починаєте не з чистого аркуша. Lolly відкриває дизайн-роботи та відкриті формати, які у вас уже є.
Відкриті дизайн-файли
Готова робота у Figma, Penpot, Illustrator, InDesign чи будь-якому застосунку з SVG не мусить залишатися замкненою там, де ви її намалювали. Відкрийте Design, натисніть Import a design - і файл відкриється як живий макет, а не пласка картинка. Кожен шар стає редагованим блоком: текст можна перенабрати, фігури залишаються фігурами, зображення потрапляють до вашої бібліотеки, а складна векторна графіка зберігається точно. Він одразу приходить приведеним до шрифтів і колірних правил вашого бренду.
| Що у вас є | Як це перенести |
|---|---|
| Фрейм Figma | Рідний .fig (File → Save local copy) або експорт SVG |
| Дизайн Penpot | Його експорт .penpot або будь-який SVG |
| Файл Illustrator | Рідний .ai (сумісний з PDF) або .pdf - відкривається напряму |
| Макет InDesign | .idml (File → Export → InDesign Markup) |
| Будь-що інше | Будь-який SVG - універсальні двері всередину |
Увесь імпорт відбувається на вашому пристрої: файл розбирається у вашому браузері, і нічого нікуди не надсилається. Повні подробиці й точний перелік того, що переноситься, - у розділі Імпорт дизайну.
Маєте натомість презентацію PowerPoint? Перетягніть .pptx у Deck Builder, щоб редагувати її слайд за слайдом, уже підігнану під ваш бренд, або запустіть Rebrand a Deck, щоб отримати ту саму презентацію з новим оформленням і зі збереженими діаграмами й анімаціями.
Від разової роботи до шаблону
Ось у чому виграш: імпортований макет - це звичайна сесія Design, тож щойно ви його збережете, він живе за URL-адресою. Будь-хто з Lolly може відкрити цю адресу, змінити текст, замінити зображення та відрендерити свою версію - без дизайнерського застосунку, а заблоковані частини лишаються заблокованими. Разовий дизайн стає багаторазовим інструментом. Ось і вся ідея, досягнута без жодного рядка конфігурації.
Відкриті дані та відкриті інструменти
Набір інструментів спільноти має відкритий код і не залежить від бренду - QR-коди, карти вулиць, фільтри, утиліти приватності - і рендериться з вашим брендом одразу після його активації.
Подавайте інструментам і власні відкриті дані: вставте або перетягніть таблицю CSV чи JSON - і повторювані поля інструмента заповняться з неї, по одному готовому файлу на рядок.
3. Створіть щось, а потім поділіться цим або автоматизуйте
Коли бренд активний, а ваші матеріали під рукою, кожен інструмент видає готовий файл:
- Рендерте будь-який інструмент у SVG, PDF, PNG, JPG, WebP, відео та інше - у справжніх друкарських розмірах і фізичних одиницях, коли це потрібно. Див. Експорт і формати.
- Поділіться посиланням. Кожен стан інструмента - це URL, тож готовий файл відтворюваний і адресований параметрами: зафіксуйте посилання, перегенеруйте будь-коли.
- Робіть це масово. Керуйте шаблоном із таблиці в пакетній сітці: по одному готовому файлу на рядок.
- Автоматизуйте. Той самий рендер запускається з CLI і від ШІ-агента - URL і є API.
«URL і є API» - це буквально. Діаграму нижче ніхто не малював: її тип, заголовок і всю таблицю даних було набрано в адресному рядку, і те саме посилання рендерить ту саму діаграму на будь-якому пристрої.
signed by Lollyvector SVGПеревірте саміGet the signed file14 paths~1.1k nodes3 groups19 KB
signed by Lollyvector SVGПеревірте саміGet the signed file14 paths~1.1k nodes3 groups19 KB
Куди рухатися далі
Три шляхи - залежно від того, навіщо ви тут:
- Lolly для творців - ви створюєте речі. Переваги та як отримати від застосунку максимум.
- Lolly для розробників - ви пишете інструменти, інтегруєте та розгортаєте. Технічна документація.
- Lolly для операторів - ви відповідаєте за бренд, безпеку та впровадження в межах організації.