Видеокурс: Быстрый старт в основы Framer
Руслан Шарипов записал отличный бесплатный видеокурс, в котором на протяжении 4 часов и почти 40 видео рассказал, как освоить Фреймер.
Получившийся финальный проект приложения использует реальные данные с внешнего источника и полноценную аналитику. Я сделал подробное оглавление курса с описаниями всех видео.
На сегодняшний день я считаю этот курс лучшим самоучителем по Фреймеру на русском языке.
Курс может показаться слишком техническим и «программистским». Однако, всё, о чём рассказывает Руслан, действительно пригодится в работе интерактивного дизайнера и здорово расширит кругозор. Особенно, тем дизайнерам, кто никогда не программировал и хотел бы понять, как мыслят программисты. Я считаю Фреймер уникальной точкой входа в программирование, которая позволяет научиться писать код относительно безболезненно и решать понятные визуальные задачи. Этот курс ещё больше упрощает задачу.
Скачать курс в /designer→
990 мб, zip. 39 видео в mp4 + примеры к урокам
Разархивировать лучше на Маке, иначе побьются названия файлов.
Если повествование кажется слишком медленным, Ютюб и VLC позволяют увеличить скорость видео в настройках. На скорости 1.5х курс звучит бодрее.
Оглавление
Весь плейлист →
01. Вступление →
2:58
Что такое Фреймер, кто его использует, зачем делать прототипы, почему нужно использовать именно его, какие требования для прохождения курса.
02. Интерфейс Framer →
10:06
Режимы дизайна и кода, какие есть инструменты в режиме дизайна, вставка готовых иконок из библиотеки, как сделать маску, как определить координаты, что такое автоматическая иерархия, как сделать макет адаптивным, как использовать панель свойств в режиме кода, как менять фон прототипа, что такое таргеты и как их расставлять.
CoffeeScript
03. Переменные →
3:00
Как создать, какие бывают типы данных. Как работать с консолью: команда print.
04. Строки →
4:32
Как соединять строки: два способа.
05. Числа и булевы операции→
2:45
Для чего используются в Фреймере, что такое булевы операции, какие ещё бывают варианты записи булевых операций, как использовать их в условиях.
06. Операторы →
5:37
Какие операции можно выполнять: сложение, вычитание, умножение, деление, сравнение: больше, меньше, равно или нет, а также их комбинации. Что такое is и not. Как использовать логические связки and и or в диапазонах значений, что такое оператор существования.
07. Условия →
7:12
Какие бывают условия: if, if-else. Деление кода на логические ветки, иерархия кода, команда unless. Пример, в котором мы перетаскиваем слой на другой, а другой от этого меняет цвет.
08. Массивы →
3:28
Что это такое, как происходит нумерация элементов в массиве, что можно делать с массивами, как сделать вложенный массив. Как записать массив в несколько строк, как заменять значения, как добавлять новые, как получить длину массива, как задать диапазон значений (два способа).
09. Объекты →
3:51
Что такое и как устроены объекты, как задавать ключи и значения, как записать объект в несколько строк, как сделать вложенные объекты, как выводить значения объектов (два способа), как добавлять и удалять ключи в объектах.
10. Циклы →
4:35
Что такое, какую задачу решают, как выполнять однотипные операции нужное количество раз, какие бывают типы циклов: for-in и for-of. Как использовать циклы с массивами, как создать слой в цикле.
11. Функции →
4:48
Что такое, как сделать простейшую функцию, как передавать в функцию данные (аргументы). Какова область видимости аргументов. Как вызывать функцию без аргументов и с ними. Как делать значения аргументов по умолчанию. Как выводить результат функции в консоль.
12. Комментарии и группировка →
1:43
Зачем используются, три способа писать комментарии. Как складывать код в компактные группы-складки, чтобы сэкономить полезное пространство.
Слои
13. Свойства слоёв →
7:11
Что такое слой и что он может содержать. Как создавать слои и менять их свойства. Что такое minX, midX и maxX. Трюк с переиспользованием значений свойств. Как выравнивать слои по центру экрана (два способа). Основы адаптивности: Screen.width. Как увеличивать или уменьшать слои при помощи свойства scale.
14. Стилизация слоёв →
9:05
Как сделать слой-круг, как вращать слои, как задавать цвет слоя (два способа), как размывать слои, как использовать панель фильтров: blur, brightness, contrast, grayscale, hueRotate, invert, saturate, sepia. Как задать тень слоя через свойство shadowBlur, как сделать слой прозрачным или невидимым (два способа). Как вставить в слой фоновое изображение или видео. Как запускать видео. Как вставлять в слой HTML-код и стилизовать его через style.
Импорт
15. Импорт из Скетча →
6:28
Импорт из Фотошопа, Скетча и Фигмы, как обращаться к группам Скетча через переменную в Фреймере. Как при помощи цикла задавать свойства всем слоям внутри группы. Как работать с несколькими артбордами.
Анимация
16. Анимация свойств →
5:50
Как анимировать слои. Числовые свойства (координаты по X и Y, ширину, высоту, вращение, цвет) можно анимировать.
Как сохранить исходные свойства в переменные для дальнейшего использования. Как использовать метод animate() и ранее созданные переменные.
17. Тайминг, кривые и повторы →
5:43
Преимущество Фреймера в работе с таймингами. Время анимации по умолчанию — 1 секунда. Как задавать время анимации, как отодвигать начало анимации с помощью свойства delay. Как повторять анимацию при помощи repeat, как менять кривую анимации через свойство curve.
18. Виды кривых →
5:31
Виды: linear, ease, in, out, in-out, кривая Безье. Полезный сервис для работы с кривыми Безье: cubic-bezier.com, позволяет сравнивать кривые и точно подстраивать поведение скорости. Что такое пружинящая спринг-анимация, какие свойства необходимо передавать, чтобы добиться нужного эффекта: tension, friction, velocity.
Объекты анимации: как создавать, как привязывать к нужному слою.
19. Свойства по умолчанию →
2:46
Что такое, как менять. Пример: как менять вид новых слоёв и поведение всех анимаций в проекте через Framer.Defaults.
20. Сниппеты →
8:13
Что такое, какие сниппеты уже есть, где хранятся. Как создать пульсирующую анимацию для кнопки и сохранить её код в сниппет. Как запустить две анимации по зацикленной цепочке. Как вставлять сниппеты в код. Как организовать сниппеты в папки. Лимит на уровни вложенности.
21. Вспомогательные функции Utils →
5:44
Зачем нужны, где искать.
Примеры функций:
- Utils.randomColor выдаёт случайный цвет.
- Utils.randomNumber выдаст случайное значение в заданном интервале.
- Utils.labelLayer помещает в заданный слой нужный текст.
- Utils.interval будет запускать анимацию с заданным интервалом.
- Utils.delay отложит срабатывание анимации на заданное время.
- Utils.globalLayers позволяет не писать имя переменной, в которой лежит скетч-макет.
События
22. Событие onTap →
11:49
Что такое события. Готовим макет к анимации, скрывая слои. Пишем события для анимации кнопки Лайк и выезда панели Поделиться. Узнаём, что такое this.
23. Объекты анимации и их цепочки →
7:12
О том, как отслеживать, когда анимация начинается или заканчивается. Пример с псевдообъёмным прыгающим шаром и его тенью.
24. Событие Drag →
10:02
Делаем слой перетаскиваемым. Как заблокировать возможность двигать слой по горизонтали или вертикали. Как увеличить скорость слоя при перетаскивании. draggable.constraints и overdrag— как задать границы, в которых можно перетаскивать. Как отключить отскок объекта от границы и инерцию.
25. Состояния →
13:00
Как работать с состояниями. На примере карточки авиабилета учимся по клику разворачивать подробности о перелёте. Как добавлять состояния. Узнаём свойство frame. Как делать один слой дочерним другому при помощи свойства parent. Как переключать состояния без анимации, используя stateSwitch. Какие бывают события у свайпов. Как переключать состояния по кругу при помощи stateCycle. Что такое состояние default. Как перезаписывать и удалять состояния. Как задавать свойства анимации конкретных состояний.
26. Компоненты: Scroll →
13:55
Как создать компонент на примере ScrollComponent. Как отключить горизонтальный скролл. Как сделать фон скролла прозрачным. Как сделать внутренний отступ внутри скроллящейся поверхности при помощи contentInset. Что такое json и какую структуру имеет json-файл. Как подключить json-файл к прототипу при помощи JSON.parse. Как вытягивать данные из джейсон-файла и использовать их в цикле при генерировании карточки. Как вставлять в качестве иллюстраций случайные изображения с сервиса Unsplash. Как использовать слой-прототип карточки и на его основе генерировать другие карточки. Как скрывать навбар в моменты скролла и возвращать, когда скролл закончился.
27. Компоненты: Page →
10:22
Чем отличается пейдж от скролла. Как генерировать страницы в цикле и размещать их в ряд. Как показывать предыдущую и следующую страницы при помощи методов previousPage и nextPage. Как сделать свайп по вертикали. Как добавить новую страницу в компонент первой, либо последней при помощи addPage. Как запускать листалку с нужной страницы при помощи snapToPage. Как совмещать компоненты скролл и пейдж. Что такое directionLock.
28. Модули и классы →
20:54
Как организовывать большие прототипы. Где найти болванку модуля. Как вставить модуль в прототип при помощи команды require. Как открыть код модуля. Как обращаться к переменным модуля.
Классы — сложная и интересная тема. Как сделать свой компонент (=класс) на основе существующего. Что такое класс. Как использовать конструктор классов. @ или this — ссылаемся на будущий объект. Как задавать свойства класса в виде аргументов. Как использовать проверку на существование свойств и задавать их значения по умолчанию. Как ссылаться на класс-родитель. Как передавать параметры через лоудэш-синтаксис. Как использовать ранее созданный класс. Нужно ли писать свои классы.
Финальный проект
29. Обзор макета →
3:16
Как устроен макет финального проекта приложения. Обзор экранов app, Startup, Account, Home, NewNote, Profile. Какие таргеты расставлены у объектов в режиме дизайна.
30. Настройка проекта →
5:19
Модули, которые используем для проекта: Framer Input и Framer Firebase. Задаём настройку скорости всех анимаций. Как создать новую базу данных в Firebase и подключить её к проекту.
31. Классы →
10:09
Создаём классы StatusBar и HomeIndicator и подключаем их в проект.
32. Функции для анимации →
5:44
Создаём функции fadeIn() и pulseAnim(), которые будем использовать для анимации объектов.
33. Экран Startup →
5:28
Создаём массив всех экранов приложения, помещаем их в контейнер app с помощью цикла. Выстраиваем экраны внутри контейнера app и скрываем их. Применяем ранее написанную функцию fadeIn(). Делаем события по нажатию createAccountBtn и loginAccountBtn. Задаём нужную последовательность экранов.
34. Экран Account →
6:50
Создаём массив экранов AccountSignIn и AccountSignUp. Скрываем все дочерние слои каждого из экранов. Создаём пейдж-компонент и добавляем в него страницы. Добавляем два поля ввода, используя модуль Input. Задаём нужную последовательность экранов.
35. Экран Home →
23:58
Создаём состояния для шапки homeHeader, для кнопки createNewNoteBtn и для экрана newNoteEditor. При клике на кнопку cохраняем состояние в переменную. Делаем проверку на коллизии анимации и проверку на состояние. В них кладём все действия, которые происходят при переходе на экран newNoteEditor. Используем Utils.delay, чтобы отсрочить анимацию хоум-индикатора. Прописываем поведение возврата на экран Home. Делаем поля editorTitleInput и editorTextInput на экане newNoteEditor.
Делаем из слоя homeNotes скролл-компонент, обернув его методом wrap().
В его событии onMove используем функцию Utils.modulate(), чтобы связать изменение положения скролла с количеством эффекта блюра. В итоге, когда заметка оказывается выше или ниже по оси y, она размывается эффектом. Полезный приём: делаем проверку изменения значения при помощи print, чтобы в реальном времени понимать, какие значения имеет определённая переменная. Делаем переход на экран profile.
36. Экран Profile →
2:21
Делаем события для кнопок deleteAllNotesBtn и toHomeBtn. В первом используем метод delete(), который будет отправлять запрос в базу данных и удалять все записи в ней.
Отключаем автообновление прототипа, чтобы эффективнее работать с базой данных.
37. Работаем с Firebase →
17:21
По клику на submitNewNoteBtn отправляем содержимое заметки (свойства editorTitleInput.value и editorTextInput.value) в базу данных. Используем метод post() для отправки данных, в котором передаём джейсон-объект. В нём отдаём два свойства: title и text.
Возвращаем прототип в исходное состояние экрана Home.
Из карточки-прототипа генерируем карточки.
Пишем логику работы с базой данных, используя метод onChange(). В нём в аргументе data будет храниться объект со всеми данными из базы. Документация по модулю Firebase.
Преобразуем данные из data в массив. Генерируем карточки по циклу и заполняем их данными.
Если данных в базе нет, удаляем карточки методом destroy(). Анализируем ошибки в коде и исправляем их.
38. Аналитика →
4:46
Как подключить простую аналитику, используя сервис hotjar.com. Он умеет снимать видео, делать карту кликов и создавать опросы. Добавляем фреймер-сайт в ХотДжар, копируем код аналитики в код проекта. Проходим верификацию. Настраиваем карту кликов, запись видео и окно для опроса пользователей.
39. Заключение →
2:08
Ссылки на полезные ресурсы:
- Документация Фреймера (Cmd + D в Framer Studio)
- Intro Course и Crash Course на сайте Фреймера
- Документация КофеСкрипт
- Учебник по ДжаваСкрипт Ильи Кантора
- Фреймер-кейс №1: бесшовный переход между экранами
- Фреймер-чат для вопросов по Фреймеру
Я веду телеграм-канал /designer о дизайне интерфейсов для начинающих и профессионалов.
Руслан проделал большую и нужную работу. Если ты прошёл этот курс и узнал что-то новое, поддержи его проект через Киви-копилку. Я сам кинул пару сотен и призываю последовать читателей моему примеру. Мы делаем курсы бесплатно, как музыканты делают музыку на улице. Музыкантов благодарят даже за паршиво сыгранную «Группу крови». С момента выпуска курса прошло две недели. За это время Руслан получил 20 рублей. Так мы благодарим тех, кто двигает индустрию вперёд. Это пора менять.
