В этом тексте мы расскажем, как быстро добавить на макет тепловую карту, заполнить его предварительным контентом и подготовить к передаче в разработку.
В Figma удобно проектировать интерфейсы, однако в ней отсутствуют некоторые необходимые функции. Например, невозможно быстро проверить, как люди с дальтонизмом видят цвета вашего интерфейса. В этом помогут плагины, расширяющие функционал графического редактора.
Рассмотрим, какие плагины для Figma могут помочь в проектировании интерфейса приложения.
Тепловая карта внимания пользователей
Attention Insight
Если вам нужно добавить баннер о рекламной акции или новой функции, важно, чтобы он был заметен пользователям. Проверка этого на реальных людях может занять много времени и средств.
Плагин Attention Insight создаёт "тепловую карту", показывающую, на какой части макета будет сосредоточено внимание пользователя.
Как пользоваться:
1. Скачайте плагин по ссылке.
2. Зарегистрируйтесь на сайте разработчика.
3. В Figma выделите фрейм, для которого хотите проверить фокусировку внимания.
4. Нажмите правой кнопкой мыши на выделенный фрейм, выберите Plugins и Attention Insight.
5. При первом использовании авторизуйтесь. Плагин автоматически создаст тепловую карту. Для сохранения карты нажмите Add HEATMAP to frame.
Этот плагин не бесплатный. Он предоставляет 20 проверок на 14 дней, дальнейшее использование стоит 23 доллара в месяц.
Интерфейс для людей с дальтонизмом
Able
Чтобы проверить доступность вашего интерфейса для людей с дальтонизмом, воспользуйтесь плагином Able. Он помогает понять, как приложение выглядит для людей, не видящих красный, синий и другие цвета.
Как пользоваться:
- В Figma нажмите правой кнопкой мыши на макет, выберите Plugins и Able.
- Выделите текст и фон.
- В окне плагина в пункте Preview выберите Normal vision и выберите вид дальтонизма из выпадающего списка. В превью под списком вы увидите, как выбранные цвета выглядят для людей с этой особенностью.
- Плагин также показывает уровень контраста цветов, который должен соответствовать стандартам WCAG 2.0 (не менее 7,1).
Подпишите размеры элементов при передачи дизайна в верстку
Redlines
Вы наверняка сталкивались с ситуацией, когда после передачи красивого макета в разработку получаете результат с неправильными размерами кнопок, отступами и полями. Избежать этого поможет плагин Redlines, который быстро подпишет размеры всех элементов.
Как пользоваться:
- В Figma нажмите правой кнопкой мыши на макет, выберите Plugins и Redlines.
- На макете выберите элемент интерфейса, который нужно измерить. В окне плагина выберите место для подписи — слева, справа, снизу или сверху.
- Если стандартный цвет подписи не заметен, его можно изменить в окне плагина. Также с помощью плагина можно указать связанные элементы.
Быстро наполнить макет любыми данными
Content Reel
Пустой макет сложно оценить, так как непонятно, что будет, если в базу данных попадёт длинный отзыв, имя или адрес. Lorem ipsum может помочь, но интерфейс всё равно будет выглядеть фальшиво. Плагин Content Reel предлагает решение.
Как пользоваться:
- В Figma нажмите правой кнопкой мыши на макет, выберите Plugins и Content Reel.
- Выделите поля, в которые нужно добавить предварительный контент — это могут быть фигуры, текстовые блоки или фреймы.
- В окне плагина выберите тип контента для заполнения выделенных полей.
С помощью этих плагинов вы сможете значительно упростить и улучшить процесс проектирования интерфейсов в Figma.
Хотите стать экспертом в создании сайтов?
Присоединяйтесь к нашему онлайн-курсу "Дизайнер сайтов на Тильде" и раскройте свой потенциал. Узнайте больше и зарегистрируйтесь по ссылке.
В этой статье собрали подборку макетов для бесплатного использования https://dzen.ru/a/ZkJD4Z9mnDDDASOt
А здесь собрали для вас отличную подборку бесплатных 3D персонажей, которые идеально подойдут для использования в дизайне на платформе Figma https://dzen.ru/a/ZkJpRgehvQnTPhi5
В этой статье мы рассказали о том, как выбрать идеальный шрифт для вашего дизайна https://dzen.ru/a/ZkISCZWqITLyNX09