UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Советы по работе с 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), то сможете вызывать каждый слой напрямую. Надеюсь, вам помогут мои советы! Делитесь собственными секретами! А также, поделитесь своими идеями для будущих уроков : )


Перевод статьи Naema Baskanderi

Топ коментарі (0)