Урок 1: Framer AI — сайт за 10 минут

Чему вы научитесь

• Создавать сайт в Framer AI от промпта до публикации
• Работать с freeform canvas: секции, компоненты, слои
• Добавлять анимации (appear, scroll, hover) без единой строки кода
• Публиковать на поддомене или кастомном домене

Почему Framer

Framer — единственный сайтбилдер, который даёт свободу Figma-подобного canvas и при этом выдаёт рабочий сайт. Вы размещаете элементы как в графическом редакторе: свободно перетаскиваете, масштабируете, группируете. Но результат — не статичная картинка, а опубликованный сайт с URL.

AI в Framer генерирует секции и целые страницы по текстовому описанию. On-Page Editing позволяет редактировать уже опубликованную страницу прямо в браузере. А Wireframer-стиль AI-потоков помогает перейти от наброска к макету за минуты.

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Создание сайта: от промпта до публикации

Шаг 1: Новый проект

1. Откройте framer.com (через VPN) и войдите в аккаунт
2. Нажмите New Project
3. Выберите Start with AI
4. Введите описание: «Портфолио графического дизайнера. Минималистичный стиль, тёмная тема. Секции: hero с именем и специализацией, галерея из 6 работ в 2 колонки, раздел обо мне с фото, контактная форма»
5. Framer сгенерирует полную структуру сайта с заполненным контентом

Результат появляется за 30-60 секунд. Это не финал — стартовая точка для доработки.

Шаг 2: Работа с canvas

Интерфейс знаком всем, кто работал в Figma:

• Левая панель — дерево слоёв и список страниц
• Центр — canvas с макетом
• Правая панель — свойства элемента: стили, анимации, layout

Каждый элемент — текст, кнопка, изображение, секция — можно перемещать, масштабировать, менять цвета и шрифты. Всё как в графическом редакторе. Но нажали Publish — и это рабочий сайт.

Шаг 3: AI-генерация дополнительных секций

Чтобы добавить секцию на существующую страницу:

1. Нажмите + между секциями
2. Выберите Generate with AI
3. Опишите: «FAQ с 5 вопросами, аккордеон (раскрывающиеся ответы), минималистичный стиль»
4. Framer вставит секцию в нужное место

Можно переделать существующую секцию: выделите > правый клик > Redesign with AI. Это быстрее, чем описывать с нуля — AI видит текущую структуру и меняет визуал, сохраняя контент.

Анимации без кода

Framer предлагает три типа анимаций. Ни один не требует кода.

Appear-анимации — при загрузке страницы. Выделите элемент > правая панель > Animate > Fade In, Slide Up, Scale или Blur. Настройте задержку (delay) и длительность (duration). Используйте на заголовках и карточках для эффекта «живого» сайта.

Scroll-анимации — при прокрутке. Animate > Scroll > выберите триггер. Параллакс-эффект, масштабирование при приближении, изменение прозрачности. Классический приём: фоновое изображение движется медленнее текста.

Hover/Click-интеракции. Animate > Hover или Tap. Изменение цвета, масштаба, тени, позиции. Обязательный минимум: hover на кнопках (изменение фона + лёгкий scale 1.02) и карточках (тень + translate вверх на 2px).

Публикация

На поддомене Framer (бесплатно):

1. Нажмите Publish в правом верхнем углу
2. Выберите поддомен: your-name.framer.app
3. Через 10-30 секунд сайт доступен по URL

На кастомном домене (платный план):

1. Settings > Custom Domain
2. Введите домен (например, portfolio.example.com)
3. Настройте DNS: CNAME или A-запись по инструкции
4. Framer выпустит SSL-сертификат автоматически

Тарифы Framer (2026)
├── Free: 1 сайт, .framer.app, бейдж Framer
├── Basic ($10/мес): кастомный домен, 30 страниц
├── Pro ($30/мес): 150 страниц, staging, аналитика
└── Scale ($100+/мес): 300+ страниц, premium CDN

Лендинг на десктопе и мобильном (Nano Banana 2 через arckep.ru)

Все платные планы включают бесплатный .com домен на первый год. CMS доступен начиная с Basic. Аналитика и staging — с Pro.

CMS и динамический контент

Framer включает базовый CMS начиная с Basic-плана ($10/мес). Это не Webflow-уровень, но для блога или портфолио достаточно.

Создание CMS-коллекции:

1. Левая панель > CMS > New Collection
2. Задайте поля: Title, Image, Description, Category
3. Добавьте записи через встроенный редактор
4. На странице создайте шаблон карточки и привяжите к коллекции

Для портфолио дизайнера: коллекция «Кейсы» с полями Title, Cover, Description, Client, Year. Добавили новый кейс в CMS — он автоматически появляется на странице в правильном оформлении.

Советы из практики

Начинайте с AI, доводите руками. AI генерирует 80% структуры. Оставшиеся 20% — ваши правки: подвинуть элемент мышкой быстрее, чем описывать его позицию в промпте.

Используйте готовые секции. Insert > Sections — библиотека готовых блоков. Иногда вставить готовую секцию и адаптировать быстрее, чем генерировать с нуля.

On-Page Editing для быстрых правок. После публикации можно редактировать текст и изображения прямо на опубликованной странице в браузере. Для замены текста-заглушки — быстрее, чем открывать редактор.

Проверяйте мобайл. Framer создаёт responsive-версию автоматически, но она не всегда идеальна. Переключитесь на мобильный вид (иконка телефона) и пройдитесь по каждой секции. Частые проблемы: слишком мелкий текст, наезжающие элементы, кнопки вне экрана.

Практическое задание

Создайте сайт-портфолио от промпта до публикации:

1. Генерация: «Портфолио UI-дизайнера, 4 кейса с описанием и скриншотами, раздел обо мне с фото и навыками, контактная форма. Стиль: чистый, светлая тема, акцент — индиго»
2. Правки: замените текст-заглушки на свои данные, подберите цвета
3. Анимации: fade-in на карточках кейсов + hover-эффект (тень + подъём) + scroll-параллакс в hero
4. Публикация: опубликуйте на .framer.app и откройте на телефоне
5. Засеките время: сколько минут от старта до опубликованного сайта?

Если получилось за 10-15 минут — это нормальный результат для первого раза. С практикой время сократится до 5-7 минут для простых лендингов.