Руслан Гараев • Пиксель в пикселе

В целом, ничего. Я просто жил и живу свою жизнь 😅 Вчера я вернулся с Еревана, летал туда на выходные со своей любимой женой на концерт. До этого неделю жил в лесу и впитывал новые знания от учителя в компании красивых людей. Параллельно этому у меня куча проектов и работы, которую я люблю. И, к сожалению или к счастью, регулярное ведение блога не является частью моей жизни. Считайте, это мой каминг-аут. Я обещал вам заснять видео про Framer, но меня "захватил в свои объятия" один большой проект, и я просто не нахожу времени на создание контента. НО! Раз я обещал, значит сделаю. Иначе я — не я. В ближайшее время придумаю, когда сделаю. Всё таки личным проектам тоже нужен свет ⭐️ Ну а вы как? Рассказывайте 👇

История о том, как я чуть не закопал ноутбук из-за муторной адаптации блоков сайта под мобилку. Раньше адаптивы для меня были как квест: → Клиент пишет: «На айфоне кнопка наезжает на текст». → Я 40 минут двигаю элементы пиксель за пикселем для каждого блока. → Обновляю страницу → всё съехало обратно. → Повторяю до тех пор, пока не захочется выкинуть ноут в окно. Но после открытия Framer я... обомлел 💀 Оказалось, адаптивы блоков можно делать за 60 секунд, если знать про стеки (те же привычные Auto-Layout из Figma). Как это работает: → Группируем элементы в стек (stack) вертикально или горизонтально. → Настраиваем отступы (gap) между ними. → Переключаемся на мобильную версию → элементы сами встают как надо. Выше в скринкасте я показал, как это работает. Время: 57 секунд на блок. Почему это х10 раз быстрее, чем в Тильде: 1️⃣ Стек — ваш личный сортировщик: • Элементы не разбегаются, даже если экран смартфона меньше экрана чайника. • Хотите поменять порядок? Просто перетащите элемент → остальные подстроятся автоматически. 2️⃣ Стек — это как умный пластилин: • Растягиваете контейнер → внутренние элементы адаптируются под размер. • Добавили новый блок? Framer сам расставит отступы. 3️⃣ Копирование адаптивов: • Сделали идеальный стек для карточек → скопировали его настройки в другой блок. • Никаких «ой, здесь padding другой» — в Framer всё сохраняется. Хотите, чтобы клиенты перестали писать «Почему на телефоне всё съехало?». Начните создавать сайты в Framer. Прежде чем открыть новое обучение, я предоставлю доступ к демо-версии проекта, чтобы вы почувствовали, что такое Framer "на своей шкуре". Пишите «+» в комментариях, если хотите получить демо-доступ первыми 👇 [БЕСПЛАТНЫХ МЕСТ БУДЕТ ВСЕГО 15]

СПОЙЛЕР: Framer всё изменил к лучшему. Знакомо: вы согласовали с клиентом дизайн в Figma. Все довольны, макет идеален. А потом вспоминаете, что теперь это нужно перенести в Tilda. И тут начинается ад: → Сетки в Tilda живут по своим законам (как будто их проектировали на обратной стороне Луны). → Кнопки уплывают вникуда, стоит только ткнуть в «мобильную версию». → Хоткеи? Какие хоткеи? Тыкай мышкой, как в 2007-м. Это как после BMW пересесть на трактор: руль есть, педали тоже, но едет криво и скрипит 🫠 А потом я открыл для себя Framer и ... 🔑 Словно взяли Figma, добавили волшебную кнопку «Сделать сайтом!» и сказали: Работай как привык. Ничего переучивать не надо. Что осталось родным: → Все панели — слои, свойства, страницы, инструменты — на своём месте. → Тот же Alt + Drag по привычке дублирует элементы. → Даже шорткаты для копирования стилей (CMD + Opt + C) — и те работают. Выше прикрепил скринкаст: как я копирую секцию из Figma во Framer → и сразу публикую. Время: 33 секунды. 😵 Фишка для тех, кто устал от Tilda: Framer — это не «ещё один конструктор». Это ваш Figma-макет, только он ещё и дышит, на него можно кликнуть и он живёт онлайн. P.S.: На моём обучении будет лайфхак: «Как за 15 минут подготовить Figma-макет для переноса в Framer, даже если вы никогда не верстали». Стало интереснее? 🔥

