Figma Dev Mode стал платным. Что делать? Плагин Inspect Styles
Вставка
- Опубліковано 24 чер 2024
- В этом видео рассказываю о плагине 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
Поздравляю, твой плагин стал очень популярным после отключения dev-мода.
Выглядит удобнее чем был dev режим, особенно классно, что эта панель открывается отдельно и не нужно постоянно переключаться между панелью дизайнера и разработчика, супер!
Да, для меня прям самое удобное)))
Здраствуй можете пожалуста ответить ато немогу никак разобраться.
Мне будетъ достаточно если я буду иметь index страницу и фацлы CSS чтобы его выгрузить на хостинг я хочу одностраничный сайт этих файлов достаточно чтобы он работал.
Немогу найти инфу вечно выбивает как выгрузить на хостинг а я хочу знать из чего должен состоять сайт.
Было бы ещё удобно, чтобы на вкладке Основное показывались все цвета, которые встречаются в макете и сколько раз они используются - т.е. так же как и шрифты, а в остальном очень удобный плагин, спасибо за разработку
То что нужно! Спасибо👍
Спасибо, Макс! Давненько не верстала, полезла в фигму, а тут сурпрайз такой. Плагин Inspect Styles, figma dev mode
Спасибо!) Очень круто)
Спасибо большое за Ваше видео, очень помогло!!😁
Максим, большое спасибо за плагин! Мир не без добрых людей) удачи тебе!
Огромное спасибо за твой труд! 🤟
Это даже удобнее, чем оригинальный дев мод фигмы. Респект!
Огромная благодарность за такой плагин, можно спокойно выдёргивать стили теперь😉
Спасибо за разработку хорошего и полезного плагина😊
Классная штука! Спасибо !
🤝
Жииивёём)
Пасиба!
Спасибо тебе мил человек! Дай Бог тебе здоровья! 🤝
Спасибо Максим за этот прекрасный плагин 🤝 обязательно задоначу тебе на развитие )
Большое спасибо за плагин, он действительно крут и полезен!!!
Автор красава, по больше бы таких, просто для людей сделал доброе дело
Огромное спасибо!
Крутотень крутецкая! Спасибо!
Спасибо, это очень круто! Пиксо тоже пробовал, но дизайнер уличил её в пропуске некоторых стилей, сам тоже проверял точно не помню уже действительно ли это так. Рисковать в общем не стал, так как время дороже. Вообще, даже уже думал дев купить, он сколько вроде 3к стоит, но попробую сначала ваш плагин)
Спасибо, очень полезно!
Спасибо Макс !
Большое спасибо!)
Большое спасибо
Макс, спасибо за крутой плагин! Было бы прикольно видеть не только цифры и буквы цвета, а так же его цвет в квадратике))
Спасибо за плагин! Очень хорошая вещь
большое спасибо за такой плагин ❤
Плагин очень крутой! Благодарю)
Благодарю. 👍
Благодарю!
Да, спасибо Макс, за полезный плагин.
Ты крут!!!! Спасибо!
Плагин на самом деле крутой. Для меня только есть 2 момента не сильно удобных. Имею ввиду не со стороны плагина, а в целом этой истории с платной фигмой и переходом на плагин.
1) в dev-моде было удобно работать с блочной моделью. Там все удобно выделялось и было удобно работать с margin\padding. А тут в режиме дизайна иногда очень сложно выделять элементы. И + постоянно вылазит окно не найденных шрифтов. Ставить все шрифты мира на ПК не хочется, а окно бесит :)
2) Жалко плагины та идут как отдельные окна, и нельзя сделать как вкладку там где "properties"
И чисто как доп (возможно я просто чего-то не знаю): в dev-моде была отдельная вкладка где можно было изображение в браузере открыть и скачать оригинал. А сейчас в обычном режиме вообще не ясно как это сделать. А если фото вообще вставлена дизайнером как фон - то вообще нету возможности открыть оригинальное фото.
Спасибо!
Спасибо за плагин, классное решение. Очень надеюсь что плагин будет развиваться и поддерживаться
И так поддерживается) а что развивать - предлагайте, сейчас он свою задачу уже выполняет
легенда! спаситель!
Спасибо за видео и хороший плагин! Сейчас пробовала его на простом макете и более сложном и у меня в шрифтах не отображался очень часто line-height и еще была бы иконка на панели, чтобы сразу его включать (это для ленивых)
line-height не будет отображаться, если дизайнер его не задал. Все логично :) Ну а иконку на панели я никак уж не сделаю))
@@maxgraph а я про дизайнера и не подумала))а как в таких случаях быть. Самому высчитывать?
Нет, оставить как есть) браузерное значение
А лучше дизайнера заставлять указывать его :)
@@maxgraph Спасибо, а то я уже была готова идти копать информацию))
боже, храни Максима! 💋💋💋
Кайф. Было бы круто, если в разделе "Шрифты в макете" можно было тыкать по названиям шрифта и он бы подсвечивал или там выделял блоки, где используется данный шрифт на макете.
Плагин и так нагружен,поэтому не делал это
мод хороший информативный, за это огромная благодарность, даже от такого "специалиста" как я))) особенно в эпоху когда все становится платным. Ну и спасибо за новую платформу где можно некоторые особенности проектов увидеть, например такие как отступы, собственно наверное только отступы и не видны в вашем моде, будем теперь пользоваться двумя проектами)))
Если я конечно ничего не проглядел и есть возможно по прежнему пользоваться только одной фигмой
Зажимаете альт и смотрите отступы в фигме, ничего не нужно))
@@maxgraph мда, сколько в мире всего неопознанного, особенно для меня. Мод просто идеальный, исправляю оценку)))) Скажите а у вас есть видео о адаптивности для супер чайников?)) просто я на этом сейчас застрял сильно
Есть плей лист на эту тему, посмотрите)
@@maxgraph отлично, еще раз спасибо
Спасибо, очень круто!
На первой версии плагина у меня иногда была проблема с большими макетами (где много всякого лишнего), плагин переставал работать, типа "зависал" что ли. Но тут скорее мой слабый компьютер больше виноват, я думаю.
Просто делите макеты по папкам, и не будет проблемы
супер спасибо отличная замена
как же ты крут
Спасибо
thanks =)
бомба
Спасибо за бесплатное решение.
10:00 Проценты и дроби по разному наследуются. Если в процентах, то у всех потомков line-height будет зависеть от font-size родителя, а в дробях у каждого потомка line-heigh будет зависеть от своего font-size.
Здравствуйте Максим! Такой вопрос можно ли как-то в плагине реализовать когда в дизайне line-height auto, то чтобы этот line-height показывался в пикселях и чтобы он просто показывался?
Когда в фигме стоит auto - это значит что дизайнер не установил значение. Потому плагин и не выдаёт "ничего")
Осталось теперь плагин сделать платным :D
Нет уж)
Спасибо очень удобный плагин, но есть ли возможность вытаскивать mix-blend-mode стили? просто потестировал и не нашёл
Здравствуйте. Это в работе, в течении недели постараюсь добавить
Твой плагин посто имба! А главное что вовремя.
Но не думаешь что фигма может его заблочить за его прекрасность?
Не, не будут они ничего блочить)
Ну а если будут - его же можно локально раздать и поставить только у себя на компе :)
Скажите, пожалуйста, а как можно теперь в Figma смотреть расстояния между элементами (для создания margin, padding и др.)?
С зажатой клавишей alt) на днях выпущу видео на эту тему
В pixso шрифты не все переносятся из фигмы , может указать другой шрифт , не тот что в макете фигмы
И отступы между элементами жесто каряво показывает, там его фиксить и фиксить еще, будьте внимательны )
Классно, спасибо, а то pixso одно мучение
Круто было бы добавить галочку на то чтобы "вписать" плагин как доп вкладку после "прототип", если такое возможно
Если ничего не редактируешь, то на боковой панели хотелось бы видеть только плагин
Это невозможно сделать)
@@maxgraph:(
Твой плагин самый популярный среди блогиров. Как по мне не хватает ещё одной фичи, это отступ между блоками. т. е. когда dev Mode был бесплатным можно было увидеть отступы между элементами (блоками) при наведении на какой-то блок. А сейчас приходится пользоваться линиями и поленейки смотреть расстояние.
просто выберите нужный элемент, зажмите альт, а потом наведите на нужный) увидите отступ.
@@maxgraph Максим, спасибо! Ещё отдельно хочу тебя поблагодарить за крутые уроки. Я уже два года смотрю твои ролики. Благодаря тебе я научился писать js и за прошлый год сдал больше 10 проектов. Спасибо ещё раз!
Круто) рад помочь))
Есть макет с кейсом, когда шрифт не показывает font-size после копирования проекта. А в режиме чтения видно, что font-size есть. Куда написать подробнее?
В телеграм, в описании видео ссылка
По pixso могу отметить, что некоторые элементы могут "уезжать", так же могут шрифты слетать. Юзаю данное приложение уже год как
Печально
Спасибо за плагин!
Не подскажите, пожалуйста, почему у меня может тормозить плагин?
К примеру, при переключениях с одного элемента на другой происходит задержка ~15сек прежде чем плагин сработает, в это время сама Figma не реагирует ни на что, кроме переключение вкладок
Мой ПК: i5-9400F, RX580 8gb, 16gb RAM, SSD
Здравствуйте. Могу только проверить у себя
Скиньте макет мне в личку (найдёте в описании), гляну
Если рай существует, для таких там VIP Зал
Плагин шикарный! Единственное, сильно не хватает кнопки "свернуть", чтобы все в одну полосу сворачивалось. Бывает так, что он мешает немного
В плагине есть ссылка на репозиторий по предложениям) напишите ишью пожалуйста, чтобы это не потерялось. Подумаю, как сделать подобную штуку)
Привет, у меня в твоем плагине все переменные в формате sass: $, не css -- (так должно быть??), как их импортировать в другие файлы?
Привет, переключи настройку на css и будут обычные переменные)
@@maxgraph екарный бабай, вот ведь знал же что не мог ты не сделать)) Но не увидел переключатель. Спасибо!
Хммм, странно, вообще не заметил пропажи Dev мода, всегда все размеры снимал просто из данных справа, там всё есть)
Привет, когда хочу посмотреть градиенты стилей, всегда показывает вот это
background: linear-gradient(180deg, ), url("path_to_image");
Можете помочь?
Привет. Это была ошибка со стороны фигмы. Уже починили
@@maxgraph да, работает
Я лично уже перешёл на Pixso. Плагин конечно норм, но всё же это не так удобно как было раньше.
А для тех кому принципиально нужна именно Figma наверное все же проще заплатить и работать со всеми удобствами которые есть в Figme.
Кому как) Но говорят Pixso тоже с багами при импорте фигмы
очень хороший плгин спасибо! есть некорректная работа в safari sonoma. mac mini m2. плагин запускается. выбираешь элемент. белый экран и снова перезагрузка проекта. итак по кругу
Привет!
Это странно. По идее плагин никак от системы не зависит. А макет большой?
Не очень. И плагин открывается и работает и в хром и Arc. Просто привык к Safari)
А, значит везде работает кроме сафари?
А в десктоп приложении?
А у меня его нет. )))
В dev моде можно было смотреть расстояние между объектами. Как это сделать сейчас?
Нажми на элемент, зажми альт, наведи на второй элемент)
@@maxgraph Спасибо большое. Разобрался.
Делай обновы, и добавь чтобы когда уменьшаешь окно можно было увеличить шрифт
уменьшение сделано специально, с большим шрифтом будет некрасиво.
так в твоём плагине нет вкладки с содержимым, что если мне нужно скопировать абзац текста из фигмы в вёрстку, что делать
Конечно нет. Это можно сделать из фигмы, просто выделив слой и нажав ctrl c)
@@maxgraph а да, ну попробую
Как то можно закрепить окошка плагина в право например как папки в виндовс?
Нет
Цвет некорректно показывает в вашем плагине, показывает color: #fff; а в самом фигме FFFFFF
и еще добавьте функцию измерения, чтобы можно было измерять в пикселях расстояния между объектами
Почему некорректно?) цвет тот же, просто сокращен.
Измерение добавить нельзя, но оно и так работает в фигме) Зажимаете альт и смотрите расстояния)
@@maxgraph аа понятно, да я знаю что надо зажимать альт, но в некоторых объектах на сайте не работает😖, не показывает расстояния
Почему-то line-height не выводится, если он установлен как "auto", хотя в devMode выводило в px. И было бы круто, если бы была галочка переключения на ReactStyle (border-radius -> borderRadius).
Значения auto не бывает. Это значит что line-height не задан, потому он и не выводится
@@maxgraph но фигма же как-то считала его
Считала значение по умолчанию. А зачем его писать в плагине, если оно по умолчанию?
Это недоработка дев мода
плюс ко всему, данные, которые есть у девмода, явно отличаются от тех, что хранятся в plugin api)
@@maxgraph, хорошо, я понял (Я кстати не знал, что можно писать / и не указывать line-height). А что насчет "react style"? (хотя это скорее object style какой-то)
Можно ли переименовывать переменные в Вашем плагине?
Нет. Он берет данные из фигмы, переименуйте в ней)
Подам идею автору, сделать возможность повлиять на синтаксис переменных, хочется иметь возможность получить $variable-name а не --variable-name и во всех стилях получать не property: var(--variable-name); а property: $variable-name;
добавление поддержки sass в планах, но не прям быстро)
😅 уже многие отрекламировали, самореклама излишняя 😂
А вот winter cms подожду...
P.S. баг, который Анна показала, исправлен уже?
Так это не реклама. Обзор возможностей.
@@maxgraphтак я и клоню к тому, что реклама уже не нужна 😂
а сделай, чтобы его можно было скачать как картинку, или невозможно?
"его" - это что?)
Спасибо. Только им и пользовался вместо девмода. На мой взгляд есть один минус это самый уродливый моноширинный шрифт. Почему именно этот шрифт используется?
Подключать сторонние шрифты туда нельзя, CORS-запреты летят и т.д. Поэтому по сути единственный адекватный шрифт) другие мне лично не зашли.
главное чтоб фигма не прикрыла твой плагин😁
не прикроет)
Плагины в веб-версии теперь не работают! У меня одного так?
Работают, если доступ к редактированию макета есть. Всегда так было)
Плагин конечно хорошо. Но расстояние между блоками теперь никак не посмотреть?
Их всегда смотрели через зажатый альт) ничего не поменялось
@@maxgraph неа, раньше просто мышку наводил и сразу было видно)
Дак я ж не про дев мод говорю, а просто про фигму.
У меня версия плагина 3.0 как обновить до последней?
Он сам обновляется) всегда актуальная версия
@@maxgraphстранно но почему-то 3.0(
Я мог где-то цифру не обновить)) но версия точно актуальная
@@maxgraph выглядит по другом, новая по удобней
как экспортировать фоновую картинку теперь? Плагин не помог. Раньше это было можно сделать в devmode
Найти слой с ней и экспортировать его)
@@maxgraph слой экспортируется вместе с текстом который идет поверх. А картинка сама ищет не слоем, а фоном к слою
Так можно же скрыть текст
@@maxgraph текст это слой. Фоном которому идет картинка. Скрываешь текст - скрывается и картинка.
@@maxgraph в общем-то в итоге я оформил студенческий аккаунт и вернул девмод на два года.без него ну никак эту картинку не скачать было
pixso, figma один в один, бесплатно, функций больше
Копирование svg - лично для меня вообще самое необходимое в плагине...
Плагин топ. Но блин микро и обработка звука прям ухо режет. Давайте на микро скинемся
Микро отличный) обработки никакой нет, просто прибавлени звук. Возможно поэтому кажется, что качество не очень
@@maxgraph попробуй добавить обработку) + к качеству контента будет)
Я сделал проще, купил фигмму на 2 года за 3к рублей и доволен)
ну по мне дев мод неудобный постоянными переключениями (ибо я и в дизайн моде сижу правлю многие вещи), поэтому не вариант
@@maxgraph Попробовал этот плагин, очень долго думает, подвисает когда переключается по элементам (особенно текстам) и это не самый большой макет, может конечно фигма сегодня тормозит, но у меня вот так.
Баг, вылезший на канале Анны, уже исправлен? 😅
какой баг?
Про трансформ?
Да, но тут скорее не баг плагина, а дизайн дурацкий))
@@maxgraph понял, принял
Плагин инспект, пиксо как варик
Макс, благодарю тебя за плагин. Он действительно получился классным, лучше чем их девмод.
Максим спасибо большое. А вот отступы между элементами, там все по прежнему?
просто выберите нужный элемент, зажмите альт, а потом наведите на нужный) увидите отступ.
только так)
@@maxgraph 🤝
Огромное спасибо!!!
Спасибо Макс !
Благодарю!
Спасибо