Как импортировать скетч-макеты в Фреймер

Отрывок из Фреймер-кейса №1.

Требования к скетч-файлу:

1. Все объекты в Скетче складываем в один артборд, разделив содержимое экранов на две группы — profile и projects. Эти группы будут выполнять функцию экранов. В Фреймер без проблем можно импортировать и несколько артбордов, если между ними происходит более простой переход, но это не наш случай. Группа profile должна быть сверху, словно верхняя карта в колоде. В процессе анимации её содержимое станет видимым поверх группы projects.
2. Оборачиваем в группы все текстовые слои и растровые картинки, которые будем шевелить. Группы после импорта превращаются в слои Фреймера.
3. Все символы детачим, удаляя их мастер-артборды. Чем больше символов, тем дольше импортируется проект. Если в скетч-проекте много символов и их вообще не удалять, на слабой машине импорт может занять до 40 секунд, что полностью парализует работу. Нормальное время импорта — 3–5 секунд. После детача символы превращаются в группы, которые станут слоями в Фреймере. Если ты непременно хочешь сохранить какие-то символы, их нужно обернуть в группы и убедиться в том что они находятся на странице Symbols, а не на странице, артборды из которой ты импортируешь. Я использовал символы, чтобы задать шкалы одометров и пайчарта. Если символ не обёрнут, мы не сможем к нему обратиться из Фреймера.
4. Избегаем одинаковых названий в группах. Хотя Фреймер при импорте не позволит создать два слоя с одинаковым названием, желательно контролировать названия. При совпадении Фреймер добавляет одной из групп единицу: testGroup, testGroup1.
5. В названиях групп используем camelCase, поскольку такова конвенция названий переменных в JavaScript. Не используем пробелы, русские буквы и не начинаем с цифр.
   Если пробелы оставить, они сконвертируются в нижние подчёркивания: test_group. В принципе, в этом нет криминала. Со временем ты придёшь к тому, что называть слои в стиле camelCase удобнее.
6. Маскируем тени. Во время импорта объектов, в которых есть тени, тебя ждёт неприятный подводный камень, на который я в своё время потратил немало времени:

Тени могут влиять на размер и координаты слоя

Допустим, у тебя есть группа с названием Group, в которую обёрнут красный квадрат с тенью. В Скетче группа имеет понятные координаты 32, 32. Тень на них не влияет:

Во время импорта в Фреймер группа с тенью будет сохранена как png-файл. Фреймер включит в кадр эту тень, а значит, высота и ширина файла будет больше размера квадрата. Тень создаст нежелательный отступ. Форма сохранённого png-изображения показана синим контуром. Слой Group будет его размера. Поэтому, Фреймер позиционирует Group в области отрицательных значений. А нам остаётся удивляться, какого чёрта х не равен 32, как это было в Скетче. x равен -61.

Как лечится: Нужно класть в самый низ группы маскирующий слой, который точно задаёт периметр группы, обрезая тени. Как делать маски в Скетче.

Из-за этих довольно строгих требований для фреймер-прототипа нужно делать отдельный макет. Скетч-файл для Фреймера я традиционно называю prototype.sketch и кладу рядом с папкой фреймер-проекта.

Иерархия групп

В группах Скетча я выстраиваю иерархию, с которой будет удобно работать в Фреймере. Я анализирую каждый объект макета и вспоминаю, будет ли он шевелится. Например, напротив имени Beatrice Harris справа вылетает иконка moreIcon, которая формируется из трёх точек. Поэтому, я каждую точку оборачиваю в отдельную группу. Получившиеся группы кладу в общую группу moreIcon, чтобы в будущем пройти по всем точкам циклом. Если в каком-то блоке не будет анимации, к нему не нужно обращаться, а значит, детализировать названия групп в нём нет смысла.

Как выглядят группы в скетч-проекте:

Как импортировать

Открываем подготовленный скетч-проект. Открываем Фреймер и создаём новый проект.

Дальнейшие действия делаем в Фреймере. Скетч оставляем открытым в фоновом режиме. В качестве устройства просмотра указываем:

Canvas → Apple iPhone → iPhone 5

Нажимаем Cmd + I и импортируем дизайн из Скетча в размере 2x. Все дальнейшие импорты будем делать клавишей Shift + Cmd + I.

При первом импорте Фреймер автоматом пишет строку:

sketch = Framer.Importer.load(“imported/prototype@2x”)

Это значит, что теперь в Фреймере есть объект sketch, к которому можно обращаться для манипуляций со слоями из Скетча.

Определяем переменную sketch объектом по умолчанию:

Utils.globalLayers(sketch)

Если этого не сделать, придётся каждый раз ставить эту переменную в начало всех названий cлоёв, а это утомительно. Пример:

sketch.projects

Теперь мы сможем обращаться к объекту projects, не дописывая переменную sketch.

Читать Фреймер-кейс полностью:

#фреймер_кейс №1: Бесшовный переход между экранами

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

Все свои курсы и статьи я выкладываю бесплатно, а также отвечаю на вопросы о Фреймере в Фреймер-чате.

Поддержать проект→

Ссылка на Киви-кошелёк