До кінця цієї сторінки ваші інструменти матимуть ваші власні кольори й шрифти, а наявна робота буде готова до повторного використання. Обліковий запис не потрібен, а створення й експорт виконуються на вашому пристрої.
- Створіть один файл. Створіть свій перший файл: QR-код за кілька хвилин, крок за кроком.
- Додайте свій бренд. Почніть з одного кольору, файлу токенів або готового дизайну.
- Робіть більше такого самого. Поділіться посиланням, заповніть таблицю або запустіть інструмент зі скрипту.
Нова сама ідея? Що таке Lolly?: п'ятихвилинний вступ, а Як працює Lolly показує, хто що робить.
Додайте свій бренд
lolly.tools відкривається в Lolly Demo, власній зразковій дизайн-системі Lolly; Знайомство з Lolly Demo показує, на що ви дивитеся. Ваша дизайн-система замінює її: невеликий набір токенів дизайну, тобто кольорів, шрифтів і кількох правил, за якими малює кожен інструмент. Налаштуйте її один раз, і все, що ви створюєте, одразу відповідатиме бренду.
Оберіть шлях, що відповідає тому, що ви маєте:
- Один колір. Відкрийте Design System Setup (
#/start), дайте своїй дизайн-системі назву й виберіть основний колір. Lolly виводить з нього повну доступну палітру, зі світлими й темними поверхнями, текстом і акцентами. Виберіть шрифт, і у вас готовий робочий бренд. - Файл токенів. Додати з… внизу бічної панелі кімнат у Design System Setup приймає файл токенів DTCG, Tokens Studio чи Penpot, SVG або пакет
LollyBrand. Перетягніть його, і палітра заповниться. Поки дизайн-система порожня, ту саму вибірку відкриває Почати з референсу в кімнаті «Огляд». - Готовий дизайн. У Design оберіть Імпортувати дизайн і перетягніть файл
.fig,.penpot,.ai,.idmlабо SVG. Див. Перенесіть те, що вже маєте нижче.
Коли ви вперше відкриваєте галерею, коротке привітання пропонує ті самі варіанти: Зробіть це своїм відкриває Design System Setup, Принесіть свій дизайн відкриває вибір файлу для дизайну, а Огляньте інструменти спільноти закриває привітання.
signed by Lollyvector SVG167 paths~11k nodes243 groups1 image191 KBCheck it yourselfОтримати підписаний файл
signed by Lollyvector SVG167 paths~11k nodes243 groups1 image191 KBCheck it yourselfОтримати підписаний файл
Далі сім кімнат ведуть вас так далеко, як вам потрібно, у будь-якому порядку: Огляд, Кольори, Тип, Логотипи, Tokens, Файли та Usage & rules. Кожен попередній перегляд у застосунку оновлюється, поки ви друкуєте. Design System Setup описує кожну кімнату.
Шрифти зберігаються на вашому пристрої. Виберіть Google Font, і Lolly збереже файл як ресурс бренду, тож ваша типографіка працює офлайн, а коли інструмент малює, нічого не завантажується.
Перегляд, перемикання й спільний доступ до дизайн-системи
- Подивитися активну. Налаштування → Система дизайну показує активну дизайн-систему як обкладинку й сторінки, лише для читання.
- Перемикатися між ними. Налаштування → Preferences → Design systems перелічує кожну дизайн-систему на цьому пристрої. Одна організація може вести кілька дизайн-систем або одну з кількома колірними варіантами; Brand architectures показує ці схеми.
- Поділитися однією. Експортуйте дизайн-систему як пакет
LollyBrand: один файл, який колега імпортує, щоб отримати ту саму палітру, шрифти й правила.
Дизайн-система, яку надає ваша збірка чи організація, є керованою: вона показує замок і доступна лише для читання. Щоб змінити таку, створіть редаговану копію в Налаштування → Preferences → Design systems.
signed by Lollyvector SVG100 paths~11k nodes151 groups1 image227 KBCheck it yourselfОтримати підписаний файл
signed by Lollyvector SVG79 paths~11k nodes146 groups1 image211 KBCheck it yourselfОтримати підписаний файл
Ваша дизайн-система складається з токенів DTCG, формату, який Penpot читає й записує, а Tokens Studio приносить у Figma, тож палітра, з якою ви проєктуєте, і палітра, яку застосовує Lolly, є одним документом. Подробиці в Design Tokens.
Для розробників: створення пакета бренду з командного рядка
Щоб підняти повторно придатний пакет бренду в локальній копії репозиторію, ingest:brand приймає три контейнери, які експортують Penpot і Tokens Studio: окремий tokens.json, каталог файлів по наборах з $metadata.json або архів project.penpot.
pnpm run ingest:brand ./my-tokens.json --name acme --label "Acme" --activate--activate реєструє бренд як профіль, збирає й перевіряє його каталог. Він ніколи не змінює типовий профіль: щоб використати новий пакет, запустіть із LOLLY_PROFILE=acme. Configuration пояснює, як пакети брендів і профілі поєднуються.
Перенесіть те, що вже маєте
Ви починаєте не з чистого аркуша.
Файли дизайну. Готова робота з Figma, Penpot, Illustrator, InDesign або будь-якого застосунку SVG відкривається в Design як живий макет: текст лишається редагованим, фігури залишаються фігурами, а зображення потрапляють у вашу бібліотеку. Файл читається у вашому браузері, і нічого не завантажується. Import a design перелічує кожен формат і що переноситься.
Колоди. Перетягніть на Lolly презентацію PowerPoint .pptx, щоб розкласти її слайди як ресурси, напишіть нову колоду з Markdown у Markdown Slides або скористайтеся Rebrand a deck, щоб перенести всю колоду на вашу дизайн-систему.
Дані. Вставте або перетягніть таблицю CSV чи JSON, і повторювані поля інструмента заповняться з неї, або Batch створить один готовий файл на рядок.
Від разової роботи до шаблону
Імпортований макет є звичайним сеансом Design. Поділитися з правилами перетворює його на інструмент: ви обираєте, які частини можуть змінювати інші люди, і вони заповнюють лише їх.
Share a design with rules проводить через кожен крок.
Робіть багато, діліться й автоматизуйте
- Експорт. Інструменти створюють SVG, PDF, PNG, JPG, WebP, відео та інше у форматах, які пропонує кожен інструмент, у справжніх друкованих розмірах, коли це потрібно. Див. Export a file.
- Поділіться посиланням. Налаштування інструмента передаються в його посиланні, тож посилання відкриває той самий файл будь-де.
- Один файл на рядок. Керуйте інструментом з таблиці в Batch.
- Автоматизуйте. Той самий рендеринг працює з CLI і з ШІ-агента.
Посилання є повним запитом. Діаграму нижче ніхто не малював: її тип, заголовок і вся таблиця даних були набрані в адресному рядку, і те саме посилання малює ту саму діаграму на будь-якому пристрої.
signed by Lollyvector SVG14 paths~1.1k nodes3 groups19 KBCheck it yourselfОтримати підписаний файл
signed by Lollyvector SVG14 paths~1.1k nodes3 groups19 KBCheck it yourselfОтримати підписаний файл
Куди рухатися далі
- Створення: створення, анімація, запис, спільний доступ і експорт.
- Автоматизація: дизайн-системи, створення інструментів, командний рядок, посилання й агенти.
- Керування: запуск Lolly для команди з Lolly Work.
- Розгортання: хостинг Lolly і Lolly Work.
- Довіра: конфіденційність, безпека та самостійна перевірка файлу.