Платный Figma Dev Mode, решение проблемы, мини обзор плагинов, учимся читать макет в design режиме

Друзья, закончился тестовый период Figma Dev Mode, теперь он стал платный, в этом видео поговорим какие есть способы верстать без него, расcмотрим некоторые серые плагины, также научимся работать как верстальщик в design режиме.
Телеграм канал - t.me/from0to1com
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@excelente9842]

Мне впервые за 2 года понадобилось сверстать сайт и в этот же день dev mode сделали платным)уровень везения неимоверный

[@vadymprokopchuk]

Красава )

[@mikhailkaras7411]

установи плагин в figma называется Inspect Styles

[@Krylowandrey]

Такая же фигня )

[@yuritian8830]

забыл добавить одно последнее слово.

[@haxprofprofof7550]

очень жду такой макет, а то не так давно мучался с такого рода блоками :D

[@vadymprokopchuk]

супер, востребованный контент )

[@njsaab9722]

Вадос, как всегда вышка, уже как два года прошло с первого сделаного с тобой лендоса, переверстал с тобой больше 10 штучек, уже как год работаю, спасибо тебе большущие благодаря тебе я в теме, доросту до мидла обазательно благодарочку тебе верну, а пока стараюсь смотреть все твои видосы, лайкать и пишу комменты)))

[@vadymprokopchuk]

Круто, спасибо

[@Trouble_Rain]

Простите, можно поинтересоваться? Какие сейчас требования к работникам? Что лично от вас требовали?

[@BryanskyM]

Лайк сразу, посмотрю после работы)

[@maxgraph]

Привет, интересно, что тебя не устроило в плагине Inspect Styles. Может, я что-то не учёл в процессе разработки) хочу сделать лучше

[@RomanKhassazhirov]

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

[@vadymprokopchuk]

Из всех что я использовал он самый лучший, я еще после видео тестировал. Я не помню с чем я столкнулся, так как много юзал разных, все смешалось. Но я уже сказал что это интересное решение, на другом канале и вероятно порекомендую его в ближайшей верстке тут. Успехов в развитии плагина

[@maxgraph]

@@vadymprokopchuk спасибо!

[@maxgraph]

@@RomanKhassazhirov Насколько я знаю, регулировать его нельзя, либо регулирование сильно ограничено) поэтому так. Спасибо)

[@progover24]

Плагин огонь обновки делай

[@Ch-ce7ym]

Вадим есть чуть лучше решение, Pixso по функционалу +- тоже что и фигма только бесплатно

[@vadymprokopchuk]

Я знаю, но оно настолько похоже, что мне кажется фирма злится на них, и что-то с этим будет делать

[@dydya_dima]

Pixso иногда криво загружает макеты из figma. Надеюсь это победят.

[@Разное-п2т]

​@@vadymprokopchukони могут сколько угодно злиться. Это Китай, и им пофиг. Pixso была создана в ответ на санкции от фигмы

[@РусланЗубанов-т3ж]

Ну ты прям мысли мои прочитал.. я как раз думал, что мне было бы интересно посмотреть на верстку данного сайта)))) Буду ждать видосик)))

[@vadymprokopchuk]

супер!

[@HaXapakTepe5516]

Просто на Pixso перешёл))

[@pricolist1643]

как на pixso скачивать картинки с макета ? в dev mode при клике на картинку я вижу только background (url) и всё

[@СергейПирко-ю9л]

​@@pricolist1643сверху, там где режим разработчика, под ним вкладка

[@muddy2146]

​@@pricolist1643вроде только без дев мода можно скачивать

[@Денис-в9г3ц]

​@@pricolist1643есть вкладка slice

[@MRX-mp4cs]

​@@pricolist1643 там тоже есть инструменты разработчика его нужно включить

[@АлиР-з1к]

Я бы посмотрел на верстку этого макета особенно первого блока с этими фигурами

[@vadymprokopchuk]

это же чудесно

[@СаньокП-ч4д]

просто гений без преувеличения, тупо тему за темой учу по твоим видосам, спасибо

[@malex-maleth]

Привет. Я так понимаю, в браузерной версии плагины нельзя использовать на сегодня?

[@zercooI]

Танец с бубном, Вадим красавчик, никакой паники. Всем сказал, что ничего не случилось, но кстати вот вторым плагином я пользуюсь. Style Inspector. Спасибо, очередной раз показывает, что есть люди, которые просто хотят донести добро до мира!

[@WERWOLION]

этот плагин полный мусор

[@zercooI]

@@WERWOLION оскорблять труд других💪 отличный из вас человек получается! Молодец, гордитесь собой.

[@relaxyourself1609]

тоже его пробовал, но он не все показывает

[@WERWOLION]

@@zercooI Более чем готов и прав

[@zercooI]

