Делимся расширениями браузера для дизайнеров

Всем привет. Давайте соберём тему с расширениями для Chrome, Opera и других браузеров, которые будут полезны дизайнеру.

Расширения, которые использую я:
SVG Grabber - экспортит все svg файлы с сайтов.

HTML to Figma - генерирует дизайн сайта в проект Figma.

image

What the Font - помогает узнать название шрифта на сайте.

image

7 симпатий

Чтобы узнать какой шрифт, я использую WhatFont

unnamed (2)

Еще использую криншотелку всей страницы сайта Full Page Screen Capture

unnamed (3)

2 симпатии

Open in Figma
Давно уже пользуюсь расширением для Хрома, которое открывает все ссылки Фигма не в браузере, а в десктопном приложении. Очень удобно.
Screenshot_3

7 симпатий

Стартовая страница со свежайшими кейсами, статьями, трендами про дизайн со всего инета. Годнота да и только :wink:

3 симпатии

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

5 симпатий

Будет полезно больше для продуктовых дизайнеров.
Позволяет увидеть посещаемость сайта, уровень вовлеченности, рейтинг трафика, рейтинг ключевых слов и источник трафика

3 симпатии

https://www.manifest.app/ - позволяет делать короткие записи прямо в браузере, минималистичный дизайн.

Fonts Ninja
Показывает какие шрифты использованы на сайте. Очень удобно, наводишь мышку на любой текст и он показывает какой шрифт там использован. Не нужно лезть в код и искать там.

6 симпатий

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


Screenshot_2

7 симпатий

PerfectPixel Использую для сверки макета с вёрсткой, оч удобно)

6 симпатий

Затестил, зашло!

Window Resizer Быстренько посмотреть сайт в разных разрешениях экрана.

EditThisCookie


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

Известный Bitly


Удобно резать линки на проекты в фигме при пересылке коллегам, документации и тд. Или вставлять туда, где неудобен гиперлинк =)

Pocket


Мой ТОП1 полезностей в хроме - компаньон приложения для смартфонов, в который удобно в 1 клик скидывать все внезапно найденные на протяжении дня статьи в интернете, которые сейчас нет времени прочитать, но потерять не хочется.

Dashlane


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

Всем вышенаписавшим большое спасибо. Крутой тред

3 симпатии

https://nimbusweb.me/ru/screenshot.php
Очень классное расширение - делает скриншот + прокрутка, записывает видео.

6 симпатий

Dimensions
Помогает замерять расстояние между элементами на сайте, иногда бывает полезным

7 симпатий

Альтернатива режиму разработчика, можно править - размеры, позиции, шрифты. Смотреть стили, цвета и те же шрифты.

Альтернатива - https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk

Позволяет быстро менять размер окна

1 симпатия


1 симпатия

Постоянно использую Random User Agent — расширение, которое по настраиваемому алгоритму заменяет инфу о вас из user-agent: браузер, размер экрана, операционную систему и т.д.!

Тут развернутая статья на habr о том как и что он делает.

3 симпатии

Эта штука не особо нужна, так как в самой фигме есть эта опция. Можно просто ведь настроить горячие клавиши у себя на компе и не устанавливать доп.плагинов для этого. :woman_shrugging:t2:

1 симпатия

Лучший инструмент для измерения расстояний между элементами на веб-страницах.

1 симпатия