Figma Dev Mode стал платным. Что делать? Плагин Inspect Styles
В этом видео рассказываю о плагине Inspect Styles, который начал разрабатывать еще в самом начале существования Dev Mode. Показываю, почему это лучшее решение из имеющихся.
Содержание:
00:00 - Интро
00:35 - Иные решения (inspect в Figma или Pixso)
04:14 - Как установить плагин
05:37 - Вкладка "основное"
08:07 - Вкладка "стили"
09:45 - Вкладка "настройки"
13:23 - Ресайз плагина
14:00 - Вывод SVG-кода
14:40 - Аутро
Inspect Styles - www.figma.com/community/plugi...
Доп. контент и поддержка канала:
❤️ boosty.to/maxgraph
❤️ www.donationalerts.com/r/maxd...
Полезные ссылки:
🤌 Макеты для верстки: verstaem.online/projects/
🤌 Задачки по верстке с решениями: verstaem.online/tasks/
🤌 Курс по верстке html-писем: verstaem.online/courses/html-...
🤌 Канал с полезностями в телеграм: t.me/maxgraph
🤌 Чат для верстальщиков: t.me/maxgraph_chat
🤙 ВК Видео: video/@maxgraph
👋 Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет
Подписывайся: www.youtube.com/@maxgraph?sub...
#верстка #devmode #inspectstyles
Пікірлер: 179
Поздравляю, твой плагин стал очень популярным после отключения dev-мода.
Выглядит удобнее чем был dev режим, особенно классно, что эта панель открывается отдельно и не нужно постоянно переключаться между панелью дизайнера и разработчика, супер!
@maxgraph
4 ай бұрын
Да, для меня прям самое удобное)))
@user-rh7ww9wd9b
3 ай бұрын
Здраствуй можете пожалуста ответить ато немогу никак разобраться. Мне будетъ достаточно если я буду иметь index страницу и фацлы CSS чтобы его выгрузить на хостинг я хочу одностраничный сайт этих файлов достаточно чтобы он работал. Немогу найти инфу вечно выбивает как выгрузить на хостинг а я хочу знать из чего должен состоять сайт.
Было бы ещё удобно, чтобы на вкладке Основное показывались все цвета, которые встречаются в макете и сколько раз они используются - т.е. так же как и шрифты, а в остальном очень удобный плагин, спасибо за разработку
Кайф. Было бы круто, если в разделе "Шрифты в макете" можно было тыкать по названиям шрифта и он бы подсвечивал или там выделял блоки, где используется данный шрифт на макете.
То что нужно! Спасибо👍
Это даже удобнее, чем оригинальный дев мод фигмы. Респект!
Спасибо!) Очень круто)
Спасибо, Макс! Давненько не верстала, полезла в фигму, а тут сурпрайз такой. Плагин Inspect Styles, figma dev mode
Спасибо большое за Ваше видео, очень помогло!!😁
Огромное спасибо за твой труд! 🤟
Максим, большое спасибо за плагин! Мир не без добрых людей) удачи тебе!
Огромное спасибо!!!
Спасибо за разработку хорошего и полезного плагина😊
Классная штука! Спасибо ! 🤝
Крутотень крутецкая! Спасибо!
Жииивёём) Пасиба!
Огромная благодарность за такой плагин, можно спокойно выдёргивать стили теперь😉
Спасибо, очень полезно!
Спасибо тебе мил человек! Дай Бог тебе здоровья! 🤝
Автор красава, по больше бы таких, просто для людей сделал доброе дело
Спасибо Макс !
Большое спасибо!)
Макс, спасибо за крутой плагин! Было бы прикольно видеть не только цифры и буквы цвета, а так же его цвет в квадратике))
Большое спасибо за плагин, он действительно крут и полезен!!!
Большое спасибо
Спасибо Максим за этот прекрасный плагин 🤝 обязательно задоначу тебе на развитие )
Плагин очень крутой! Благодарю)
большое спасибо за такой плагин ❤
Благодарю!
Спасибо, это очень круто! Пиксо тоже пробовал, но дизайнер уличил её в пропуске некоторых стилей, сам тоже проверял точно не помню уже действительно ли это так. Рисковать в общем не стал, так как время дороже. Вообще, даже уже думал дев купить, он сколько вроде 3к стоит, но попробую сначала ваш плагин)
Спасибо за плагин! Очень хорошая вещь
Благодарю. 👍
Ты крут!!!! Спасибо!
Да, спасибо Макс, за полезный плагин.
боже, храни Максима! 💋💋💋
легенда! спаситель!
Спасибо!
Плагин на самом деле крутой. Для меня только есть 2 момента не сильно удобных. Имею ввиду не со стороны плагина, а в целом этой истории с платной фигмой и переходом на плагин. 1) в dev-моде было удобно работать с блочной моделью. Там все удобно выделялось и было удобно работать с margin\padding. А тут в режиме дизайна иногда очень сложно выделять элементы. И + постоянно вылазит окно не найденных шрифтов. Ставить все шрифты мира на ПК не хочется, а окно бесит :) 2) Жалко плагины та идут как отдельные окна, и нельзя сделать как вкладку там где "properties" И чисто как доп (возможно я просто чего-то не знаю): в dev-моде была отдельная вкладка где можно было изображение в браузере открыть и скачать оригинал. А сейчас в обычном режиме вообще не ясно как это сделать. А если фото вообще вставлена дизайнером как фон - то вообще нету возможности открыть оригинальное фото.
thanks =)
Спасибо
как же ты крут
Спасибо за плагин, классное решение. Очень надеюсь что плагин будет развиваться и поддерживаться
@maxgraph
3 ай бұрын
И так поддерживается) а что развивать - предлагайте, сейчас он свою задачу уже выполняет
Спасибо за видео и хороший плагин! Сейчас пробовала его на простом макете и более сложном и у меня в шрифтах не отображался очень часто line-height и еще была бы иконка на панели, чтобы сразу его включать (это для ленивых)
@maxgraph
4 ай бұрын
line-height не будет отображаться, если дизайнер его не задал. Все логично :) Ну а иконку на панели я никак уж не сделаю))
@PirBogov
4 ай бұрын
@@maxgraph а я про дизайнера и не подумала))а как в таких случаях быть. Самому высчитывать?
@maxgraph
4 ай бұрын
Нет, оставить как есть) браузерное значение А лучше дизайнера заставлять указывать его :)
@PirBogov
4 ай бұрын
@@maxgraph Спасибо, а то я уже была готова идти копать информацию))
Здравствуйте Максим! Такой вопрос можно ли как-то в плагине реализовать когда в дизайне line-height auto, то чтобы этот line-height показывался в пикселях и чтобы он просто показывался?
@maxgraph
4 ай бұрын
Когда в фигме стоит auto - это значит что дизайнер не установил значение. Потому плагин и не выдаёт "ничего")
супер спасибо отличная замена
Спасибо, очень круто! На первой версии плагина у меня иногда была проблема с большими макетами (где много всякого лишнего), плагин переставал работать, типа "зависал" что ли. Но тут скорее мой слабый компьютер больше виноват, я думаю.
@maxgraph
4 ай бұрын
Просто делите макеты по папкам, и не будет проблемы
Твой плагин посто имба! А главное что вовремя. Но не думаешь что фигма может его заблочить за его прекрасность?
@maxgraph
4 ай бұрын
Не, не будут они ничего блочить) Ну а если будут - его же можно локально раздать и поставить только у себя на компе :)
бомба
Спасибо очень удобный плагин, но есть ли возможность вытаскивать mix-blend-mode стили? просто потестировал и не нашёл
@maxgraph
4 ай бұрын
Здравствуйте. Это в работе, в течении недели постараюсь добавить
мод хороший информативный, за это огромная благодарность, даже от такого "специалиста" как я))) особенно в эпоху когда все становится платным. Ну и спасибо за новую платформу где можно некоторые особенности проектов увидеть, например такие как отступы, собственно наверное только отступы и не видны в вашем моде, будем теперь пользоваться двумя проектами))) Если я конечно ничего не проглядел и есть возможно по прежнему пользоваться только одной фигмой
@maxgraph
4 ай бұрын
Зажимаете альт и смотрите отступы в фигме, ничего не нужно))
@bearloga9809
4 ай бұрын
@@maxgraph мда, сколько в мире всего неопознанного, особенно для меня. Мод просто идеальный, исправляю оценку)))) Скажите а у вас есть видео о адаптивности для супер чайников?)) просто я на этом сейчас застрял сильно
@maxgraph
4 ай бұрын
Есть плей лист на эту тему, посмотрите)
@bearloga9809
4 ай бұрын
@@maxgraph отлично, еще раз спасибо
10:00 Проценты и дроби по разному наследуются. Если в процентах, то у всех потомков line-height будет зависеть от font-size родителя, а в дробях у каждого потомка line-heigh будет зависеть от своего font-size.
Спасибо за бесплатное решение.
Скажите, пожалуйста, а как можно теперь в Figma смотреть расстояния между элементами (для создания margin, padding и др.)?
@maxgraph
3 ай бұрын
С зажатой клавишей alt) на днях выпущу видео на эту тему
Есть макет с кейсом, когда шрифт не показывает font-size после копирования проекта. А в режиме чтения видно, что font-size есть. Куда написать подробнее?
@maxgraph
4 ай бұрын
В телеграм, в описании видео ссылка
Спасибо за плагин! Не подскажите, пожалуйста, почему у меня может тормозить плагин? К примеру, при переключениях с одного элемента на другой происходит задержка ~15сек прежде чем плагин сработает, в это время сама Figma не реагирует ни на что, кроме переключение вкладок Мой ПК: i5-9400F, RX580 8gb, 16gb RAM, SSD
@maxgraph
4 ай бұрын
Здравствуйте. Могу только проверить у себя Скиньте макет мне в личку (найдёте в описании), гляну
В pixso шрифты не все переносятся из фигмы , может указать другой шрифт , не тот что в макете фигмы
@user-nd6cs1kz9c
4 ай бұрын
И отступы между элементами жесто каряво показывает, там его фиксить и фиксить еще, будьте внимательны )
Привет, у меня в твоем плагине все переменные в формате sass: $, не css -- (так должно быть??), как их импортировать в другие файлы?
@maxgraph
3 ай бұрын
Привет, переключи настройку на css и будут обычные переменные)
@alex_python6251
3 ай бұрын
@@maxgraph екарный бабай, вот ведь знал же что не мог ты не сделать)) Но не увидел переключатель. Спасибо!
Осталось теперь плагин сделать платным :D
@maxgraph
4 ай бұрын
Нет уж)
Привет, когда хочу посмотреть градиенты стилей, всегда показывает вот это background: linear-gradient(180deg, ), url("path_to_image"); Можете помочь?
@maxgraph
Ай бұрын
Привет. Это была ошибка со стороны фигмы. Уже починили
@krabik2502
Ай бұрын
@@maxgraph да, работает
По pixso могу отметить, что некоторые элементы могут "уезжать", так же могут шрифты слетать. Юзаю данное приложение уже год как
@maxgraph
4 ай бұрын
Печально
так в твоём плагине нет вкладки с содержимым, что если мне нужно скопировать абзац текста из фигмы в вёрстку, что делать
@maxgraph
Ай бұрын
Конечно нет. Это можно сделать из фигмы, просто выделив слой и нажав ctrl c)
@netlight6603
Ай бұрын
@@maxgraph а да, ну попробую
Можно ли переименовывать переменные в Вашем плагине?
@maxgraph
2 ай бұрын
Нет. Он берет данные из фигмы, переименуйте в ней)
Классно, спасибо, а то pixso одно мучение
В dev моде можно было смотреть расстояние между объектами. Как это сделать сейчас?
@maxgraph
3 ай бұрын
Нажми на элемент, зажми альт, наведи на второй элемент)
@Brital1986
3 ай бұрын
@@maxgraph Спасибо большое. Разобрался.
Как то можно закрепить окошка плагина в право например как папки в виндовс?
@maxgraph
3 ай бұрын
Нет
а сделай, чтобы его можно было скачать как картинку, или невозможно?
@maxgraph
4 ай бұрын
"его" - это что?)
Плагин шикарный! Единственное, сильно не хватает кнопки "свернуть", чтобы все в одну полосу сворачивалось. Бывает так, что он мешает немного
@maxgraph
3 ай бұрын
В плагине есть ссылка на репозиторий по предложениям) напишите ишью пожалуйста, чтобы это не потерялось. Подумаю, как сделать подобную штуку)
Круто было бы добавить галочку на то чтобы "вписать" плагин как доп вкладку после "прототип", если такое возможно Если ничего не редактируешь, то на боковой панели хотелось бы видеть только плагин
@maxgraph
4 ай бұрын
Это невозможно сделать)
@SalfetKa27
4 ай бұрын
@@maxgraph:(
Почему-то line-height не выводится, если он установлен как "auto", хотя в devMode выводило в px. И было бы круто, если бы была галочка переключения на ReactStyle (border-radius -> borderRadius).
@maxgraph
4 ай бұрын
Значения auto не бывает. Это значит что line-height не задан, потому он и не выводится
@CzarOfScripts
4 ай бұрын
@@maxgraph но фигма же как-то считала его
@maxgraph
4 ай бұрын
Считала значение по умолчанию. А зачем его писать в плагине, если оно по умолчанию? Это недоработка дев мода
@maxgraph
4 ай бұрын
плюс ко всему, данные, которые есть у девмода, явно отличаются от тех, что хранятся в plugin api)
@CzarOfScripts
4 ай бұрын
@@maxgraph, хорошо, я понял (Я кстати не знал, что можно писать / и не указывать line-height). А что насчет "react style"? (хотя это скорее object style какой-то)
Твой плагин самый популярный среди блогиров. Как по мне не хватает ещё одной фичи, это отступ между блоками. т. е. когда dev Mode был бесплатным можно было увидеть отступы между элементами (блоками) при наведении на какой-то блок. А сейчас приходится пользоваться линиями и поленейки смотреть расстояние.
@maxgraph
4 ай бұрын
просто выберите нужный элемент, зажмите альт, а потом наведите на нужный) увидите отступ.
@user-gz4zl2zc4n
4 ай бұрын
@@maxgraph Максим, спасибо! Ещё отдельно хочу тебя поблагодарить за крутые уроки. Я уже два года смотрю твои ролики. Благодаря тебе я научился писать js и за прошлый год сдал больше 10 проектов. Спасибо ещё раз!
@maxgraph
4 ай бұрын
Круто) рад помочь))
Если рай существует, для таких там VIP Зал
Хммм, странно, вообще не заметил пропажи Dev мода, всегда все размеры снимал просто из данных справа, там всё есть)
Плагин конечно хорошо. Но расстояние между блоками теперь никак не посмотреть?
@maxgraph
4 ай бұрын
Их всегда смотрели через зажатый альт) ничего не поменялось
@deantek
4 ай бұрын
@@maxgraph неа, раньше просто мышку наводил и сразу было видно)
@maxgraph
4 ай бұрын
Дак я ж не про дев мод говорю, а просто про фигму.
😅 уже многие отрекламировали, самореклама излишняя 😂 А вот winter cms подожду... P.S. баг, который Анна показала, исправлен уже?
@maxgraph
4 ай бұрын
Так это не реклама. Обзор возможностей.
@SergiyPolar
4 ай бұрын
@@maxgraphтак я и клоню к тому, что реклама уже не нужна 😂
Цвет некорректно показывает в вашем плагине, показывает color: #fff; а в самом фигме FFFFFF и еще добавьте функцию измерения, чтобы можно было измерять в пикселях расстояния между объектами
@maxgraph
2 ай бұрын
Почему некорректно?) цвет тот же, просто сокращен. Измерение добавить нельзя, но оно и так работает в фигме) Зажимаете альт и смотрите расстояния)
@Islom_ackerman
2 ай бұрын
@@maxgraph аа понятно, да я знаю что надо зажимать альт, но в некоторых объектах на сайте не работает😖, не показывает расстояния
очень хороший плгин спасибо! есть некорректная работа в safari sonoma. mac mini m2. плагин запускается. выбираешь элемент. белый экран и снова перезагрузка проекта. итак по кругу
@maxgraph
2 ай бұрын
Привет! Это странно. По идее плагин никак от системы не зависит. А макет большой?
@Santos20004
2 ай бұрын
Не очень. И плагин открывается и работает и в хром и Arc. Просто привык к Safari)
@maxgraph
2 ай бұрын
А, значит везде работает кроме сафари? А в десктоп приложении?
@Santos20004
2 ай бұрын
А у меня его нет. )))
Спасибо. Только им и пользовался вместо девмода. На мой взгляд есть один минус это самый уродливый моноширинный шрифт. Почему именно этот шрифт используется?
@maxgraph
4 ай бұрын
Подключать сторонние шрифты туда нельзя, CORS-запреты летят и т.д. Поэтому по сути единственный адекватный шрифт) другие мне лично не зашли.
У меня версия плагина 3.0 как обновить до последней?
@maxgraph
3 ай бұрын
Он сам обновляется) всегда актуальная версия
@Igor-tigor
3 ай бұрын
@@maxgraphстранно но почему-то 3.0(
@maxgraph
3 ай бұрын
Я мог где-то цифру не обновить)) но версия точно актуальная
@Igor-tigor
3 ай бұрын
@@maxgraph выглядит по другом, новая по удобней
Делай обновы, и добавь чтобы когда уменьшаешь окно можно было увеличить шрифт
@maxgraph
4 ай бұрын
уменьшение сделано специально, с большим шрифтом будет некрасиво.
Плагины в веб-версии теперь не работают! У меня одного так?
@maxgraph
4 ай бұрын
Работают, если доступ к редактированию макета есть. Всегда так было)
Я лично уже перешёл на Pixso. Плагин конечно норм, но всё же это не так удобно как было раньше. А для тех кому принципиально нужна именно Figma наверное все же проще заплатить и работать со всеми удобствами которые есть в Figme.
@maxgraph
4 ай бұрын
Кому как) Но говорят Pixso тоже с багами при импорте фигмы
как экспортировать фоновую картинку теперь? Плагин не помог. Раньше это было можно сделать в devmode
@maxgraph
3 ай бұрын
Найти слой с ней и экспортировать его)
@via754
3 ай бұрын
@@maxgraph слой экспортируется вместе с текстом который идет поверх. А картинка сама ищет не слоем, а фоном к слою
@maxgraph
3 ай бұрын
Так можно же скрыть текст
@via754
3 ай бұрын
@@maxgraph текст это слой. Фоном которому идет картинка. Скрываешь текст - скрывается и картинка.
@via754
3 ай бұрын
@@maxgraph в общем-то в итоге я оформил студенческий аккаунт и вернул девмод на два года.без него ну никак эту картинку не скачать было
Подам идею автору, сделать возможность повлиять на синтаксис переменных, хочется иметь возможность получить $variable-name а не --variable-name и во всех стилях получать не property: var(--variable-name); а property: $variable-name;
@maxgraph
4 ай бұрын
добавление поддержки sass в планах, но не прям быстро)
главное чтоб фигма не прикрыла твой плагин😁
@maxgraph
4 ай бұрын
не прикроет)
Копирование svg - лично для меня вообще самое необходимое в плагине...
pixso, figma один в один, бесплатно, функций больше
Плагин топ. Но блин микро и обработка звука прям ухо режет. Давайте на микро скинемся
@maxgraph
4 ай бұрын
Микро отличный) обработки никакой нет, просто прибавлени звук. Возможно поэтому кажется, что качество не очень
@dmitryberko990
4 ай бұрын
@@maxgraph попробуй добавить обработку) + к качеству контента будет)
Баг, вылезший на канале Анны, уже исправлен? 😅
@amat0ru
4 ай бұрын
какой баг?
@maxgraph
4 ай бұрын
Про трансформ? Да, но тут скорее не баг плагина, а дизайн дурацкий))
@SergiyPolar
4 ай бұрын
@@maxgraph понял, принял
Я сделал проще, купил фигмму на 2 года за 3к рублей и доволен)
@maxgraph
4 ай бұрын
ну по мне дев мод неудобный постоянными переключениями (ибо я и в дизайн моде сижу правлю многие вещи), поэтому не вариант
@user-xt1ns1br7o
4 ай бұрын
@@maxgraph Попробовал этот плагин, очень долго думает, подвисает когда переключается по элементам (особенно текстам) и это не самый большой макет, может конечно фигма сегодня тормозит, но у меня вот так.
Плагин инспект, пиксо как варик
Макс, благодарю тебя за плагин. Он действительно получился классным, лучше чем их девмод.
Максим спасибо большое. А вот отступы между элементами, там все по прежнему?
@maxgraph
4 ай бұрын
просто выберите нужный элемент, зажмите альт, а потом наведите на нужный) увидите отступ. только так)
@asgard1428
4 ай бұрын
@@maxgraph 🤝
Огромное спасибо!
Спасибо Макс !
Благодарю!
Спасибо