Это серия обзоров на плагины для редактора Figma, главного инструмента web-дизайнера. Плагины дополняют функционал редактора, а в последнее время их стало неприлично много, я же пытаюсь обозреть хотя бы часть их них.

VisualEyes – просто чумовой плагин, этакий карманный веб-визор, который позволяет на этапе проектирования и дизайна понять, что именно видят пользователи на странице в первую очередь, ну и соответсвенно произвести нужные корректировки в макете.

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

Есть конечно одна печальная деталь, он платный.

Пять проверок в месяц – бесплатно, потом отдыхай. За денежку он может делать 100 тестов в месяц по 35 рублей за тест. Аналогов все равно нет, яндекс веб-визор хочет готовый сайт, и ему сперва нужно собрать статистику, а тут бац и то же самое, еще на этапе дизайна.

Короче плагин мастхэв большим и крупным продуктам и он все равно дешевле, чем яндекс-взгляд, где цена за юзер-тестирование начинается от 1000р. или забугорный userzoom который вообще влетит в копеечку, да и делают они все равно немного разное.

Предыдущие обзоры:

Themer – плагин для свапа между темами дизайна (светлая/темная)

Angle Mockups – плагин позволяет повернуть макет под нужным углом в перспективе.

Ставь плюс, подписывайся!

Кто-то должен был это сделать. В главном инструменте современного web-дизайнера, не так уж  давно появились плагины и тут же расплодились в совершенно невероятном количества. Хотелось бы запилить подборку с обзорами самых интересных и нужных.

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

Themer – плагин позволяет вам создать и менять темы из ваших опубликованных стилей в библиотеке. Если по простому вы сможете менять дизайн со светлой темы на темную в один клик.

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

Шаг 1.

Создайте две палитры для светлой темы и темной. Обычно это делается в двух разных файлах. Важно! Названия цветов которые должны взаимозаменяться должны быть одинаковыми.

Шаг 2.

Вам нужно пройти и зарегистрироваться на сайте https://jsonbin.io/


Благо там ничего особенного не нужно, можно авторизоваться через любую соцсеть, тот же аккаунт гугл подойдёт. 

Нам с этого сайта нужна API-ключ, чтоб плагин заработал. Он генерируется автоматически. Как найти ключ вы видите на картинке ниже.

Если совсем лень, вот вам мой, который используется, как пример в данном посте.
$2b$10$Ahm5DVrFsprWGG3YJ3sLQOgeSokwBKKMKrPAxqI.BYDO3UMIOXBr6

(будем надеяться он будет работать)

Шаг 3.

Всё, идём в сам плагин. 

В файле с одной из созданных палитр запустите плагин (предварительно найдя его в community и установив естественно)
.

В нем нам во вкладке Admin нужно сперва вставить наш API Key.
На вторую строку не обращайте внимания, она будет пустая, но после первого сохранения ссылка сама прорастёт в поле и зачем она нужна информация для нас бесполезная.

Теперь нам нужно добавить палитры. Сперва в файле с первой палитрой, нажимаем "Create a theme", пишем название нашей темы и сохраняем. Проделываем то же самое, во втором файле со второй палитрой. По итогу получаем две темы, которые можно использовать.

Шаг 4.

Для того что бы применить плагин выделите Frame со своим дизайном выполненный палитрой из какой то одной темы. Запустите плагин, выберите в нем тему на которую хотите переключить цвета, нажмите Apply. Если вы сделали всё НЕ верно - ничего не произойдёт, а если верно то все цвета заменятся и вы молодец!

Ставьте плюс, подписывайтесь.

Недавно ВКонтакте обновил раздел с видео и я не решался его посетить. Но сегодня, 18.11.2021, я решил зайти на него и заметил, что задумка интересная. Но ВК создала только витрину, но не сделала ничего полезного для пользователя. ВКонтакте, не выдает практически никакой информации о фильме, его скриншоты, а также отзывы.

Ужасно, не так ли. Если вы запускаете свою видеоплатформу, то делайте качественее.

Спустя некоторое после ознакомления с сервисом, я задумал, хмм. Если нарисовать интерфейс "карточки" фильма в фигме. И я нарисовал.

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

Вот здесь я решил, что лучше нахождению трейлеру на фоне, чтобы не искать его внутри сайта, также здесь находится "плакат" (так как я не помню название) фильма, и с кнопкой начала просмотра. В правом верхнем углу должна находится блок с возрастным ограничением, но при экспорте, я не указал его импорт.

Дальше соответсвенно идут блоки с полезной информации о фильме.

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

Вообщем, я знаю недочеты в своем дизайне, что многие элементы не соответсвуют VK UI, а также шрифт я не импортировал. Но я считаю, так должна выглядеть страница просмотра фильма, а не как сейчас, нажал и открывается проигрыватель, к скорому времени я нарисую плеер и добавлю в свой проект в фигме.

https://www.figma.com/file/A4v2sHXJaH1ogSpmrkWdtW/VK-Видео_Страница-фильма?node-id=1:2

Спасибо за чтение) И я надеюсь, что ВК заметит этот пост