Топ-5 плагинов для Figma в 2022 году 💣

Здесь не будет банальных плагинов, вроде «как сделать текст по кругу», а только действительно актуальные плагины, которые сильно упростят работу 😉

1. Better font picker

Плагин помогает выбирать шрифты с предварительным просмотром.

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

▶️ Добавить плагин Better font picker

2. Batch styler

Batch Styler — отличное решение для ситуаций, когда есть много стилей текста, и вам нужно изменить шрифты этих стилей текста быстро и без лишних действий.

Неважно, сколько текстовых стилей или шрифтов вам нужно изменить, Batch Styler позаботится обо всем и сохранит все типы толщины шрифтов и другие стили.

▶️ Добавить плагин Batch styler

3. Autoflow

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

С этим инструментом легко проиллюстрировать связи между экранами и схемы переходов от страницы к странице.

▶️ Добавить плагин Autoflow

4. LilGrid

Плагин LilGrid стоит на страже порядка в вашем интерфейсе.

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

При этом, LilGrid не поменяет элементы дизайна, а только поможет их упорядочить на холсте.

▶️ Добавить плагин LilGrid

5. TinyImage

Плагин TinyImage Compressor позволяет экспортировать ваши файлы в Figma и сжать их размер без потери качества.

Плагин оптимизирует JPEG, а также PNG без фона, автоматически преобразует множественную загрузку в ZIP-папку.

Правда у плагина есть ограничение на сжатие 15 файлов бесплатно, после придётся приобрести лицензию, но многие дизайнеры отмечают, что плагин сжимает файлы на 90% лучше, чем встроенные инструменты Figma.

▶️ Добавить плагин TinyImage

#плагин_фигма

Метафоры в дизайне

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

Если говорить простым языком, визуальная метафора — это сравнение с помощью картинки.

Банальные примеры из интерфейсов соц.сетей и приложений:

✏️ — редактировать
⚙️ — настройки

Да, это и есть метафоры 😉

Зачем использовать метафоры в веб-дизайне?

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

Главный принцип метафоры — простая и сразу считывается.

Как научиться их придумывать?

Некоторые дизайнеры составляют ментальные карты, делают мудборды или нарабатывают какие-то собственные способы поиска метафор.

Решающую роль играют опыт и насмотренность: если тренироваться и изучать чужие работы, сравнения подбирать будет проще. Теория тут важна наравне с практикой.

Проверь свою насмотренность 👀 Какой вариант дизайна лучше?

Спасибо за ваши ответы 😉🙌

✅ Правильный вариант Б.
Равное расстояние сверху и снизу блока выглядит аккуратно

Кради как дизайнер или как пользоваться референсами💥

Референсы можно разделить на несколько видов:

— Копирование стиля.

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

— Анализ конкурентов.

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

— Пример структуры.

С помощью этого типа референсов можно почерпнуть какие-то фишки, характерные черты тех или иных предметов, художественные приемы и так далее.

Зачем нужны референсы, не проще ли придумать всё самому?

Подбор референсов не означает, что вы не должны придумывать свою идею.

Главная задача таких примеров в другом — они помогают синхронизировать ожидания заказчика с представлениями исполнителя.

Как собирать референсы?

1. Делать скриншоты
2. Сортировать по разделам, например так 👇

— Первый экран
— Продукты
— О компании
— Форма
— Меню
— Карта
— Таблицы
— Контент

3. Анализировать и адаптировать

Где искать?

pinterest.ru
behance.net
dribbble.com

А теперь главный вопрос: как отличить «вдохновился» от «сплагиатил»? Пишите в комментариях 👇

Привет! Рассказываем, что нового на Craftum появилось в апреле 😍👇

📌 Новый блок в категории «Фото и видео»

По вашим просьбам добавили блок с изображением на весь экран. Найдите его в категории «Фото и видео» под названием media-14.
Поставить лайк

📌 Загружайте видео не только с YouTube

Добавили возможность вставлять на сайт видео, размещенные на Rutube, Vimeo и Яндекс.Дзене.
Подробнее

📌 Новые иконки соцсетей

Разнообразили выбор иконок соцсетей. Можно красиво разместить ссылки на свои аккаунты в Discord, YouTube, Behance и других сервисах.
Подробнее

📌 Новые шаблоны для ваших сайтов

Пополнили коллекцию шаблонов. Теперь при создании нового сайта или страницы вы можете выбрать шаблон из категорий «Универсальные» и «Онлайн-магазин».
Подробнее

📌 Craftum Workshop: сделали сайт в прямом эфире

Создавали сайт сети пекарен вместе с 400 зрителями! По секрету: готовимся к следующему вебинару. Скоро расскажем 😉
Смотреть запись

📌 Настройка заголовков в дизайн-блоке

Теги h1-h3 помогают улучшить позиции сайта в поиске. Теперь их можно настроить не только в стандартных блоках, но и в дизайн-блоке.
Подробнее

📌«Мы больше так не зумим»: о красивых видеоблоках

Улучшили отображение видео на десктопных и мобильных устройствах.

А еще теперь можно перемотать ролик до нужного момента, поменять скорость воспроизведения и применить другие настройки.
Подробнее

📌 Каталог дизайнеров

Запустили специальный раздел на площадке Комьюнити.

Теперь можно не только самому создать сайт на Craftum, но и заказать готовый лендинг.

А если хотите быть в списке партнеров, напишите в телеграм Лёше, нашему менеджеру по работе с партнерами.

И это ещё не всё!
Bugs Fixed ✅ Релиз 27.04

— Исправили ошибку, когда при переходе на несуществующую страницу сайта отдавался код ответа 200. Яндекс.Вебмастер больше не ругается.

— В дизайн-блоке теперь можно выбрать тип масштабирования «Фон деформируется» для элемента «Объект». Можно растянуть или ужать изображение по вертикали / горизонтали.

— Починили настройки выравнивания в дизайн-блоке 🌝