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