Советы по работе с 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), то сможете вызывать каждый слой напрямую.

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

 

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Создание iOS-приложения в Sketch и Xcode, публикация его в App Store

Создание приложения в Sketch и Xcode еще никогда не было таким простым. Sketch и Xcode делает весь этот процесс одинаково достижимым для дизайнеров и разработчиков. С одной стороны, в Sketch каждый шаблон и инструмент создан специально для такого типа работы, а с другой – у нас есть Storyboard и Assets Catalog в Xcode, которые позволяют быстро построить функциональный прототип. За 5 минут у вас может получиться нечто, что можно потестировать на вашем iPhone. Часть 1 Часть 2 Часть 4

Обучение Swift и Xcode для дизайнера. Создание своего приложения на Swift

В прошлом году я писал Главу 3 под Objective-C и Xcode 5. С тех пор многое кардинально изменилось. Код Swift существенно упростился, из-за чего он стал одним из самых популярных языков для разработки приложений. Xcode 6 представил ряд новых инструментов, включая Playground, Vector Assets и Designable Views. Кроме того, Адаптивные макеты стали невероятно востребованы в связи с выходом iPhone 6 и 6 Plus. Часть 2 Часть 3 Часть 4

Анимация интерфейсов. Микровзаимодействия для макрорезультата

Микровзаимодействие – один из ключевых моментов в UI/UX-дизайне. Это, наверное, лучшее доказательство того, что внимание к мелким деталям может дать большой и мощный результат.