Мои конспекты по Фреймеру на русском (устарели)
Для Айпада, 120 стр.
Обновлено: Вышел видеокурс про Фреймер, который лучше подойдёт для начинающих, чем мои конспекты. Оставляю их здесь в качестве архива.
Скачать PDF →
Давно хотел начать тему UI-анимации, и это первый большой шаг. В своё время я выбрал Фреймер по трём причинам:
- он великолепно работает в паре со Скетчем
- в нём можно сделать интерактивную анимацию любой сложности
- прототипы можно загружать на сервис Фреймер Клауд, где они доступны в виде ссылок. Ссылки можно обновлять
- можно делать прототипы на основе данных. Например, на одном экране вбить имя, а в другом получить «Привет, Саша!». Или брать данные из интернета и даже писать их в интернет
- легко найти много примеров и учиться по ним
Возможности Фреймера
Если ты не знаешь, на что способен Фреймер, посмотри это видео:
Много вдохновляющих примеров есть на Дрибле и сайте Фреймера.
Если ты хотел научиться делать что-нибудь подобное и тебя не пугает перспектива писать код, обрати внимание на мой конспект. На русском ничего подобного не найти. Закачай конспект в Айбукс на Айпаде. Если у тебя нет Айпада, это повод зайти на Авито и купить Б/У в пределах 10К + подставку Luxa 2 в районе 2К. Вся магия начинается, когда учебник удобно стоит у тебя на столе.
Я искал видеоуроки по Фреймеру для начинающих, но кроме замечательного Антона Карташова на русском ничего внятного нет. Антон же ориентируется на тех, кто уже имеет какой-то уровень и начинающим не очень полезен. Поэтому, я решил выложить конспекты, по которым освоил Фреймер сам.
Источники
В конспект вошли записи, которые я делал, когда проходил курсы:
Skillshare — Mobile App Prototyping: Designing Custom Interactions
Курс для разогрева, на один зубик. Автор: Ной Пред. Качественно, но мало.
Pluralsight — UI Prototyping with Framer.js
Основной большой курс по Фреймеру. Настоящий жир. Автор: Джей Стейклон.
В конспекте гораздо проще разобраться, если параллельно смотреть эти видео. Даже если английского не знаешь вообще.
Какую работу я найду, если буду знать Фреймер?
Мне Фреймер помог устроиться работать дизайнером в банк. Я был единственной белой вороной среди соискателей, кто знал его. В крупных продуктовых проектах есть ресурсы на то, чтобы качественно прорабатывать анимацию. При этом Фреймер это лишь дополнительный навык, который не заменит другие дизайнерские скилы.
Зачем использовать Фреймер
Фреймер идеален для проектирования интерфейсных микровзаимодействий (UI-анимации элементов). В нём удобно делать небольшие интерактивные прототипы, которые содержат циклы и массивы данных. В теории, всё что можно написать на JavaScript можно сделать в Фреймере. Даже веб-приложения для виртуальной реальности. К нему можно подключать любые скрипты, хоть модуль голосового управления.
Не легче ли использовать Principle и After Effects?
Для базовых задач анимации интерфейса (слайдеры, переходы между экранами и выпадашки) гораздо проще использовать Принципл (Principle), но рано или поздно ты упрёшься в потолок его возможностей, особенно когда в прототипе происходит циклическое действие, как здесь. Фреймер — специфический инструмент, больше всего полезный на крупных продуктовых проектах. Аfter Еffects прекрасен, но не интерактивен, а значит, лишает возможности испытать тот опыт, который проектируется. Если тебе нужно делать анимацию лендингов, обрати внимание на Webflow.
Минусы?
Основной минус Фреймера — невозможность автоматически конвертировать анимацию в реальный iOS/Android — интерфейс. С вебом лучше, но фреймер-код работает только в движке WebKit и не торопится становиться кроссбраузерным. Я видел видеоурок, в котором из Фреймер-прототипа делали полноценное iOS-приложение на Cordova, но это изврат.
Будет ли конспект дорабатываться?
Мой конспект — не профессиональный учебник и создавался не для широкой аудитории. Там могут встречаться отсылки, которые сторонний читатель не поймёт. Я думаю когда-нибудь сделать из него что-то более лёгкое для восприятия. Возможно, я буду его обновлять, и тогда ты узнаешь об этом из Скетч-дизайнера. Но пока пусть он будет доступен хотя бы в таком виде как есть.
Я застрял, помогите!
Я понимаю, что дизайнеру освоить Фреймер адски сложно и нужна большая воля и поддержка сообщества, чтобы добиться профессионального уровня. В то же время, я верю в этот инструмент.
Я создал @framerchat, в котором можно задавать вопросы. Если ты где-то застрял, не стесняйся писать. Если ты хорошо знаешь Фреймер, приходи и помоги другим.
Также ты можешь посмотреть раздел Фреймер-кейсы в Скетч-дизайнере. В рамках кейса я подробно разбираю сложную проблему в Фреймере. Первый выпуск был о бесшовных переходах:
Скачать Фреймер: framer.com (14 дней триала, потом $15 в месяц). Либо можно найти где-нибудь старые версии, которые работают без раздражающих подписок.
Скачать конспект в PDF в телеграм-канале Скетч-дизайнер.