@@WERWOLION как скажете)

[@TimaWilson]

Нам всем необходим марафон с этим макетом! :)

[@максимсоловьев-п4ж]

А если нет вкладки Design?

[@246Dron]

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

[@vadymprokopchuk]

это же прекрасно, что она напрашивается)

[@mikhailkaras7411]

установи плагин в figma называется Inspect Styles

[@ЕгорЕгорович-д2т]

Спасибо ютубу . Ютуб подогнал Вадоса , Вадос подогнал решение проблемы.

[@vadymprokopchuk]

100% схема )

[@ukraine1514]

Только думал писать по этому поводу. Вчера была паника🤣что делать шеф😂 Спасибо 👌

[@ЕгорЕгорович-д2т]

Такая же история , если бы не опыт работы с фигмой, был бы коллапс без дев режима. А тут такое - Вадос подогнал решение ,не пришлось даже гуглить)

[@ukraine1514]

@@ЕгорЕгорович-д2т а я уже и погуглил и пробовал pixsa (жалкое подобие🤮)

[@AnaLebjodkina]

Как вы делаете эти неправильные формы? Если будет время, расскажите пожалуйста, было бы супер-полезное видео😊

[@Виктор-т9л9б]

Надеюсь будет новое видео о верстке 😉 а так спасибо!

[@timashuba569]

Здравствуйте Вадим , скажите пожалуйста что вы скажите про плагин Pixso ? Стоит ли рекомендуется или нет? Замена ли это Фигме как для дев мода так и вообще в целом? Нашумевший плагин хотелось бы от вас услышать мнение , спасибо

[@vadymprokopchuk]

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

[@artemsmirnoff9821]

Спасибо! А то уже начал паниковать)

[@stasgosha]

А я им и не пользовался - все и так легко достается) Ещё с времен фотошопа привычка собирать параметры с правой менюшки Генератор градиентов не нужен - их можно получить с Copy as code -> CSS А макет простенький, если уметь делать адаптивные svg-шки)

[@jklyfg9893]

Похоже, что плагины доступны только в Dev Mode версии. По крайней мере, в веб версии Фигмы у меня плагины пропали

[@vadymprokopchuk]

у меня есть все плагины без дев мода

[@ДинисСалимов-у1ю]

просто лучший

[@andreo_kalashnello]

Подскажите пожалуйста как посмотреть box-shadow? Или теперь вручную выставлять на глаз?

[@romatokar3516]

Если без доступа к редактированию кликаете на елемент с тенью, справа в панельке будет раздел shadows, наводите на него и появится кнопка copy, нажимаете и свойство у вас, либо можно кликнуть на любое проперти тени кроме цвета и тоже скопируется все свойство. В режиме с редактированием менее удобно, в той же в панели справа будет раздел effects там dropshadow кликнуть на него и перенести каждый параметр, или правой кнопкой мыши по елементу с тень и там выбрать Copy/paste as > copy as code> css. Там правда скопируется вся муть так что лишнее придется удалить

[@ГлебЧ-б8п]

Ахаха, забавное объяснение:) В общем без паники, pixel perfect в руки:) Inspect Styles плагин понравился

[@vadymprokopchuk]

спасибо)

[@Xtemple135]

Приветствую, когда новые вечеринки будут выходить?)

[@vadymprokopchuk]

Скоро будут, много болел

[@hpbulbasaur8946]

А что скажете по поводу cms modx?

[@mmosow]

Вадос привет!!! можешь записать тутор по HTMX библиотечке, инфы на русском 0 в гугле, больше общие статьи.

[@DreamingDolphing]

А как делать такие формы как на макете, если заказчик требует их сделать полностью адаптивными (резиновыми)?

[@vadymprokopchuk]

будем делать

[@ГаляКравченко-у2ш]

Круто, чекаємо))

[@matenatroshvili6558]

здравствуйте, у меня есть вопрос. Могу ли я использовать для своего портфолио проекты Figma, доступные в Telegram? и надо ли где-то отмечать кто автор этого проекта?

[@ГаляКравченко-у2ш]

Я думаю його можна трохи під себе підкоректувати, картинки змінити, блоки місцями поміняти і він буде відрізнятись від оригіналу, стане унікальним))))

[@walterwhite4407]

Вадим,варто платити третій місяць за ваш патреон(«план душа компании «) Відкриються нові роботи?

[@vadymprokopchuk]

яку тему замовляєте?)

[@ringnull]

Они решили испортить нам вечеринку

[@vadymprokopchuk]

Они свою хотели замутить )

[@sEnigmus]

Пробовал Pixso ?

[@blacksmith5117]

Ждём кряк) А вообще за dev mode платить только ради стиля box-shadow не вижу смысла, в целом много лишних свойств, особенно у текста. Расстояния просматривать в dev mode не удобно. Если дизайнер хороший, то одного раза заполнить файлик var и использовать переменные обычно хватает.

