Framer
162 subscribers
12 photos
1 video
12 links
Новости Framer, апдейты, бесплатные темплейты, компоненты, оверрайды и полезные ресурсы.
По делу, на русском.
Download Telegram
Channel created
⚡️Framer представил Framer 3.0⚡️

Главное обновление — Agents, Branching и новая Community.

Что добавили:

— Agents
AI-агенты теперь работают прямо внутри Framer. Они видят canvas, компоненты, CMS, стили, SEO-настройки и могут помогать с дизайном, контентом, адаптивами, CMS-страницами, code components и аудитом сайта.

По сути, Framer описывает это как Cursor для дизайна.

— Branching
Теперь можно делать отдельные ветки проекта, тестировать идеи, сравнивать изменения и мержить их только после ревью.

Это особенно полезно для команд и клиентских проектов: можно экспериментировать, не ломая продакшен.

— Новая Framer Community
Framer обновил комьюнити вокруг платформы. Теперь внутри него есть Marketplace, Gallery, Awards, Social Feed, Members и Contests.

Для дизайнеров и создателей шаблонов это важный апдейт: больше видимости, больше точек входа в Marketplace и потенциально больше возможностей зарабатывать на шаблонах и компонентах.


❓Что это значит:

Framer всё сильнее двигается не просто в сторону конструктора сайтов, а в сторону полноценной платформы для создания, поддержки и развития сайтов с AI внутри рабочего процесса.

Самое интересное здесь — Agents + Branching. Если это будет работать стабильно, Framer может стать намного удобнее для командной работы и быстрых итераций.

Ссылка на анонс:
https://www.framer.com/blog/framer-3/

#update
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤2👍2
Typing game на Framer🎮

В Framer Community появился проект SpeedType — игра для тренировки скорости печати, собранная во Framer через code component.

Внутри:

— XP-уровни
— sprint mode
— timed mode
— награды
— leaderboard
— игровая логика

Проект:
https://dee-speedtype.framer.media

Community:
https://www.framer.com/community/posts/C7R8qmMJPrYjiN67zco36z

#community
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥2🥰2
😱Автор Framer-шаблонов заработал $150,000+ за год😱

Designbuds опубликовал в Framer Community результаты своих шаблонов за последние 12 месяцев.

С 2024 года он начал делать Framer templates, попал в Top 25 Framer Partners, а его шаблоны принесли более $150,000 affiliate revenue.

Это примерно 10,8 млн ₽.

Топ-3 шаблона по выручке:

— Consulting — $58,156
— Plumbing — $33,432
— Gardener — $18,786

Основная стратегия — делать шаблоны для малого бизнеса: простые, понятные и применимые в реальных нишах.

После выхода Framer 3.0 автор считает, что рынок шаблонов может стать ещё актуальнее.

#community
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤3🥰2
This media is not supported in your browser
VIEW IN TELEGRAM
🟢Анимированные градиенты для Framer — бесплатно🟢

Super Gradients — компонент для красивых градиентных фонов с анимацией, noise/grain и настройкой цветов.

Подойдёт для:

— hero-блоков
— карточек
— промо-секций
— лендингов
— портфолио

Как добавить:

Скопируйте ссылку:

https://framer.com/m/Special-Gradient-dDzEGu.js

И вставьте её в свой Framer-проект — компонент появится внутри проекта.

#component
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍4🥰4
🔼Сливаем SaaS-шаблон для Framer за $50🔼

StealthAI — большой multi-layout шаблон под AI/SaaS-проект.

Внутри:

— 3 главные страницы
— 3 pricing pages
— 2 feature pages
— страница contact / book a demo
— блог
— legal page
— about page
— 404
— адаптив под desktop / tablet / mobile

Шаблон уже собран на стилях, компонентах и CMS-коллекциях, так что его можно быстро перекинуть под свой продукт, лендинг или пет-проект

Забрать:
https://framer.com/projects/new?duplicate=wIougT5geIREaEmwN0l3&via=itsnotnabeel

Предпросмотр:
https://stealthai.framer.website/

#template
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8
💵Экономия на Framer AI💵

Во Framer уже есть AI для сайтов и компонентов, но пользоваться им удобно не всем.

Почему:

— нужно тратить AI credits
— нет нормального выбора моделей
— не всегда хочется работать с кодом именно внутри Framer

Если привычнее писать в ChatGPT, Claude, Gemini или другой нейросети — можно использовать отдельный промпт для создания Framer Code Components.

Просто копируете промпт, вставляете в свою LLM и просите сделать нужный компонент.

Промпт:
https://docs.google.com/document/d/1nof0GR8rgqMP6nLqbebykQ_MdWDfHmvVabNIcvdD-58/edit?usp=sharing

#tips
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7👍3
💥Тактильный отклик во Framer💥

Mobile Haptics — компонент, который добавляет вибрацию на мобильных устройствах.

Можно использовать для:

— кнопок
— успешных действий
— ошибок
— свайпов
— интерактивных элементов

Есть готовые пресеты вроде Success, Nudge и Heavy, а также режим для кастомных паттернов.

На десктопе вибрация не сработает, поэтому внутри есть Debug Mode — можно проверить ритм через звук.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/Haptics-prod-OkTdZT.js


И вставьте её в свой Framer-проект — компонент появится внутри проекта.

#component
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🥰4
🔐PIN-код для страниц во Framer🔐

Page Pin Lock — code component, который закрывает страницу полноэкранным оверлеем с 6-значным кодом.

Можно использовать для:

— приватных страниц
— клиентских превью
— закрытых материалов
— демо-страниц
— временной защиты контента

После ввода правильного кода страница открывается. Также можно включить запоминание пользователя, чтобы код не нужно было вводить каждый раз.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/Pagelockcomponent-qRA4.js

И вставьте её в свой Framer-проект.

Предпросмотр:
https://fortuitous-truly-318391.framer.app/

#component
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍3🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Сливаем красивейший WebGL-слайдер для Framer за $20⬇️

Kinetic Slider Mask — карусель с маской появления, jelly-искажением и chromatic aberration при drag.

Что внутри:

— WebGL-анимации
— mask reveal при загрузке
— физика движения карточек
— RGB split на быстрых свайпах
— split-text анимация текста
— horizontal / vertical режимы

Подойдёт для портфолио, студийных сайтов, fashion/editorial-проектов и эффектных showcase-блоков.

Как использовать:

Откройте remix-ссылку и скопируйте проект себе:

https://framer.com/remix/rytcaKtvE8KD0qLxhnzH

#framer #component #carousel
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤5🥰2
💬Анимированный ASCII-текст компонент за $10💬

ASCII Font Engine — компонент, который превращает текст, картинку или вектор в анимированную ASCII-графику прямо внутри Framer.

Можно использовать для:

— hero-заголовков
— постеров
— glitch/electro вайба
— ретро-интерфейсов
— промо-страниц
— экспериментальных портфолио

Подойдёт, если нужно быстро добавить на сайт более техничный, цифровой или “хакерский” визуальный стиль.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/ASCIIFontEngine-7S1gSS.js

И вставьте её в свой Framer-проект — компонент появится внутри проекта.

Предпросмотр:

https://delicate-approach-791741.framer.app/

#component
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍5🥰2
🔍В поиске крутых компонентов🔍

Давно
хотели использовать какой-то компонент с Framer Marketplace, но нет возможности оплатить его?

Кидайте в комментарии ссылку на классные компоненты, выберем самые залайканные и сольем их в ближайшее время!

Выбрать компонент можно тут:

https://www.framer.com/community/marketplace/components/

#component
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍4🔥3🥰1😁1
⬇️Морфинг секций при скролле во Framer⬇️

Scroll Morph Section — компонент для плавных переходов между секциями через SVG-morph эффект.

Работает от скорости скролла: края секции мягко изгибаются и создают более живой переход между блоками.

Можно настроить:

— цвет заливки
— глубину изгиба
— верхний и нижний край
— силу velocity-эффекта
— stiffness / damping / mass

Подойдёт для лендингов, портфолио, промо-страниц и сайтов, где хочется сделать скролл менее статичным.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/Scroll-Morph-Section-B9Wwad.js

И вставьте её в свой Framer-проект.

Предпросмотр:
https://gray-exercise-530060.framer.app/

#component
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰7❤3👍3