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

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

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

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

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

Скачать курс в /designer

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

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

Я веду телеграм-канал /designer о дизайне интерфейсов для начинающих и профессионалов.

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

/designer

Вышла книга про Фигму.

Саша Окунев

Written by

Дизайнер интерфейсов в Ozon. Ex-Газпромбанк. Веду канал и сайт slashdesigner.ru.

/designer

/designer

Вышла книга про Фигму. Правильный блог для современного дизайнера интерфейсов.

Саша Окунев

Written by

Дизайнер интерфейсов в Ozon. Ex-Газпромбанк. Веду канал и сайт slashdesigner.ru.

/designer

/designer

Вышла книга про Фигму. Правильный блог для современного дизайнера интерфейсов.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store