логотип автора курса

Быстрый старт в основы Framer

Это видеокурс в виде скринкаста об основах работы в программе Framer

Ссылка на плейлист курса на youtube

Ещё один инструмент? Почему Framer

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

В этом смысле Framer один из немногих выходов из этой ситуации. Так как он позволяет работать с реальными данными, а также качественно работает в связке с Photoshop, Sketch или Figma.

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

И это не значит, что нужно теперь учить код. Это значит, что как дизайнеру, который отвечает за продукт, вам следует лучше понимать то, как технически устроен продукт, для которого вы проектируете дизайн.

Framer для всего этого – отличный старт.

Об авторе

Я член команды дизайнеров сервиса «Купибилет».

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

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

Содержание

Вступление

Что такое фреймер, для чего он нужен и кому

Интерфейс

Пройдёмся по интерфейсу программы и некоторым особенностям

Основы Coffeescript

Строки, числа, булевы операции, операторы, уловия, массивы, объекты, циклы, функции, комментарии и группировка

Слои

Как их создавать и стилизовать

Импорт макета на примере Sketch

Свойства по умолчанию, сниппеты и utils

Как изменять анимацию всему прототипу, как переиспользовать код и вспомогательные функции

События

Рассмотрим взаимодействия по тапу и драгу с примерами, а также события анимации

Состояния

Научимся создавать и работать с ними

Компоненты Framer

Рассмотрим scroll и page компоненты сразу на примерах

Модули и классы

Бегло пройдёмся по теме модулей. Научимся работать и создавать классы

Финальный проект

Прототип с реальными данными (Firebase)

Заключение

Что делать дальше

Где сказать спасибо?