8 лучших расширений Google Chrome для дизайнеров
Нужны ли вам инструменты для предварительного просмотра шрифтов или управления рабочими процессами, вы найдете лучшие расширения Google Chrome для дизайнеров в этом полном руководстве. Эти плагины идеально подходят как для серьезных любителей, так и для профессионалов.
Содержание
- Figma
- Adobe Express
- Google Font Previewer
- HTML to Design
- ColorZilla
- Miro Chrome Search Extension
- Designer Tools
- PerfectPixel
1. Figma
Цена: Бесплатно с премиум-опциями
Figma популярна как среди UX-дизайнеров, так и среди графических дизайнеров, а ее расширение для Chrome помогает лучше настраивать события, которые вы создаете в Google Календаре.
Вы можете напрямую делиться своими досками FigJam, используя расширение Figma для Chrome. Эта функция может быть использована для проведения презентации или добавления дополнительного контекста перед встречей.
Расширение Figma для Chrome также позволяет добавлять любые ваши файлы Figma в событие Google Календаря. Кроме добавления существующих файлов, вы также можете создавать новые и доски FigJam через ваш календарь. Более того, плагин работает как быстрый переход на сайт Figma.
2. Adobe Express
Цена: Бесплатно с премиум-опциями
Хотя я все еще рекомендую использовать более продвинутые инструменты, такие как Adobe InDesign и Adobe Illustrator, для сложных дизайнов, Adobe Express отлично подходит для базовых прототипов и публикаций в социальных сетях. Вы можете быстро обрезать и изменять размер изображений, а также удалять фоны.
Расширение Adobe Express для Chrome позволяет вам быстро создавать новые дизайны, не переходя на сайт. После нажатия на Создать у вас будет доступ к полной библиотеке.
При использовании этого расширения вы также можете конвертировать изображения с вашего компьютера или жесткого диска в PNG или JPEG. Однако оно не работает для сохранения и конвертации файлов WEBP в JPEG.
3. Google Font Previewer
Цена: Бесплатно
Понимание того, как шрифты работают вместе, является одним из самых важных аспектов дизайна, но иногда сложно понять, как они будут выглядеть. Google Font Previewer позволяет вам предварительно просмотреть, как страницы будут выглядеть с применением различных шрифтов.
Чтобы выбрать шрифты, которые вы хотите добавить, вы найдете исчерпывающий список с правой стороны. Вы также можете выбрать, хотите ли вы использовать нелатинские символы, такие как арабские и корейские.
Посмотрите, как ваши шрифты взаимодействуют с различными частями страницы, изменяя регистр букв. Более того, вы можете выбрать между обычным и жирным шрифтом. Как только вы узнаете, на какие шрифты хотите изменить, не стесняйтесь настраивать их в теме WordPress или конструкторе сайтов, который вы используете.
4. HTML to Design
Цена: Бесплатно с премиум-опциями
Вам нужен плагин Figma, чтобы использовать HTML to Design, но это очень мощное расширение для Chrome для дизайнеров, как только вы установили оба. Вы можете превращать страницы Chrome, которые вы просматриваете, в дизайны Figma.
HTML to Design позволяет вам настраивать ширину вашего дизайна. Я рекомендую начать с ширины браузера, если вы разрабатываете веб-страницу, но вы всегда можете выбрать мобильный вариант, если создаете приложение или мобильную страницу.
Плагин HTML to Design позволяет вам выбрать всю страницу или конкретную ее часть и светлый или темный режим.
5. ColorZilla
Цена: Бесплатно
Знание точных RGB-значений является одной из самых больших проблем, но расширение ColorZilla для Chrome упрощает эту задачу для дизайнеров. Плагин показывает вам точные значения, необходимые для любого цвета на вашей веб-странице, будь то логотип, фото или что-то еще.
Кроме выбора цвета с конкретной веб-страницы, ColorZilla также позволяет вам выбрать один из вне вашего браузера. Плагин также сохраняет историю ваших выборов, что означает, что вы можете ссылаться на нее, когда захотите.
Этот выбор цвета также имеет браузер палитры, который позволяет вам видеть RGB-значения для часто используемых цветов.
6. Miro Chrome Search Extension
Цена: Бесплатно с премиум-опциями
Если вы хотите быстро получить доступ к вашим проектам Miro, подумайте о загрузке расширения поиска Miro для Chrome. После интеграции этого плагина вы можете искать все ваши документы прямо из адресной строки Chrome.
Чтобы найти ваши результаты, введите “miro”, за которым следует имя вашего файла. Вы заметите, что URL изменится на Miro Search.
После нажатия Enter вы будете перенаправлены на вашу панель управления Miro.
7. Designer Tools
Цена: Бесплатно с премиум-опциями
Designer Tools - отличное расширение для Chrome, позволяющее вам изучать размеры при проектировании ваших приложений и веб-сайтов. Узнайте, сколько пикселей составляет каждый аспект сайта, который вы посещаете, например текстовые поля и визуальные элементы.
Вы также можете сравнивать пиксели для разных секций, щелкнув по одной и наведя курсор на следующую, которую вы хотите измерить.
Designer Tools позволяет вам сохранять аспекты и добавлять сетки, чтобы помочь вам получить более точные измерения. Также узнайте о масштабировании пикселей, чтобы максимально эффективно использовать этот инструмент.
8. PerfectPixel
Цена: Бесплатно с премиум-опциями
PerfectPixel позволяет вам добавлять несколько слоев, загружая визуальные активы с вашего компьютера. Вы также можете копировать и вставлять из вашего буфера обмена. Если вы хотите завершить свой проект позже, легко сохранить ваш прогресс.
Чтобы избежать путаницы, добавьте разные макеты для каждого веб-сайта. Вы также можете перетаскивать загруженные слои точно туда, где хотите, чтобы они появлялись.
PerfectPixel позволяет вам размещать элементы слева, по центру или справа одним щелчком. Вы также найдете несколько ярлыков для оптимизации вашего рабочего процесса.
Нужны ли вам конкретные цвета или вы хотите создать новые элементы на веб-странице, лучшие расширения Chrome для дизайнеров могут помочь вам. Вы также найдете множество инструментов для более эффективного поиска программного обеспечения. Вы можете рассмотреть возможность комбинирования их с расширениями Chrome, которые улучшают ваш опыт поиска для еще большей продуктивности.
Кредит изображения: DALL-E. Все скриншоты сделаны Дэнни Майоркой.
