Підготовка фрейму у Figma

1. Фрейм

• Фрейм верхнього рівня на сторінці (або прямо в Section), видимий, щонайменше 240 × 200 px. До 6 фреймів за раз — кожен стає окремим відео.
• Десктоп: ідеально 1440 px завширшки, підходить 1280–1920.
• Мобільний: фрейм до 520 px завширшки (ідеально 390) показується як телефон. Надсилайте його окремим фреймом, а не поруч із десктопним.
• Висота: цілий лендінг — нормально. Щоб текст був чітким, тримайте фрейм до приблизно 12 000 px; довший розбийте на два.
• Фон: дайте фрейму суцільну заливку — цей колір буде під сторінкою. Без неї фон білий.
• Приховані шари ігноруються. Ваш дизайн не змінюється: плагін працює з тимчасовою копією і видаляє її.

2. Секції

• Кожен прямий нащадок фрейму — це секція: Header, Hero, Features, Pricing, Footer. Один шар верхнього рівня на секцію, згори донизу.
• Назвіть секції. ШІ-режисер читає назви, щоб вирішити, де зупинитися і що показати.
• Сторінка в одному великому контейнері теж працює — її буде розрізано там, де в контенті є чіткий проміжок, — але справжні секції працюють краще.
• Шари верхнього рівня, що накладаються один на одного, зливаються в одну секцію.
• Читається до 3000 шарів і 9 рівнів вкладеності. Усе глибше теж видно, але воно рухається разом із батьківським шаром.

3. Що рухається як одне ціле

Фрейм із власною заливкою, обведенням або тінню — це об’єкт (картка, кнопка), він рухається як одне ціле. Фрейм без них — лише розкладка: Casecut заглядає всередину й анімує його вміст.

• Дайте кожній картці фон. Картка з окремих шарів у групі без заливки розпадається на шматки.
• Блок із заливкою майже на всю ширину сторінки вважається фоном секції; його вміст анімується поверх нього.
• Лишайте текст текстом. Він анімується рядок за рядком, і саме його слова читає ШІ. Текст у кривих стає картинкою.
• Великі числа (короткий текст, що починається з цифри, від 30 px) «набігають». Заливки-зображення розкриваються. Шари до 64 × 64 px — це іконки.
• Розмиття фону і режими накладання рендеряться без того, що під шаром, тому можуть виглядати інакше. Якщо це важливо — зведіть цю частину в один шар.

4. Кнопки: що натискає курсор

Курсор натискає лише те, що зроблено як кнопку.

• Фрейм або екземпляр компонента — не просто текст — із текстовим шаром усередині: підпис до 34 символів.
• Висота 24–110 px і ширина до 520 px на фреймі 1440 px. На мобільному фреймі кнопка на всю ширину — нормально.
• І одне з: власна заливка чи обведення; назва з button, btn або cta; або прототипна взаємодія.
• Перший клік іде на головну кнопку — назвіть її зрозуміло (Button / Get started) і поставте в підпис дієслово.

5. Ховер та інші стани — робіть компонентами

Casecut не вигадує ховер — він показує той, який ви намалювали. Зробіть елемент компонентом із варіантами і ставте у фрейм його екземпляри. Далі достатньо одного з цього:

• Прототипна взаємодія на варіанті — на звичайному: While hovering → Change to → варіант ховера. Найнадійніший спосіб. On click → Change to працює для того, що відкривається чи перемикається.
• Варіант із назвою ховера — значення властивості містить Hover (State=Hover), або властивість Hover перемикається з false на true.
• Варіант з іншим станом — Active, Pressed, Open, Expanded, Selected, On, Focus. Вони відкриваються чи перемикаються по кліку і лишаються.
• Різниця в одній властивості. Звичайний варіант і варіант стану мають відрізнятися рівно однією властивістю (State=Default → State=Hover).
• Той самий розмір. Якщо варіант ховера більший, покладіть екземпляр у батьківський фрейм, що тримає свій розмір. Екземпляр: щонайменше 32 × 16 px і не ширший за 720 px на фреймі 1440 px.
• Таби, акордеони, перемикачі: кілька екземплярів одного компонента поруч в одному батьківському фреймі, рівно один із них активний. Клік справді переносить активний стан.
• У відео ховер видно, поки курсор на елементі, і він зникає, коли курсор іде — під час наведення і перед кліком. До 20 станів на фрейм, 5 на компонент.
• Від’єднаний екземпляр або ховер, намальований окремим прихованим шаром, не підхопиться — це має бути варіант того самого компонента.

6. Слайдери

• Ряд щонайменше з 2 слайдів однакового розміру (кожен від 120 × 80 px) з рівним кроком.
• Ряд виходить за край фрейму з увімкненим Clip content або за край сторінки — приховані слайди лишаються у файлі.
• Стрілки: маленькі шари (16–110 px) біля ряду, поза слайдами, з назвою arrow, next, prev чи chevron — або з прототипною взаємодією. До 3 слайдерів, по 10 слайдів.

7. Назви

• Назви шарів і компонентів читає ШІ. Hero image, Card / Pricing, Button / Book a call пояснюють, що це; Frame 4127 не пояснює нічого.
• Найважливіші назви компонентів: екземпляр Button, Tab, Card чи Input розуміється саме так.
• Поставте справжню адресу сайту десь у дизайні — достатньо у футері. Вона показується в рядку браузера у відео.

Чекліст

• Один фрейм верхнього рівня на сторінку: десктоп 1440 px або мобільний 390 px окремим фреймом, із суцільною заливкою
• Прямі нащадки фрейму — це секції, з назвами, по порядку
• Кожна картка має власну заливку, обведення або тінь
• Текст — живий текст, не криві
• Кнопки — фрейми або екземпляри з підписом усередині та заливкою чи обведенням
• Ховер, активний і відкритий стани — варіанти одного компонента, різниця в одній властивості, той самий розмір
• Таби й акордеони: екземпляри одного компонента в одному батьківському фреймі, рівно один активний
• Слайдери: слайди однакового розміру, що виходять за обрізаний фрейм, із названими стрілками
• Шари й компоненти мають справжні назви