[@hogvarts]

Такие бы макеты верстать.. а не вот это все стандартное )

[@vadymprokopchuk]

Его очередь скоро прийдет ))

[@maksoleynik1456]

Pixso вроде бы неплохо себя показывает, та же фигма, только бесплатно и название другое)

[@vladimirzvyagincev8193]

Пипец как перенервничал🤣 Вадим, как картинку скачать не пойму не урезанную

[@evgeniypokutniy4371]

Как сверстать карточки неправильной формы, как в макете с видео?

[@abbze8272]

Да много способов. Думаю, либо clip-path, либо бэкграунд такой.

[@vadymprokopchuk]

я планирую сверстать такое, и видео заснять

[@evgeniypokutniy4371]

@@vadymprokopchuk с нетерпением жду)

[@ПавелДубин-ь4ы]

Прикольный макет, сделаешь марафон по нему?

[@vadymprokopchuk]

Он будет, но пока не знаю в каком формате

[@Ralandinho]

А как вам pixso? На днях скачал, вроде не плохо

[@vadymprokopchuk]

норм, але майже копія, побачемо, я сильно не тестував, але мобуть треба це зробити

[@ГаляКравченко-у2ш]

Вау, як класний макет ❤

[@sagradagg]

Интересный макет, гоу сверстаем его

[@vadymprokopchuk]

гоу, я скоро создам)

[@SergeySarkisyants]

а шо 12$ мы не потенем никак?🙂

[@walterwhite4407]

Думаю Pixso лучше некуда (мож десктоп/web версия)

[@NinaSergeevna]

🎉

[@elkazmakaz5870]

Без Devmode тяжело вытаскивать оригиналы картинок

[@S_vor]

При всем уважении к Вам, Виталий, Вы соорудили устройство с большой парусность, при большом ветре, саженцы сломает

[@veronikanovikova8801]

Капец вы советчик.. Во-первых, разработчику в очень редких случаях дают права на редактирование макетов, во-вторых вы убираете ссылку на компонент и стили, если их в дальнейшем поменяют, то эти места останутся без изменений.

[@vadymprokopchuk]

я делаю дубликейт, основная версия не меняеться

[@candy_front]

Лайк сразу

[@vitaliy_]

Вадим спас розробників-алкоголіків! Алілуйя !!!

[@vadymprokopchuk]

=))

[@КонстантинБожеев]

В опу! оплатил и работаю дальше

[@Sheil777]

Скорее всего, люди на Pixso перебегут

[@vadymprokopchuk]

время покажет, все возможно

[@serhiytyndyk2010]

Дякую, дуже корисно

[@vadymprokopchuk]

Дякую

[@EvgenOl]

Мораль видоса: Девмод стал платным, не пользуйтесь ним. А что нового ты рассказал? Мы и без тебя знали как верстать без девмода. В чём посыл видоса? При чём реально рабочий способ ты не озвучил.

[@vadymprokopchuk]

"мы и так знали" не говори за всех, кто-то знал, кто-то нет

[@EvgenOl]

@@vadymprokopchukбратан, ты сам сказал, что девмод ввели только этим летом. Ты думаешь, что ни кто уже не поминт как было пол года назад?

[@vadymprokopchuk]

@@EvgenOl пол года назад было по другому, было очень похоже на дев мод, стили как дизайнеры не смотрели тогда

[@WERWOLION]

повесить покупку дев мода на заказчика

[@vadymprokopchuk]

отличная и рабочая схема

[@travel-agency2383]

ни о чем😂

[@максимсоловьев-п4ж]

А если нет вкладки Design?

[@baytszy]

Спасибо Вадим!!!)) Нет алкоголизму и депрессии!!!

[@vadymprokopchuk]

Можно теперь заниматься кодированием ))

[@baytszy]

@@vadymprokopchuk Уф))

[@romatokar3516]

Чего все всполошились с этим девмодом то? В режиме редактирования стало не так удобно конечно получать свойство, но так было и пол года назад до того как добавили девмод, в обычном режиме все так же просто получить нужные свойства. Самая большая потеря это то что теперь нельзя выкачать исходник изображения, и отсутствие нормальной работы с переменными, а в платных темах под библиотеки это очень удобно. Кстати если у вас нет доступа на редактирование то и плагинами в бесплатной версии вы тоже не можете пользоваться. Не думаю что люди массово начнуть переходить на похожие продукты - они кривые, файлы из фигмы переносят с багами, компании завязаны уже на фигме и будут его оплачивать как это было с Adobe Xd. И кстати где гарантия что как аналог наберет базу не станет платный как это сделала фигма?) P.S. Если кто знает какое свойство не получить - пишите проверю, пока ни с чем таким не столкнулся что не находится дефолтными возможностями

