Клікайте: колір, кількість, тип нанесення, завантажте свій логотип або напишіть текст — макет на фото оновлюється.
Пошук товарів, наприклад «термос»
+38 (095) 327 01 45
Кошик 0
Той самий компонент у вузькому контейнері: галерея-свайп, липка панель покупки знизу, акордеони замість двох колонок. Прокрутіть екран телефону.
Екран товару · 390 px
Той самий екран · обрано «Лазерне гравіювання», тираж 100 шт
Стани інтерактивних елементів
Кожен елемент має повний набір станів: звичайний, наведення, натискання, фокус з клавіатури, вибраний, неактивний, помилка. Нижче ті самі компоненти, що працюють на сторінці, зафіксовані в кожному стані.
Кнопка
default
hover
active (натиснута)
focus-visible
loading
disabled
secondary · default
secondary · hover
Колір (swatch)
default
hover
selected
focus-visible
disabled (немає в наявності)
Картка вибору (нанесення)
default
hover
selected
focus-visible
disabled
Поле вводу та завантаження макета
default
hover
focus
filled
Максимум 24 символи
errordisabled
Файл завеликийМаксимум 5 МБ · PNG, JPG, SVG, PDF
upload · errorlogo-orbita.svg48 КБ · завантаженоЗамінити
upload · successКількість та тираж
stepper · мінімум (− неактивний)
stepper · focus
tier · default
tier · hover
tier · поточний
Повідомлення та позначки
● В наявностіbadge · success
Найпопулярнішеbadge · accent
Закінчуєтьсяbadge · warning
Немає в наявностіbadge · error
Додайте ще 4 шт — ціна стане вигіднішою
nudge · підказкаМаксимальна знижка тиражу
nudge · досягнутоОснова дизайн-системи
Двошарова архітектура: примітиви (сирі значення) → семантичні токени (ролі). Компоненти посилаються тільки на семантичні токени, тому тема, бренд чи режим міняються в одному місці. Нижче те, що ляже у Figma як Variables і зачеплене в компоненти.
Примітиви · колір
Семантичні токени · і перевірений контраст (WCAG 2.2)
| Токен | Значення | Пара | Контраст | Рівень |
|---|
Фірмовий блакитний #00B2F2 з логотипа Tobi має контраст 2,43:1 на білому, тому як колір тексту чи тонкої лінії його не використовуємо: на ньому темний текст (6,97:1), а для посилань і вибраних станів береться глибока версія cyan-700 (6,37:1).
Типографіка · Onest (кирилиця, безкоштовний, придатний для сайту)
display / 40·48 / 800Термос Invers
h1 / 34·40 / 700Термос Invers, ТМ Discover
h2 / 26·32 / 700Нанесення логотипа
price / 32·36 / 800 tnum211,22 грн
body / 16·26 / 400Водонепроникний світлодіодний дисплей показує температуру рідини одним дотиком.
small / 14·20 / 500Оплата після погодження деталей
caption / 12·16 / 500Код товару: ttp-6379
Тіло тексту від 16 px, міжрядковий інтервал від 1,5, довжина рядка до 62 символів. Ціни — табличні цифри (tnum), щоб суми не «стрибали» при зміні кількості.
Відступи · крок 4/8
Сітка і брейкпоінти
| Режим | Ширина | Колонки | Gutter | Поля | Що змінюється |
|---|---|---|---|---|---|
| Desktop | ≥ 1020 px | 12 | 24 | 32 | Галерея ліворуч (липка), купівля праворуч, Опис і Характеристики у дві колонки |
| Tablet | 620–1019 px | 8 | 16 | 24 | Одна колонка, тираж у 4 клітинки, картки «Схожі» по 2 в ряд |
| Mobile | < 620 px | 4 | 16 | 16 | Галерея-свайп, липка панель «ціна + Купити», акордеони, моделі списком |
Радіуси, тіні
r-s · 8 · поля, кнопки малі
r-m · 12 · кнопки, картки вибору
r-l · 16 · блоки, фото
shadow-1 · картки
shadow-2 · плаваюче
Компоненти та правила використання
Variant — це стан одного об'єкта; інший об'єкт — окремий компонент. Усе, що можна зібрати з інстансів, не розривається з основним компонентом.
| Компонент | Властивості (props) | Варіанти стану | Правило |
|---|---|---|---|
| Button | kind primary/secondary · size L/M · icon on/off | default, hover, active, focus, loading, disabled | Одна primary на екран. Текст — дієслово. |
| Swatch | color · label | default, hover, selected, focus, disabled | Назва кольору поруч із кроком. Колір не єдина ознака вибору: є кільце. |
| Choice card | title · hint · price · badge | default, hover, selected, focus, disabled | Додаткова ціна — завжди справа і з «+». |
| Tier chip | from · price | default, hover, current | Показує ціну за одиницю, не суму. |
| Stepper | min · step | default, focus, min | Можна вписати точне значення. |
| Field / Upload | label · hint · counter | default, hover, focus, filled, error, disabled | Помилка: текст + колір + іконка, не тільки колір. |
| Price summary | lines[] · saving | без знижки, зі знижкою | Підсумок завжди видно без прокрутки на мобільному (липка панель). |
| Product card | image · title · price | default, hover | Ціна «від». Назва до двох рядків. |
| Accordion | title · meta | closed, open | Опис і Характеристики відкриті за замовчуванням на десктопі. |
| Video block | poster · caption | poster, playing, empty | Новий блок. Якщо відео немає — не показувати зовсім. |
РобимоТокени → компоненти → екрани. Кожен колір, відступ і шрифт у файлі — змінна. Auto Layout у кожному фреймі. Кількість і нанесення змінюють ціну на місці, без перезавантаження.
Не робимоНе фарбуємо елементи «на око» поза токенами. Не розриваємо інстанси. Не передаємо стан одним кольором. Не ховаємо ціну вибраного тиражу нижче лінії згину.
Структура Figma-файлу
Tobi · Product page
├─ 00 Cover статус, версії, контакти
├─ 01 Foundations Variables: Primitives → Semantic · Text styles · Effects · Grid
├─ 02 Components Button · Swatch · ChoiceCard · TierChip · Stepper · Field · Upload · Badge
│ · PriceSummary · ProductCard · Accordion · VideoBlock · Gallery
├─ 03 Product · Desktop 1440 / 1024 · Auto Layout, constraints, секції з назвами
├─ 04 Product · Mobile 390 / 360 · липка панель, акордеони
├─ 05 States & flows усі стани, помилки, порожні стани, прототип «колір → тираж → нанесення → кошик»
└─ 06 Handoff розміри, поведінка, правила для розробників, перелік шрифтів та іконок
Логіка поведінки сторінки
Що відбувається при кожній дії. Та сама логіка заходить у прототип Figma і в специфікацію для розробників.
| Дія | Реакція інтерфейсу |
|---|---|
| Вибір кольору | Фото в галереї змінюється на фото цього кольору. Нанесення на фото зберігається і перераховує вигляд під темний чи світлий корпус. Назва кольору в заголовку кроку. |
| Кількість | Ціна за одиницю береться з найближчого меншого порогу тиражу. Поточний поріг підсвічується. Підказка рахує, скільки штук додати до наступної знижки. |
| Тип нанесення | «Без нанесення» — нічого зайвого. Інші типи відкривають панель: логотип або текст, розташування. Доплата за штуку додається до ціни тиражу. |
| Файл логотипа | Перевірка формату й розміру на місці (PNG, JPG, SVG, PDF до 5 МБ). Помилка пояснює, що виправити. Прев'ю одразу ложиться на фото. |
| Купити без макета | Якщо нанесення обрано, а логотипа і тексту немає — панель підсвічується, фокус переходить до неї, текст підказує вихід: додати або вибрати «Без нанесення». |
| Купити | Кнопка на мить у стані loading, підтвердження з наступними кроками: менеджер погоджує макет, оплата після погодження. |
| Мобільний | Підсумок і «Купити» завжди внизу екрана. Галерея гортається пальцем, точки показують позицію. |
Колір→Тираж→Нанесення→Макет→Кошик→Погодження деталей→Оплата
Нотатки дизайнера до поточного сайту
Те, що помічено при аналізі поточної сторінки цього товару. Не критика, а список, який варто закрити в новій версії.
| Знахідка на tobi.ua | Що робимо в концепті |
|---|---|
| Опис варіанта «Без нанесення» говорить «Чиста кепка без персоналізації» на сторінці термоса. | Текст стає універсальним: «Чистий виріб без персоналізації», підставляється назва категорії. |
| Ціна на основній позиції 308,00 грн, а в таблиці моделей інші кольори — 310,62 грн. | Одна ціна за один тираж на всіх кольорах. Якщо різниця справжня, пояснюємо її в інтерфейсі. Питання до команди. |
| Рядок «Ваша вигода на тиражі» порожній. | Вигода показана в гривнях і у відсотках, зникає, якщо знижки немає. |
| Відгуків і питань 0, а блоки займають місце на екрані. | Порожній стан із запрошенням залишити відгук, згорнутий акордеон. |
| Нанесення видно тільки в тексті, а не на самому виробі. | Прев'ю логотипа або тексту прямо на фото обраного кольору. |
| Немає відео і прикладів нанесення. | Нові блоки: «Відео про товар» і «Як виглядає нанесення» (лазер і кольоровий друк). |
Файл Figma збирається з тих самих токенів і компонентів після затвердження напряму. Шрифт Onest і набір іконок — вільні для використання на сайті.