Дизайн-системи
Дизайн-система, яку розробники відкривають щодня, а не гарний файл, якому ніхто не довіряє. Токени, компоненти і правила у Figma, синхронізовані з кодом.
Що ви отримуєте
Токени, синхронізовані з кодом
Кольори, шрифти, відступи і радіуси живуть у Tokens Studio і експортуються в GitHub, тож дизайн і код беруть дані з одного джерела.
Документація всередині Figma
Кожен колір, назва і шрифт показані й пояснені прямо у файлі, де вже працюють дизайнери і розробники.
Компоненти з усіма станами
Звичайний, наведення, фокус з клавіатури, вибраний, помилка, скелетон під час завантаження, порожній. Розробнику нічого не треба вгадувати.
Правила, що захищають макет
Довгий текст обрізається, контент переноситься там, де треба, і нічого не ламається, коли демо-тексти замінюють реальні дані.
Створена, щоб нею користувались
Дизайн-система помирає, коли розробники перестають їй довіряти. Тому ми з першого дня підключаємо її до коду: токени в Tokens Studio, експорт у GitHub, однакові назви у Figma і в коді.
Поруч із компонентами лежить візуальний гід усередині Figma: для чого кожен колір, як названо кожен стиль, який шрифт де. Нова людина в команді розбирається в системі за годину, без зустрічей.
Кожен стан, кожен крайній випадок
Кожен компонент має всі свої стани: наведення, фокус під час руху клавіатурою, вибраний, помилка, скелетон, поки вантажаться дані. Правила обрізання і переносу задані в системі, тож довге ім’я чи велике число ніколи не ламають макет. Саме це перетворює стайлгайд на основу, на якій можна будувати.
На практиці
Spillsjakk, платформа шахових турнірів Норвезької шахової федерації, працює на системі з понад 150 екранів зі світлою і темною темами. Веб-застосунок і застосунок для iPhone Aimgod мають один набір токенів, тож зміна кольору чи шрифту доходить до обох.
Наші роботи
Spillsjakk
Платформа шахових турнірів для Норвезької шахової федерації. Продуктовий дизайн і дизайн-система на понад 150 екранів.
Aimgod
Система особистого розвитку. Продуктовий дизайн, full stack веб-застосунок і нативний застосунок для iPhone на SwiftUI. Обидва вже працюють.
Basebank
Концепт мобільного банку. Брендинг, інтерфейс, дизайн-система і моушн.
Чому Creayou
Бутикова студія дизайну і розробки SaaS. Кілька людей, десятиліття в ремеслі і справжня любов до роботи.
Спершу дизайн
З дизайну ми почали 22 роки тому. Кожен проєкт отримує власний дизайн, який виглядає дорого і запам’ятовується, з моушном і мікроанімаціями, зробленими вручну.
Ніколи не повторюємось
Багато студій беруть один перевірений макет для всіх клієнтів. Кожен наш проєкт отримує свою структуру, навігацію і візуальну мову, побудовані навколо того, хто купує і чому.
Сенс замість списку функцій
Сторінки та інтеграції сьогодні зробити легко. Продає інше: ясне розуміння покупця, інформація в правильному порядку і смак у кожній деталі.
Одна людина від брифу до запуску
Засновник, який проєктує ваш продукт, сам пише бриф, спілкується з вами і веде розробку. Нічого не губиться між продажами, дизайном і розробкою.
Трохи більше, ніж просили
По ходу роботи підказуємо, що ще може спрацювати для вашого бізнесу. Ви йдете з ясним баченням наступних кроків.
Як ми працюємо
Знайомство
Довгі розмови з вами, ваш поточний сайт, конкуренти. Записуємо цілі і сьогоднішні цифри, зокрема конверсію, щоб було з чим порівнювати.
Мудборд
Вручну зібрана дошка з найкращих сайтів світу, що пасують вашій аудиторії, стилю і кольорам. Погоджуємо напрям ще до першого екрана.
Концепція
Два-три варіанти ключової сторінки, зазвичай головної або дашборду. Ви обираєте один, і він задає мову для всього іншого.
Дизайн
Кожна сторінка і кожен стан, десктоп і мобільний, на одній системі, тож нові сторінки збираються швидко.
Розробка
Webflow для маркетингових сайтів, Next.js або React для продуктів, нативний iOS, коли продукт живе в телефоні. Разом із Claude Code, моушн і швидкість для нас частина дизайну.
Тестування
Автотести плюс ручна перевірка на реальних телефонах, ноутбуках і комп’ютерах, доки все не працює як слід.
Запуск
Ви затверджуєте, ми передаємо всі акаунти, файли і права, з текстовими і відеоінструкціями для вашої команди.
Розвиток
Search Console, аналітика, SEO, реклама за потреби, щомісячний звіт із цифрами, статті для блогу з ваших матеріалів. Щомісяця, раз на рік або за запитом.
Питання
Чи працюєте ви з продуктом, що вже існує?
Так. Робимо аудит, збираємо повторювані патерни в компоненти і крок за кроком замінюємо разові стилі, не зупиняючи ваших релізів.
Якими інструментами ви користуєтесь?
Figma зі змінними і Tokens Studio з експортом у GitHub. Розробники підхоплюють токени в CSS, Tailwind або SwiftUI.
Чи документуєте ви систему?
Так, усередині Figma: кольори, назви, шрифти, відступи і кожен компонент з його станами. Без окремого сайту, який треба синхронізувати.
Чи підтримує вона темну тему?
Так. Світла і темна теми закладені в структуру токенів з самого початку, а не дописуються потім.
Як ви використовуєте AI?
Дизайн робимо руками: ідеї, сценарії, інтерфейс і кожну деталь вирішують люди. AI бере на себе рутинну інженерію. Ми розробляємо з Claude Code, систематизуємо з ним дизайн-токени, пишемо тести і перевіряємо збірки на відповідність правилам платформ. Тож проєкти виходять швидше, а зекономлений час іде на шліфування.