Платный Figma Dev Mode, решение проблемы, мини обзор плагинов, учимся читать макет в design режиме
Вставка
- Опубліковано 2 лют 2024
- Друзья, закончился тестовый период Figma Dev Mode, теперь он стал платный, в этом видео поговорим какие есть способы верстать без него, расcмотрим некоторые серые плагины, также научимся работать как верстальщик в design режиме.
Телеграм канал - t.me/from0to1com
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Мне впервые за 2 года понадобилось сверстать сайт и в этот же день dev mode сделали платным)уровень везения неимоверный
Красава )
установи плагин в figma называется Inspect Styles
Такая же фигня )
Лайк сразу, посмотрю после работы)
Вадим, огромное Вам Спасибо! Здоровья Вам и вашей семье.
Благодарю
Жду твоих новых видео с нетерпением !!!
Вадос, как всегда вышка, уже как два года прошло с первого сделаного с тобой лендоса, переверстал с тобой больше 10 штучек, уже как год работаю, спасибо тебе большущие благодаря тебе я в теме, доросту до мидла обазательно благодарочку тебе верну, а пока стараюсь смотреть все твои видосы, лайкать и пишу комменты)))
Круто, спасибо
Простите, можно поинтересоваться?
Какие сейчас требования к работникам? Что лично от вас требовали?
Ну ты прям мысли мои прочитал.. я как раз думал, что мне было бы интересно посмотреть на верстку данного сайта)))) Буду ждать видосик)))
супер!
Огромное спасибо! Проблема депрессии и алкоголизма решена! Теперь ждём новый стрим по верстке
очень жду такой макет, а то не так давно мучался с такого рода блоками :D
супер, востребованный контент )
Заинтриговал Вадим новым интересным макетом . ЖДем новый выход "саксофона" )))
спасибо!!! ❤❤❤ ждем вечеринок с мороженным!
Это Гуд)
просто гений без преувеличения, тупо тему за темой учу по твоим видосам, спасибо
Спасибо Вадим!!!)) Нет алкоголизму и депрессии!!!
Можно теперь заниматься кодированием ))
@@vadymprokopchuk Уф))
макет интересный :) буду следить.... а появится чуть больше свободного времени, наверно куплю курс по вёрстке, заинтересовал метод преподавания :)
супер, до скорого
Спасибо тебе друг, это хорошее решение)
Надеюсь будет новое видео о верстке 😉 а так спасибо!
Спасибо! А то уже начал паниковать)
Красавчик 🔥🔥🔥 когда выставишь видео верстки по этим макетам ?
Танец с бубном, Вадим красавчик, никакой паники. Всем сказал, что ничего не случилось, но кстати вот вторым плагином я пользуюсь. Style Inspector. Спасибо, очередной раз показывает, что есть люди, которые просто хотят донести добро до мира!
этот плагин полный мусор
@@WERWOLION оскорблять труд других💪 отличный из вас человек получается! Молодец, гордитесь собой.
тоже его пробовал, но он не все показывает
@@zercooI Более чем готов и прав
@@WERWOLION как скажете)
Здравствуйте Вадим , скажите пожалуйста что вы скажите про плагин Pixso ?
Стоит ли рекомендуется или нет?
Замена ли это Фигме как для дев мода так и вообще в целом?
Нашумевший плагин хотелось бы от вас услышать мнение , спасибо
Полноценно я не смотрел, но вроде там чуть ли не полная копия фигмы, соответственно, фигма может обозлится и будут суды, качели, совокупление, и всякое, время покажет, в ролике хотел указать именно, что делать в самой фигме
Привет, интересно, что тебя не устроило в плагине Inspect Styles. Может, я что-то не учёл в процессе разработки) хочу сделать лучше
Благодарю, ходовой плагин. Потыкал вчера, настройки можно до дефолта скинуть и ничем не уступает devmode. Разве что хотелось бы регулировать фрейм)
Из всех что я использовал он самый лучший, я еще после видео тестировал. Я не помню с чем я столкнулся, так как много юзал разных, все смешалось. Но я уже сказал что это интересное решение, на другом канале и вероятно порекомендую его в ближайшей верстке тут. Успехов в развитии плагина
@@vadymprokopchuk спасибо!
@@RomanKhassazhirov Насколько я знаю, регулировать его нельзя, либо регулирование сильно ограничено) поэтому так.
Спасибо)
Плагин огонь обновки делай
Нам всем необходим марафон с этим макетом! :)
Вадим есть чуть лучше решение, Pixso по функционалу +- тоже что и фигма только бесплатно
Я знаю, но оно настолько похоже, что мне кажется фирма злится на них, и что-то с этим будет делать
Pixso иногда криво загружает макеты из figma. Надеюсь это победят.
@@vadymprokopchukони могут сколько угодно злиться. Это Китай, и им пофиг. Pixso была создана в ответ на санкции от фигмы
Просто на Pixso перешёл))
как на pixso скачивать картинки с макета ? в dev mode при клике на картинку я вижу только background (url) и всё
@@pricolist1643сверху, там где режим разработчика, под ним вкладка
@@pricolist1643вроде только без дев мода можно скачивать
@@pricolist1643есть вкладка slice
@@pricolist1643 там тоже есть инструменты разработчика его нужно включить
Спасибо ютубу . Ютуб подогнал Вадоса , Вадос подогнал решение проблемы.
100% схема )
Вадим, привет! Хотел поинтересоваться -- ты по-прежнему угораешь по Джикваери или уже смотришь с торону реактивности? Вьюшка, например
я не фанатею по поводу конкретных инструментов, я фанат ТЗ =))
понял, спасибо за ответ)@@vadymprokopchuk
просто лучший
Привет.
Спасибо за видео!
Вопрос. Можно сейчас как-то в фигме переключиться с px на rem?
в девмоде (платном) можно настроить на уровне файла.
Вадим привет! телеграм что под видео рабочий? написал с вопросами по курсу, но без ответа 😥
Батя как всегда залетел к работягам на помощь
Ахаха, забавное объяснение:)
В общем без паники, pixel perfect в руки:)
Inspect Styles плагин понравился
спасибо)
Я бы посмотрел на верстку этого макета особенно первого блока с этими фигурами
это же чудесно
здравствуйте, у меня есть вопрос. Могу ли я использовать для своего портфолио проекты Figma, доступные в Telegram? и надо ли где-то отмечать кто автор этого проекта?
Я думаю його можна трохи під себе підкоректувати, картинки змінити, блоки місцями поміняти і він буде відрізнятись від оригіналу, стане унікальним))))
Подскажите пожалуйста как посмотреть box-shadow? Или теперь вручную выставлять на глаз?
Если без доступа к редактированию кликаете на елемент с тенью, справа в панельке будет раздел shadows, наводите на него и появится кнопка copy, нажимаете и свойство у вас, либо можно кликнуть на любое проперти тени кроме цвета и тоже скопируется все свойство.
В режиме с редактированием менее удобно, в той же в панели справа будет раздел effects там dropshadow кликнуть на него и перенести каждый параметр, или правой кнопкой мыши по елементу с тень и там выбрать Copy/paste as > copy as code> css. Там правда скопируется вся муть так что лишнее придется удалить
Пробовал Pixso ?
Макет что на видео - мне кажется не подьемным для верстки)... по нему видео заказать можно?)
да, он будет
Вау, як класний макет ❤
Вадим,варто платити третій місяць за ваш патреон(«план душа компании «) Відкриються нові роботи?
яку тему замовляєте?)
А что скажете по поводу cms modx?
🎉
Только думал писать по этому поводу. Вчера была паника🤣что делать шеф😂
Спасибо 👌
Такая же история , если бы не опыт работы с фигмой, был бы коллапс без дев режима. А тут такое - Вадос подогнал решение ,не пришлось даже гуглить)
@@user-pb1zu5wz9r а я уже и погуглил и пробовал pixsa (жалкое подобие🤮)
Есть полностью бесплатный и опенсорсный penpot, отличный инструмент. За бугром довольно популярен и многие именно penpot считают самой перспективной альтернативой figma
нужно посмотреть, интересно что там
Прикольный макет, сделаешь марафон по нему?
Он будет, но пока не знаю в каком формате
А я им и не пользовался - все и так легко достается) Ещё с времен фотошопа привычка собирать параметры с правой менюшки
Генератор градиентов не нужен - их можно получить с Copy as code -> CSS
А макет простенький, если уметь делать адаптивные svg-шки)
Как вы делаете эти неправильные формы? Если будет время, расскажите пожалуйста, было бы супер-полезное видео😊
Вадим, ты же снимешь видео, когда появится достойный плагин?
вероятно, но люди уже и без плагинов привыкли работать
А как вам pixso?
На днях скачал, вроде не плохо
норм, але майже копія, побачемо, я сильно не тестував, але мобуть треба це зробити
А если нет вкладки Design?
Да, действительно напрашивается вёрстка макета с неправильными формами, с закруглёнными краями и что бы они корректно находились друг относительно друга при адаптиве. Долой прямоугольные секции!
это же прекрасно, что она напрашивается)
Интересный макет, гоу сверстаем его
гоу, я скоро создам)
Чего все всполошились с этим девмодом то? В режиме редактирования стало не так удобно конечно получать свойство, но так было и пол года назад до того как добавили девмод, в обычном режиме все так же просто получить нужные свойства. Самая большая потеря это то что теперь нельзя выкачать исходник изображения, и отсутствие нормальной работы с переменными, а в платных темах под библиотеки это очень удобно. Кстати если у вас нет доступа на редактирование то и плагинами в бесплатной версии вы тоже не можете пользоваться.
Не думаю что люди массово начнуть переходить на похожие продукты - они кривые, файлы из фигмы переносят с багами, компании завязаны уже на фигме и будут его оплачивать как это было с Adobe Xd. И кстати где гарантия что как аналог наберет базу не станет платный как это сделала фигма?)
P.S. Если кто знает какое свойство не получить - пишите проверю, пока ни с чем таким не столкнулся что не находится дефолтными возможностями
если нет доступа к редактированию, то просто можно скопировать все фреймы и вставить их в новый документ. Потом можно и плагинами пользоваться, и дизайн менять
@@user-kg9ub4ny6n не знаю как вы читали, я же написал что все и так достается без плагинов. Пропали только фичи платных тем и возможность подучить исходник изображения. То что девмод выдавал код для реакта и тд я молчу, с реальными вещами он мало общего имел.
И зачем мне доступ к редактированию, ну чтобы что? Править дизайн чтобы была разница в реальном макете и своем, смысла нет
Приветствую, когда новые вечеринки будут выходить?)
Скоро будут, много болел
А как делать такие формы как на макете, если заказчик требует их сделать полностью адаптивными (резиновыми)?
будем делать
Круто, чекаємо))
Похоже, что плагины доступны только в Dev Mode версии. По крайней мере, в веб версии Фигмы у меня плагины пропали
у меня есть все плагины без дев мода
Такие бы макеты верстать.. а не вот это все стандартное )
Его очередь скоро прийдет ))
Это если хороший макет, а если макет хреновый или макет заморочен так что глаза сломаешь, как быть?
Ждём кряк) А вообще за dev mode платить только ради стиля box-shadow не вижу смысла, в целом много лишних свойств, особенно у текста. Расстояния просматривать в dev mode не удобно. Если дизайнер хороший, то одного раза заполнить файлик var и использовать переменные обычно хватает.
Pixso вроде бы неплохо себя показывает, та же фигма, только бесплатно и название другое)
Pixso лучшее решение на данный момент
Возможно, но это другое приложение
как на pixso скачивать картинки с макета ? в dev mode при клике на картинку я вижу только background (url)
Пипец как перенервничал🤣
Вадим, как картинку скачать не пойму не урезанную
Вадос привет!!! можешь записать тутор по HTMX библиотечке, инфы на русском 0 в гугле, больше общие статьи.
Можно ещё сделать copy as CSS
да, но не всегда так удобно
установи плагин в figma называется Inspect Styles
Как сверстать карточки неправильной формы, как в макете с видео?
Да много способов. Думаю, либо clip-path, либо бэкграунд такой.
я планирую сверстать такое, и видео заснять
@@vadymprokopchuk с нетерпением жду)
Они решили испортить нам вечеринку
Они свою хотели замутить )
Подсмотрел в другом видосе верстальщицы такую прогу как - Pixso, почти клон фигмы, мне понравилась, юзаю её, а плагины действительно не все показывают или тупят еще и постоянно его тягай по екрану туда сюда.
да, копия, и поскольку их хотели купить за $20 млрд, ну они точно, что-то будут делать со своими копиями
Pixso, альтернатива. Копія figma
Не реклама, но слышал, что в pixso переходят
Да, но есть и зеплин который 100 лет существует, в этом видосе хотел именно о фигме поговорить
@@vadymprokopchuk согласен) все супер)
Дякую, дуже корисно
Дякую
Лайк сразу
При всем уважении к Вам, Виталий, Вы соорудили устройство с большой парусность, при большом ветре, саженцы сломает
Без Devmode тяжело вытаскивать оригиналы картинок
а шо 12$ мы не потенем никак?🙂
Думаю Pixso лучше некуда (мож десктоп/web версия)
Вадим спас розробників-алкоголіків! Алілуйя !!!
=))
Скорее всего, люди на Pixso перебегут
время покажет, все возможно
Капец вы советчик.. Во-первых, разработчику в очень редких случаях дают права на редактирование макетов, во-вторых вы убираете ссылку на компонент и стили, если их в дальнейшем поменяют, то эти места останутся без изменений.
я делаю дубликейт, основная версия не меняеться
В опу! оплатил и работаю дальше
повесить покупку дев мода на заказчика
отличная и рабочая схема
Pixso скачивать и не надо танцевать с бубном. А кому принципиально нужна Figma, то тогда проще заплатить и не заниматься хернёй со всякими костылями
Мораль видоса: Девмод стал платным, не пользуйтесь ним. А что нового ты рассказал? Мы и без тебя знали как верстать без девмода. В чём посыл видоса? При чём реально рабочий способ ты не озвучил.
"мы и так знали" не говори за всех, кто-то знал, кто-то нет
@@vadymprokopchukбратан, ты сам сказал, что девмод ввели только этим летом. Ты думаешь, что ни кто уже не поминт как было пол года назад?
@@EvgenOl пол года назад было по другому, было очень похоже на дев мод, стили как дизайнеры не смотрели тогда
ни о чем😂
А если нет вкладки Design?