Видеокурс: Быстрый старт в основы Framer

Руслан Шарипов записал отличный бесплатный видеокурс, в котором на протяжении 4 часов и почти 40 видео рассказал, как освоить Фреймер.

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

На сегодняшний день я считаю этот курс лучшим самоучителем по Фреймеру на русском языке.

Курс может показаться слишком техническим и «программистским». Однако, всё, о чём рассказывает Руслан, действительно пригодится в работе интерактивного дизайнера и здорово расширит кругозор. Особенно, тем дизайнерам, кто никогда не программировал и хотел бы понять, как мыслят программисты. Я считаю Фреймер уникальной точкой входа в программирование, которая позволяет научиться писать код относительно безболезненно и решать понятные визуальные задачи. Этот курс ещё больше упрощает задачу.

Скачать курс в Скетч-дизайнере

990 мб, zip. 39 видео в mp4 + примеры к урокам

Разархивировать лучше на Маке, иначе побьются названия файлов.



Если повествование кажется слишком медленным, Ютюб и VLC позволяют увеличить скорость видео в настройках. На скорости 1.5х курс звучит бодрее.

Как ускорить видео в плеере VLC

Оглавление

Весь плейлист →

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

Ссылки на полезные ресурсы:


Я веду телеграм-канал Скетч-дизайнер о дизайне интерфейсов в Скетче для начинающих и профессионалов. Рассказываю о плагинах, дизайн-системах, фреймер-анимации, записываю видеоуроки.

Руслан проделал большую и нужную работу. Если ты прошёл этот курс и узнал что-то новое, поддержи его проект через Киви-копилку. Я сам кинул пару сотен и призываю последовать читателей моему примеру. Мы делаем курсы бесплатно, как музыканты делают музыку на улице. Музыкантов благодарят даже за паршиво сыгранную «Группу крови». С момента выпуска курса прошло две недели. За это время Руслан получил 20 рублей. Так мы благодарим тех, кто двигает индустрию вперёд. Это пора менять.