[@user-kg9ub4ny6n]

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

[@romatokar3516]

@@user-kg9ub4ny6n не знаю как вы читали, я же написал что все и так достается без плагинов. Пропали только фичи платных тем и возможность подучить исходник изображения. То что девмод выдавал код для реакта и тд я молчу, с реальными вещами он мало общего имел. И зачем мне доступ к редактированию, ну чтобы что? Править дизайн чтобы была разница в реальном макете и своем, смысла нет

[@m_mariya_mari]

Заинтриговал Вадим новым интересным макетом . ЖДем новый выход "саксофона" )))

[@ИгорьГлазков-с1б]

Вадим, огромное Вам Спасибо! Здоровья Вам и вашей семье.

[@vadymprokopchuk]

Благодарю

[@hopelezzhopelezz487]

макет интересный :) буду следить.... а появится чуть больше свободного времени, наверно куплю курс по вёрстке, заинтересовал метод преподавания :)

[@vadymprokopchuk]

супер, до скорого

[@Ohotnikzlat]

Это если хороший макет, а если макет хреновый или макет заморочен так что глаза сломаешь, как быть?

[@edgarbadalyan3885]

Есть полностью бесплатный и опенсорсный penpot, отличный инструмент. За бугром довольно популярен и многие именно penpot считают самой перспективной альтернативой figma

[@vadymprokopchuk]

нужно посмотреть, интересно что там

[@ArteEtHumanitate]

Батя как всегда залетел к работягам на помощь

[@ЕвгенийГавриленко-ь4м]

Вадим, ты же снимешь видео, когда появится достойный плагин?

[@vadymprokopchuk]

вероятно, но люди уже и без плагинов привыкли работать

[@Jane_123]

Вадим, спасибо вам большое, как всегда спасаете))

[@vadymprokopchuk]

круто, спасибо

[@MirroXTV]

Pixso лучшее решение на данный момент

[@vadymprokopchuk]

Возможно, но это другое приложение

[@pricolist1643]

как на pixso скачивать картинки с макета ? в dev mode при клике на картинку я вижу только background (url)

[@Anatoli-bq1pe]

Pixso скачивать и не надо танцевать с бубном. А кому принципиально нужна Figma, то тогда проще заплатить и не заниматься хернёй со всякими костылями

[@candy_front]

Жду твоих новых видео с нетерпением !!!

[@dm0795]

спасибо!!! ❤❤❤ ждем вечеринок с мороженным!

[@vadymprokopchuk]

Это Гуд)

[@read_and_listen]

Можно ещё сделать copy as CSS

[@vadymprokopchuk]

да, но не всегда так удобно

[@diego199705vlad]

Pixso, альтернатива. Копія figma

[@yuriykolomytsyn2352]

Огромное спасибо! Проблема депрессии и алкоголизма решена! Теперь ждём новый стрим по верстке

[@ДенисБерезюк-ч3ш]

Красавчик 🔥🔥🔥 когда выставишь видео верстки по этим макетам ?

[@alexlisouski4069]

Вадим привет! телеграм что под видео рабочий? написал с вопросами по курсу, но без ответа 😥

[@relaxyourself1609]

Подсмотрел в другом видосе верстальщицы такую прогу как - Pixso, почти клон фигмы, мне понравилась, юзаю её, а плагины действительно не все показывают или тупят еще и постоянно его тягай по екрану туда сюда.

[@vadymprokopchuk]

да, копия, и поскольку их хотели купить за $20 млрд, ну они точно, что-то будут делать со своими копиями

[@KhabibulinAnvar]

Спасибо тебе друг, это хорошее решение)

[@othersidesss1]

Макет что на видео - мне кажется не подьемным для верстки)... по нему видео заказать можно?)

[@vadymprokopchuk]

да, он будет

[@andreyevanton]

Вадим, привет! Хотел поинтересоваться -- ты по-прежнему угораешь по Джикваери или уже смотришь с торону реактивности? Вьюшка, например

[@vadymprokopchuk]

я не фанатею по поводу конкретных инструментов, я фанат ТЗ =))

[@andreyevanton]

понял, спасибо за ответ)@@vadymprokopchuk

[@bettercallmaksim]

Не реклама, но слышал, что в pixso переходят

[@vadymprokopchuk]

Да, но есть и зеплин который 100 лет существует, в этом видосе хотел именно о фигме поговорить

[@bettercallmaksim]

@@vadymprokopchuk согласен) все супер)

[@endlessnameless3613]

Привет. Спасибо за видео! Вопрос. Можно сейчас как-то в фигме переключиться с px на rem?

[@SlavaKim]

в девмоде (платном) можно настроить на уровне файла.