Советы по работе с Framer.js в Sketch

Советы по работе с Framer.js в Sketch

Как легко импортировать файлы Sketch во Framer.js

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

Примечание: сообщество Framer.js очень активно и очень оперативно и информативно отвечает на вопросы.

Преимущества импорта Sketch-файла

Есть пара способов добавления ваших дизайнов во Framer:

  • можно перетянуть их на рабочую область Framer.js
  • можно разместить изображения в папку“/images”

Это несложно сделать, но импортируя файл sketch, у вас появляется дополнительное преимущество:

  • Никакого жесткого прописывания местоположения изображений
  • Масштабирование ваших дизайнов в 1x, 2x, 3x и т.д.
  • Позиционирование артбордов (новое)

Артборды

Новые изменения, как по мне, просто потрясающие, по ряду причин:

  • Никакого штабелирования артбордов
  • Все артборды видны по умолчанию

Лично мне это сэкономит время. Мне не придется хардкодить пути к файлам, в сразу видеть их на экране.

Имейте в виду:

Советы по работе с Framer.js в Sketch
С сайта framerjs

Группа Sketch = Слой Framer & подгруппы Sketch = подСлой Framer

Советы по названию групп

  • group name * — добавление * превратит группу в одно сглаженное изображение
  • hide group  (если группа скрыта) — группа будет скрытым слоем в framer.js (visible = false)
  • уникальные имена — задавайте каждой группе уникальное имя, так будет проще получить доступ к вашему проекту Framer

Примечание: если у вас есть группы с одинаковыми названиями, можете воспользоваться плагином Rename It для быстрого переименования.

Избегайте чисел и пробелов в названиях групп.

Доступ к слоям

Когда вы делаете импорт, в проекте Framer появляется следующая строка:

Доступ к слоям Framer
Чтобы получить доступ к любому слою, нужно сделать следующее:

sketch.layername

layername – имя нужного слоя. Такой подход может быть утомительным, если вы хотите открыть подслои, так как придется вызывать каждый подслой. Все не так просто: вместо sketch.layername.sublayername нужно использовать sketch.layername.sublayername[x]

Если вы добавите Utils.globalLayers(sketch), то сможете вызывать каждый слой напрямую.

Надеюсь, вам помогут мои советы! Делитесь собственными секретами! А также, поделитесь своими идеями для будущих уроков : )

 

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Подробнее

Выбор правильного инструмента: выбираем лучшее ПО для прототипирования

Инструменты для прототипирования стали важным ресурсом для нас, дизайнеров. Они позволяют документировать разные состояния одного экрана, включая анимацию, переходы и мелкие взаимодействия, которые трудно отобразить в статической документации.
Модуль ViewController для Framer.js
Подробнее

Модуль ViewController для Framer.js

Модуль ViewController для Framer.js помогает вам создавать мультишаговые сценарии пользователя с готовыми переходами вроде затемнения (fade in), увеличения (zoom in) и листания (slide in). Он состоит из модуля Framer и опционального плагина для Sketch. На Medium есть статья-интро.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share