Всем из этого листа я дам лучшие условия в знак благодарности за «быстрое» доверие. А в ближайшую неделю я буду делиться информацией о том, почему я выбираю Фреймер, полностью отказывавшись от других инструментов. И также приоткрою занавес, как я готовлюсь к выпуску нового обучающего проекта. Называю его именно «проект», а не курс и не интенсив, потому что отношусь к нему как к своему детищу. Задумка реализовать такой формат взращивалась во мне несколько лет, и наконец сейчас я во всеоружии, чтобы её начать воплощать. Не переключайтесь. А точнее оставайтесь в этом канале, если хотите узнать как работать с зарубежными проектами 🥊

Идея такая: Давно хочу поделиться с вами своими техниками работы во Фреймере. Начать с обучения по базе, с нуля показать как верстаются дизайн-макеты. Продолжить фишками и эффектами с различными анимациями. Сразу скажу, формат будет необычный. Такого вы ещё точно не видели (по крайней мере, мою задумку ещё никто не реализовал). Я сам сейчас верстаю только на Фреймере, как для русских клиентов, так и для зарубежки: на зарубежке очень много запросов на вёртстку уже готовых макетов на Фреймере. Так что, если вы хотите расширить свой функциональный опыт и работать с зарубежкой → вэлкам в комментарии. Пишите «+» 👇, хочу понять для кого буду делать.

Надеюсь, мой канал не читают дяди из РКН 😅 Вы дали мне огня → я даю вам контент. Классно же! Как я уже рассказывал выше, мне пришлось быстро найти решение для оплаты лицензии на шрифт на зарубежном сервисе. При этом не имея казахстанской (или другой страны) карты. И знаете, что сработало? WantToPay — сервис в Телеграм-боте, который создает зарубежные виртуальные карты. Без паспорта, селфи и нервов. Регистрация — 2 минуты, и вы уже оплачиваете Midjourney, Framer, Figma, ChatGPT, Netflix и даже Booking! Почему это круто: ✅ Не нужно светить личными данными. ✅ Работает через Telegram — всё в одном мессенджере. ✅ Включил VPN (обязательно для территории РФ) → оплатил → забыл о санкциях. Где смотреть инструкцию? Специально для вас записал видео, где показываю шаг за шагом, как это работает. → Смотреть видео Ссылки: → Сервис WantToPay → Мой VPN (HitVPN) Если было полезно — дайте 🔥 реакций. А если РКН всё же читает мой канал… ну, привет 👋

Интерактивные компоненты, прелоадер, куки-баннер, лид-форма в связке с AmoCRM. Получилась связка стиля с функционалом. P.S.: без претензии на конверсионный эффект. Главное чтобы клиент остался доволен! → ссылка для просмотра Что скажете? 🔥

Перелопатил одну из своих последних работ по просьбе клиента. Получилось почистить UI после пользовательского теста. Осталось прикрутить кастомные формы, ссылки и прелоадер (по прихоти). После чего смогу показать и вам. Желаете глянуть «поближе»? ⚡️

Знаете, как создать такие ховер-карточки без кода? Это не просто, особенно с нуля. Однако это возможно! Этим мне и нравится Фреймер. Реализовать можно практически любую задумку, и не нужно знать код 😛 Главное понять основы работы с ним. Как вам такой эффект? 🔥

→ Гляньте! Нужна ваша обратная связь, я могу уже не видеть мелкие недочёты. Пишите, если увидите 👇

Делаю первые шаги в сторону зарубежного рынка дизайнеров. Приходится впервые заморочиться над своим сайтом для демонстрации своих кейсов. Концепции уже как пару месяцев, но сел допиливать первый экран только сегодня. Что скажете? 🔥

Слежу за западными веб-разработчиками и поражаюсь тому, что можно без единой строчки кода воплотить в жизнь чуть ли не любой креатив. Вот он — век ноукода 😭 → Сами посмотрите на это волшебство. Как вам? 🔥

Периодически поглядываю, кто как свои обучалки проводит, платные и бесплатные. И уже который год вижу один и тот же формат в одном и том же исполнении. Как мне кажется, такое уже устарело. А что вы думаете? 👇

И тут меня нахлынула волна вдохновения: а может обучалку короткую какую-нибудь провести? Поделиться с вами своими прикладными инструментами и фишками. Как представлю себя, рисующим в Фигме стильные карточки и вёрстку CMS для уроков — аж дух захватывает 😅 Что скажете? Кому идея 🔥 заходит?