10 лучших дизайн-плагинов для Google Chrome

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

Вы наверняка слышали про один из самых крупных программных продуктов для данного браузера — встроенные инструменты разработчика Chrome Devtools, однако вместе с тем можно найти десятки и сотни более мелких, но весьма полезных приложений. Именно о них и пойдет речь в сегодняшней статье — рассмотрим 10тку расширений и плагинов для Google Chrome. Пост является переводом этой заметки.

Window Resizer

Расширение Window Resizer изменяет размер окна браузера, имитируя десктопные, планшетные и мобильные экраны. Это особенно полезно для веб-дизайнеров и разработчиков, работающих за крупными мониторами, когда дело доходит до тестирования адаптивных версий сайта.

Для того чтобы начать пользоваться приложением, просто установите его, кликните на иконку окна в правом верхнем углу, выберите нужное разрешение — браузер адаптируется под заданное значение. Это быстрее чем использовать отдельные веб-сервисы.

Window Resizer

Window Resizer

Loom

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

Чтобы начать использовать модуль, установите его и нажмите «Запись». После того, как вы закончите, сможете поделиться своим видео с коллегами или заказчиками, а потом получить данные о том, кто его просмотрел.

Loom

Loom

Toybox

Одна из неотъемлемых обязанностей веб-дизайнера – работа над правками и ошибками. Для того чтобы быстро коммуницировать с клиентом по данному вопросу, советуем воспользоваться плагином Toybox. Он позволяет просматривать CSS-стили на веб-странице и оставлять отзывы/задания по тем или иным объектам на ней. Лучше понять суть происходящего поможет видео, расположенное под описанием ниже.

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

Muzli

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

Muzli

Muzli

SVG Grabber

Задача, в принципе, не самая распространенная, но все же иногда попадается — если вам нужно выгрузить логотип или иконки с сайта, то расширение SVG Grabber предназначено как раз для этого. После инсталяции плагина, заходите на интересующий вас веб-ресурс и нажимаете всего одну кнопку — в результате все SVG-файлы будут автоматически извлечены. В дальнейшем при необходимости можете быстро скачать себе некоторые из них. Держать SVG Grabber постоянно включенным нет смысла, но сохранить его не помешает.

SVG Grabber

SVG Grabber

Page Ruler

Иногда веб-дизайнеру приходится измерять размер объектов на сайте. На глаз этого, конечно, сделать не получится, а привлекая для этого процесса Фотошоп, можете потерять несколько драгоценных минут. Есть куда более простое решение для таких ситуаций — плагин Page Ruler, который сократит время измерения до пары секунд.

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

Page Ruler

Page Ruler

Dark Mode Dev Tools

Хоть Dark mode (ночная тема) и не является расширением, она по-прежнему остается полезным инструментом для веб-разработчиков. Чтобы переключиться на ночной режим нужно зайти в DevTools, затем нажать на иконку с тремя точками, после чего перейти в настройки и выбрать в разделе Appearance Dark Mode. Там же имеется возможность сменить режим обратно на дневной (Light mode). Это послужит хорошей разрядкой для глаз, особенно когда работаете по ночам.

Dark Mode Dev Tools

Dark Mode Dev Tools

ColorZilla

Многие веб-дизайнеры применяют традиционные методы поиска нужного цвета, что занимает немало времени. Использование ColorZilla нацелено на экономию ваших усилий и упрощение работы. Просто скачайте плагин, кликните на пипетку в правом верхнем углу браузера и наведите курсор на элемент с интересующим вас цветом. После этого приложение покажет RGB код цвета, который можно будет скопировать в буфер обмена. Есть там и другие фишки, но они особо не используются.

ColorZilla

ColorZilla

Fontface Ninja

Fontface Ninja — это удобное расширение для быстрого распознавания шрифтов онлайн. Просто установите его, кликните на значок ниндзя в правом верхнем углу и наведите курсор на интересующий вас объект. При наведении модуль показывает название веб-шрифта, его размер и начертание. Вы также можете кликнуть на шрифт и перейти на страницу, где его реально скачать или купить.

Fontface Ninja

Fontface Ninja

Custom Cursor

Он предназначен не только для дизайнеров, да и полноценным рабочим инструментом его не назвать. С помощью плагина Custom Cursor разрешается изменять стандартный курсор мыши, задав ему форму и цвет из предложенного списка. Допускается загрузка своего варианта. Решение выглядит очень свежо и прикольно.

Custom Cursor

Custom Cursor

Было бы неплохо, если бы в комментариях вы рассказали о своих любимых расширениях в Хроме. Как дополнение к статье советуем просмотреть старую заметку про расширения Chrome для разработки но т.к. она была опубликована достаточно давно, не уверены, что все из них еще актуальны. Дополняйте данный пост своими подсказками в комментах ниже.