Framer — 2learn

Что это такое

Framer — это инструмент дизайна, который публикует. Вы раскладываете экран, как в любом инструменте дизайна, а затем связываете взаимодействия и добавляете адаптивные раскладки и реальные (или реалистичные) данные. Публикуется всё это живой ссылкой. Результат ближе к продакшену, чем кликабельный прототип: он работает в браузере по настоящему адресу и на настоящих устройствах.

Почему это важно

На некоторые вопросы статичный прототип ответить не может: правильно ли ощущается переход на полной скорости, держится ли раскладка на настоящем телефоне, переживёт ли текст прокрутку мимо него. Framer отвечает на них потому, что артефакт здесь — страница, а не картинка страницы. Ещё так небольшая команда выпускает маркетинговую страницу или концепт-сайт без отдельной сборки, и это законное применение, пока заявлена цель артефакта.

Ключевые идеи

Беритесь за него, когда артефакт должен работать

Используйте его, когда проверяются тайминг, движение, адаптивность или реальное содержимое. Однако для структуры и формулировок статичный прототип быстрее и достаточен.

Вопрос, на который отвечает запуск Вопрос, на который отвечает картинка
правильно ли ощущается переход     логична ли последовательность
держится ли раскладка на 360px     верна ли иерархия
читается ли текст при прокрутке    верен ли тон

Публикуйте рано и делитесь ссылкой

Ценность в том, чтобы смотреть, как люди пользуются этим в своём браузере, а не на общем экране. Опубликуйте ссылку и наблюдайте реальное поведение.

Держите точность честной

Опубликованная страница читается как законченная, поэтому участники перестают сообщать о проблемах структуры и начинают сообщать об опечатках. Решите до сессии, нужен ли вам этот эффект глянца; если нет — прямо скажите, что здесь сыро.

Это прототип, а не спецификация

Опубликованный артефакт провоцирует предположение, что перед нами продукт. Запишите, что намеренно захардкожено — один товар, нет состояний ошибки, нет аутентификации, — и перепишите спецификацию по вайрфреймам.

Используйте его для одного экрана, а не для всего продукта

Опубликовать одно взаимодействие ради проверки вопроса — быстро. Пересобирать в нём приложение — проект с ценой поддержки и без выгоды для дизайна.

Практика

Опубликуйте одно взаимодействие

Возьмите переход, в котором сомневаетесь, опубликуйте его живой страницей, а затем откройте на телефоне и на ноутбуке.

Готово, когда: вы посмотрели, как кто-то пользуется ссылкой на своём устройстве, и можете сказать, читается ли взаимодействие правильно.

Проверьте адаптивность на реальном устройстве

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

Готово, когда: у вас есть список поломок и вы знаете, какие из них унаследует реальная сборка.

Частые ошибки

Сборка всего продукта — бремя поддержки без выгоды для дизайна; исправить: публикуйте один экран, который под вопросом.
Глянец подавляет находки — участники сообщают об опечатках вместо структуры; исправить: скажите, что намеренно сыро, или проверяйте структуру в другом месте.
Опубликованная страница как спецификация — захардкоженное содержимое становится случайными требованиями; исправить: запишите сокращения и перепишите спецификацию по вайрфреймам.
Пропуск проверки на реальном устройстве — раскладку видят только в окне дизайнера; исправить: откройте ссылку на физическом телефоне.
Обращение к нему раньше, чем решена структура — время уходит на публикацию экрана, который будет перерисован; исправить: сначала решите структуру статично.

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

Figma (программа для дизайна) (03-design-ux/12-figma) — прочтите сначала; этап рисования, который предшествует публикации.
Прототипирование (03-design-ux/40-prototyping) — выбор точности, включая случаи, когда код, который работает, — правильный выбор.
Adobe XD (03-design-ux/35-adobe-xd) — родственный инструмент для команд, уже живущих внутри Adobe.
Передача дизайна и спецификации (03-design-ux/42-design-handoff-specs) — то, чего опубликованный прототип всё ещё не говорит инженеру.