❌ Figma закрывает DevMode, но есть бесплатный аналог
HTML-код
- Опубликовано: 26 июл 2024
- 🔥 Запишись на обновлённые курсы по вёрстке сайтов со скидкой до 20% - forms.gle/xohyvFcoCPjhWtez9
🗓️ Старт обучения: 12 февраля 2024
Figma с 1 февраля закрывает режим DevMode и делает его платным. А значит, самое время, сравнить эту фишку с другим аналогичным приложением, где DevMode можно использовать бесплатно.
Напомню, что есть приложение Pixso. Обзор на него я уже делала на своём канале и есть тогда не многие поняли, зачем менять одно на другое, то сейчас такие вопросы отпадут сами собой.
Давайте в этом видео сравним возможности DevMode от Figma и Pixso, пока есть такая возможность.
🔴 Поддержи канал на Boosty: boosty.to/annblok
• ЭТО уничтожит Figma - ...
• 🔥 4 способа включить D...
Таймкоды:
00:00 Вступление
00:39 Скидка на обучение
01:46 Что такое DevMode?
02:25 Как запустить DevMode?
02:58 Единицы измерения
03:51 Текст
05:09 Изображения
06:26 Вектор
07:09 Тени
07:52 Переменные
08:46 Auto layout
10:42 Итоги
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com 
Развлечения
![Finesse2Tymes - Pretty Ricky [Official Music Video]](http://i.ytimg.com/vi/xIoP_mhYRT0/mqdefault.jpg)
![Young Nudy - John Wayne (feat. Metro Boomin) [Official Video]](http://i.ytimg.com/vi/NY8HnYYo2fo/mqdefault.jpg)
🔥4 способа включить Dev Mode в Figma и не только - ruclips.net/video/VgJ_06Z8cKc/видео.html
Переезжаю в пиксо, спасибо
Есть опыт перехода, очень глючный он
@@user-rb7zq5bd7f так и знал, что будут подводные камни. Всё-таки Фигма серьезный продукт и вот так один в один скопировать технически очень сложно и нужны большие ресурсы
@@user-rb7zq5bd7f пока полет нормальный
Какая ж я везучая. Только начала рисовать концепты - сломался планшет. Перешла дизайнить на зарубежный фриланс - санкции. Начала учить вёрстку - фигма закрыла удобный инструмент.👏
LОX это судьба 🤣😂😏
Ваши бы проблемы народу
У меня на этом видео высветилась реклама Adobe 🤣🤣🤣🤣
благодарю за информацию!
8:45 "Кстати, если вы хотите узнать как правильно называть переменные то..., Теперь давайте сравним автолайаут" кусок видео потерялся)
Цвет 1 , цвет 2, цвет 3
--с1
--с2
Все!
Продолжение: …то напишите об этом в комментариях 😅
@@annblok_webdevТогда хотим 😂
*"Кусок видео потерялся" - ...Ну или его специально потеряли, чтобы у зрителя произошел разрыв шаблона (и мозга:), и он срочно бросился просить сделать видео о названии переменных)*
@@annblok_webdev было бы очень полезно! потому что иногда приходится придумывать 50 оттенков серого ;))
Не совсем понятен момент с изображениями. Можно ли там экспортировать сразу под ретину, например?
Впрочем, нужно идти самому смотреть, тестировать. Спасибо за обзор!
Анна умничка! Как всегда- быстро, четко, информативно! И по-прежнему красавица❤
Отлично, а главное - своевременно!
эх, чтобы мы делали без ютуб... и без Типичного Верстальщика))) привет)
Просто актуально как никогда. Спасибо большое, перехожу на Pixso
Король умер, да здравствует король!
Видео про переменные очень хотим)
Так их там нет. Или есть? Но я не обнаружил.
Уже сохранил в закладки, пробовал импортировать макеты из фигмы - все работает отлично. Теперь буду работать в пиксо(тем более что там есть крутая штука в виде ИИ помощника, который и текст сгенерирует и картинки с иконками...правда его не тестил пока), платить подписку в фигме желания да и возможности нету)👍👍👍
Я тоже не вижу смысла в оплате этой фичи разработчику, потому что и раньше без DevMode прекрасно справлялись по данным из дизайн-вкладки. Максимум было удобно копировать box-shadow и формулу градиентов.
@@annblok_webdev тут дело принципа даже, честно говоря у меня просто подогрело когда они сделали этот дев мод...ибо он абсолютно не удобный, а платить за фичу которая ещё и не удобная - это уже слишком. Так что удачи Adobe))
@@krakanoshони разорвали сделку с адоб
Как я понимаю в ней не возможно массово сменить, например, тему дизайна макета всей страницы(например dark/light mode) или скругления и т.д. так как нет локальных переменных(local variables) как в платной версии figma? Это конечно жирный минус. Или я не обнаружил?
Спасибо. Пусть теперь сами фирмой пользуются.
У меня экзамен завтра, захожу в фигму, а там такое)
А html/css/js можно только копировать или вставлять в Фигму и Пиксо тоже можно? Почему то я до сих пор не нашел такой функции нигде, хотя это же такая важная и очевидная, казалось бы, вещь , обязана быть в таких инструментах.
Х/з, там можно professional купить за 12 к в год.
Надо будет посмотреть как это будет выглядеть после 31 января, и начать писать им что они гандольеры, может откатят это решение.
12К пусть дизайнеры платят, а веб-разработчики и там информацию из внешнего вида макета могут взять. Раньше же как-то из фотошопа верстали и никто не умер.
СПАСИБО
Спасибо за разбор этого супер инструмента !!!!!!!!!!!!!!!!
Спасибо ❤🔥 как увеличить макет ,зажатый ctrl как в figma не работает, шифт и плюс дико не удобно
Обязательно перейду ,когда пойму для чего это нужно😂😂😂😂
Я подписан.))
Интересно
Что на счёт градиентов? Все нормально?
я фигму не освоил пока, поэтому буду изучать пикссо 🙂
интересно в линукс можноее поставить
Прошу прощения за вопрос, а как вообще сейчас покупают фигму? Я джун, хочу работать в ней, так как все вакансии по ui ux связаны именно с ней, но не понятно как с бесплатной версией быть
Сегодня утром 20 минут пытался понять,почему у челов на видосах есть такие таблички в Фигме, думал плагины. Теперь понятно стало почему я ничего не нашёл. За видео спасибо!
Отлично, сел за верстку, а тут такая неожиданность(
Еще раз спасибо! Сегодня уже верстал с pixso. Неплохо. Только текст копируется неудобно. На правый клик и выбирать в менюшке. Пока это единственный минус, который заметил.
ctrl+c и ctrl+v работают
Везунчик, верстальщик
@@MultiEchelonа ты дизайнер? Мне вот интересно им что делать теперь.
@@-shakirovкак я понял, дизайнерам можно верстать в фигме, им же не нужен ДевМод. А ты просто импортируешь дизайн фигмы в пиксо
@@-shakirovузнаете в новом видео, расскажу о 4 способах использовать Dev Mode и что делать дизайнерам, чтобы включить Dev Mode разработчикам
Привет. Так как я начинающий программист сайтов я не стану покупать подписку и перейду в Pixso. В данном ставнении показано что различия между figma и Pixso минимальные и если знаешь что и как делать относительно css то каким инструментом пользоваться разницы нет.
Такой формат видео конечно же хорош и даёт полное понимание того что пользоваться можно и Pixso, особенно если есть перенос проектов между Figma и Pixso.
Буду в pixso и в figma с доп плагинами, покупать не надо ничего. Что касается pixso, думаю оно догонит figma, т.к., пользователей сейчас у них станет больше.
Спасибо за подсказку!
проще поставить плагин inspect styles в фигме и не заморачиваться, ну эт как по мне
А че там? Тоже самое всё?
@@Roman4ik145 да все супер работает
@@Roman4ik145 свойсвтав все можно смотреть
Та то понятно, но а с margin and padding как быть?
@@user-nd6cs1kz9c я проверил, там есть эти данные, а еще можно alt зажать
Спасибо, пробую. Установку плагинов они тоже разрешили только при наличии подписки на девмод
В смысле? Ты на бесплатном аккаунте не можешь плагины поставить??????
@@Burgermangimmy именно так. Теперь чтобы установить плагины - купи подписку
@@valeriyk7565 у тебя айкью тумбочки времён раннего ссср
@@valeriyk7565 у меня все ок, норм ставится, подписок никаких нет
❤❤❤❤
Спасибо!
А интересно еще, как в Пиксо реализован автолейаут и переменные. Из этого видео нельзя однозначно сказать, они есть там в принципе?
Как вариант, можно продолжать делать макеты в Фигме, а если нужен Девмод - просто экспортировать макет в Пиксо и пользоваться, хотя наверное это неудобно будет. P.S. И по поводу экземпляров еще хотелось бы понять. Короче, чем вообще эти приложения отличаются?
В видео в пиксо лэйаут увидел, а вот переменные нет. Но переменные вроде только дизайнерам удобны, для веб-разработчиков они бесполезны.
@@Serehajsss я и есть дизайнер и веб-разработчик одновременно )))
@@IgorBobyrevсколько зарабатываешь, совмещая два этих дела?
@@Roman4ik145 много )
Буду пользоваться обеими программами, но больше конечно pixso.
Подскажите, пожалуйста, при открытии Figma у меня всегда открывался ранее закрытый документ и всегда на втором мониторе, на котором и работал! А Pixso никак не хочет! Все приходиться заново открывать!
Купи нормальный комп
@@Burgermangimmy У меня новый, хороший ноутбук! Не дешевый! Пользуюсь вторым дополнительным монитором, тоже не плохой! С Figma таких проблем нет!
Вернулся в кодинг, не мог все найти привычный таб, узнал, что теперь он платный, решил найти решение и господи спасибо боже! И китайцы молодцы, взяли форкнули фигму)0
Да, я обзор на Pixso записывала еще год назад и видно, как за этот период они подтянули больше функций от Figma. Думаю, будут дальше его совершенствовать, так как сейчас многие туда уйдут 😅
Круто они намутили. Только начал изучать верстку, открыл макет, а там не работает режим дев мода. В итоге по макету непонятно ничего, особенно семейство шрифта. Если размеры и отступы еще можно определить через пень колоду, то семейство шрифта не отображено нигде, ну или я плохо искал. По итог вообще не понятно, для каких целей теперь предназначен этот обрубок, чтобы что?
У пиксо минус, это значения атрибутов на кириллице: Ширина, Высота, Left, Режим слоя: Проникать. И если нажать скопировать значения, дабы перенести их в CSS, то эти значения так же переносятся на кириллице.
Семейство шрифта можно увидеть в гуле, но вообще чаще 2 варианта: sans или sans-serif. Их определить не трудно. Если у вас система на русском, то будет на русском интерфейс. У меня компьютер переведён на английский, поэтому все пункты тоже на английском.
Pixo нифиа не аналог, тестил в pixo большой проект из figma(импортировал файлом) по итогу не все значения корректно отображаются в пиксо- цвет, размеры, шрифт и т.д.
так как экспортировать макет со всеми элементами из фигма в пиксо ?
В видео показан этот момент на 02:45
7:47 Тройной клик по строке выделяет её. Прфоит. Не нужно чтобы "скрол пронёс нас".
Какой понос?
Только у меня вопрос зачем плодить новых вебпакеров если уже есть vite???
Потому что у всех этих "учителей" нет задачи дать что-то лучшее. У них одно если фреймворк, то говённый реакт, если сборщик, то никчёмный вебпак.
@@виртуоз_ру а какой фреймворк по вашему мнению лучше, чем реакт, подскажите, пожалуйста?
Vite проходить будем на курсе Vue, а Webpack на продвинутом по вёрстке. Итог: ученик понимает, как работать со всеми технологиями.
Патамушта сейчас модно плодить тысячи тяжелейших бесполезных абстракций на простейшие действия. Мейнстрим.
А это приложение не станет ли платным в ближайшее будущее??
Таких планов озвучено не было
🍇
Красавица!!!
В нюансах при работе с вектором автор видео как-то неудачно упустил из виду тот факт, что в фигме можно увидеть исходный код svg, а ведь это одна из главных, если не главная фича девмода фигмы при работе с вектором...
Открываете Pixso, в левой колонке в нужном слое с вектором нажимаете правой кнопкой мыши и далее Copy as SVG -> Вставляете этот код в нужный файл при разработке. Эта функция в Figma также есть и без режима DevMode. Пользуйтесь!
svg как у тебя так и не понял как посмотреть(6.42)😒😢😢😢
На этой секунде показана фигма
зачем юзать всякие рудименты типа pixso если есть Penpot ? а в версии 2.0 там еще и функции повеселее чем в Фигме да еще и всегда бесплатны все функции
Грядет монетизация и фигма не исключение :))))
Не плохой плагин для фигмы "React Native Styling Inspector", все наглядно.
А я сегодня проснулся и офигел что не так
Предупреждения ранее в фигме не высвечивалось?
как исправить отсутствующие шрифты
Установите их на свой компьютер
шрифты можно вводить в личную библиотеку на пиксо (.ttf)
😂 я год уже юзаю pixso
Анька красивая
перешёл бы на пиксо, если б работодатель не оплачивал фигму) правда, спасибо) но мне лично не всегда удобен дев мод, иногда что-то наколупать надо в обычном режиме)
может, дизайнер такой, может я... может оба)) но копировать контент из дев мода точно отстойно сделали. Может, поправят...
Мне тоже копирование из DevMode не зашло, лучше Ctrl+C и Ctrl+V всё равно ничего нет
Я бы купил подписку на фигму но проблема в том что надо учит учеников я вот только научил ученикам своим фигму теперь надо учит pixso
Да, тоже буду теперь рассказывать про новые нюансы в обновлённой программе в феврале
От монетизации не убежишь.. Стоит только Пиксо набрать какую-то весомую аудиторию, она тоже станет платной. Бегать с одного ПО на другое каждые 2 года тоже такое себе удовольствие...
на выходе один фиг, вопрос в привычке. У кого есть заказы, тому заплатить за фигму ( если она привычнее) не принесёт особых затрах, а у кого нет заказов или для учёбы, будет привычнее пикса, и с неё после обучения большая часть не слезет, т.к. опять же привычка. На мой взгляд, фигма роет себе яму, хотели бы монетизацию, добавили бы какую-то рекламу, либо какие-то центы с 10+ шаблонов за месяц, до 10 бесплатно ( ну или 3-5ть хз), а так фигня эта ваша фигма получается :)
прем в фигме будет покупать заказчик,а не разработчик.
хотя пиксо очень не плох
А зачем спонсировать их?
Так как же правильно называть переменные??? ))
a, b, c и далее по алфавиту
Лучший бесплатный аналог Dev Mode - это плагин Inspect Styles для Figma.
в pixso devmode пока мусор, максимум чего полезно это размеры или типография. В figma допустим если выбрал меню он показывает как можно сделать через flex а тут только static или absolute.
Учи верстку лучше, иначе станет бомжом
@@Burgermangimmy А причём здесь это? Я знаю вёрстку но с помощью фигмы можно её ускорить
Врятли фигма будет принимать платежи из россии
Это её проблема. Примет значит тот, кто сможет 😉
@@Serehajsss 😁
Фигма недостойна получать деньги российских платежеспособных умных граждан
@@Roman4ik145 Только почему-то российские умные граждане свою то фигму не осилили сделать. Птздят у НАТО или китайцев. Лишь бы на халяву. Хз где тут достоинство...
Никто ничего не п*здит, мыв пользуемся готовыми решениями. А в плане почему бы не создать, согласен с вами @@POEOneLove
Сейчас народ переедет в Pixo, устроится, обоии наклеит, а потом хозяева опять его Фотошопу продадут, а эти новые хозяева очень деньги любят. Сначала свистели, что фигма останется бесплатной. Но не долго музыка играла. Теперь в полночь фигма превратиться в тыкву и только с помощью волшебной подписки ее можно будет оживить. Или искать тетю фею флагом "веселого Роджера". Иначе искать аналоги и снова переезды. Скоро наверно и воздух по подписке булут продавать. И это при том, что в век ИИ многими так не сладко
Честно говоря, мне хватает обычного режима для верстки.)) Хотя сейчас DevMode не включается при клике мышью, а вот сочетанием клавиш Shift+D включается)
Не ври
скачал первый макет из фмгмы в пиксо... некоторые картинки не прогрузились, но зато всё на русском языке!!! придётся переходить на пиксо
Ща все дтзайнеры побросают Фигму
ку
рлык 🐓🐔
Само приложение не понравилось, оно вроди +- такое, только более глючное и менее оптимизировано по нагрузке на компьютеры, особенно слабенькие офисные. Чувакам еще работать и работать.
Проблем с оптимизацией не заметила. В чем оно выражается?
Фигма, давай до свидание.
Кстати, в пиксо можно импортировать по урл из фигмы. Когда с вами делятся проектом.
Я один прочитал, вместо Picxo Психо?
Фанат фильма?
@@Roman4ik145 Нет, не фанат. Но как бы классика. Я его смотрел один раз, да и то не до конца. Но данный фильм является культурным феноменом, плотно осевшем в массовой поп культуре. Может отсюда и реакция
Возможно
Как корабль назовёшь, так он и поплывёт. Фигме фиг, а не подписка.
Фиг твоей mommy