Framer для початківців: як зробити й опублікувати перший сайт

Крок 1

Почніть з безкоштовного тарифу й маленької задачі

Зареєструйтеся на framer.com. Безкоштовний тариф Framer компанія описує як ідеальний для некомерційного використання: станом на листопад 2026 року в ньому є безкоштовна адреса на домені Framer, 1 ГБ трафіку, до 1000 сторінок і 10 CMS-колекцій у проєкті, завантаження файлів до 5 МБ і пробні 500 AI-кредитів, якщо в робочому просторі (workspace) немає платної підписки. Для власного домену потрібен платний тариф. Framer працює в браузері, є й застосунок для Mac і Windows. Перша задача — сайт-портфоліо з однієї сторінки: про вас, 2–3 роботи, контакти.

• •підготуйте реальні тексти й зображення робіт заздалегідь;
• •для кожної роботи — назва, одне речення про задачу і ваша роль;
• •не плануйте одразу блог і п'ять сторінок: спершу одна сторінка, доведена до кінця.

Крок 2

Розберіться з полотном і стеками

Framer схожий на дизайн-редактор: є полотно, шари, панель властивостей. Але ви робите не картинку, а сторінку, яка має розтягуватися й стискатися. Головний інструмент для цього — Stack: контейнер, що вишиковує елементи в рядок або стовпчик з однаковим проміжком і підлаштовується під вміст. Framer у своїй довідці радить будувати макет саме зі стеків, щоб він змінювався разом із контентом без ручних правок.

• •розбийте сторінку на секції: перший екран, роботи, про вас, контакти;
• •кожна секція — вертикальний стек, усередині — горизонтальні стеки для рядів;
• •секціям і колонкам ставте розмір Fill, кнопкам і підписам — Fit Content, а фіксовані пікселі лишіть для іконок, аватарів і логотипів.

💡 Якщо ви знаєте auto layout у Figma, логіка стеків буде знайомою. Якщо ні — почніть із гайду Figma для початківців: ці навички переносяться.

Крок 3

Типографіка, кольори й компоненти

Перш ніж збирати секції, заведіть текстові стилі для заголовків H1, H2 і основного тексту та кольорові стилі для фону, тексту й акцентів. Тоді зміна в одному стилі оновить увесь сайт. Кнопку, картку роботи й меню зробіть компонентами: їх можна перевикористовувати й міняти в одному місці.

• •один шрифт для заголовків і один для тексту — більше не треба; перевірте, що шрифт має кирилицю;
• •картка роботи — компонент з полями для зображення, назви й опису;
• •перевірте контраст: для звичайного тексту WCAG вимагає співвідношення щонайменше 4.5:1.

Крок 4

Брейкпоінти й чесна робота з AI-агентом

Коли десктопна версія готова, додайте брейкпоінти для планшета й телефона і пройдіться по кожному: розмір шрифтів, напрямок стеків, відступи. Framer Academy радить перевіряти сторінку не лише на готових ширинах пристроїв, а й плавно змінювати ширину між ними: так видно, де переноситься текст і ламається вирівнювання. У Framer є AI-агент, який за промптом може зробити чернетку сторінки чи внести правки; він витрачає AI-кредити.

• •використовуйте агента для чернетки або рутини, а не як заміну рішенням про структуру й акценти;
• •кожну зміну агента перевіряйте на полотні: текст, вирівнювання, порядок читання на телефоні;
• •у портфоліо чесно пишіть, що зроблено з AI, а що вручну.

💡 Спробуйте вправу: зберіть секцію вручну, потім попросіть агента зробити те саме й порівняйте. Так ви швидше зрозумієте, що інструмент робить добре, а що доводиться виправляти.

Крок 5

Опублікуйте сайт і зберіть фідбек

Натисніть Publish у правому верхньому куті: Framer збере сайт і дасть йому згенеровану адресу на framer.app. Власний домен можна підключити пізніше на платному тарифі. Перед публікацією відкрийте Preview і перевірте навігацію, посилання й поведінку на різних ширинах.

• •відкрийте опублікований сайт на телефоні й перевірте, чи все читається без збільшення;
• •якщо сторінка на телефоні не заповнює екран, найчастіша причина, за довідкою Framer, — елемент, ширший за екран телефона: шукайте фіксовану ширину (наприклад, 321 px) або завеликий Max Width;
• •надішліть посилання людям, які скажуть чесно, і поставте конкретне питання.

💡 Хороше питання для фідбеку: «Що ви зрозуміли про мене за перші 5 секунд?» Якщо відповідь не збігається з задумом, міняйте перший екран.