Обновление Figma 2023 - Всё про режим Dev Mode
Vložit
- čas přidán 22. 07. 2024
- ✅ Регистрируйся на бесплатный интенсив "Старт в веб-разработку": frontendblok.com/marathons/we...
На интенсиве:
- сделаешь сайт, используя HTML, CSS и JavaScript
- узнаешь, как получить первый заказ в 2023 году
- поймешь, что нейросети станут вашими лучшими помощниками
- получишь дополнительные подарки, бонусы и скидки
*****
Figma выпустила крупное обновление - Dev Mode. В этом видео вы узнаете больше о возможностях, которые открываются для разработчиков при использовании этой фичи.
Про Dev Mode - www.figma.com/dev-mode/
Обзор Figma - • Figma за 13 минут для ...
Обзор Pixso - • ЭТО уничтожит Figma - ...
Единицы измерения (ч.1) - • Единицы измерения CSS ...
Единицы измерения (ч.2) - • Единицы измерения CSS ...
Расширение Figma для VS Code - marketplace.visualstudio.com/...
Таймкоды:
00:00 Про Dev Mode
01:06 Что нового появилось?
02:08 Dev Mode на старых макетах
02:24 Интенсив по веб-разработке
02:47 Продолжаем изучать Dev Mode
08:43 Dev Mode в новых макетах
11:40 Расширение Figma для VS Code
13:29 Linear и Jira в Figma
13:59 Github/Gitlab в Figma
15:00 Итоги
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
✨ Поддержать выход нового полезного контента можно на Boosty: boosty.to/annblok
То самое чувство, когда документация не прочитана, понимания зачем это - нету... а говорить о чем-то нужно...
Ну и зачем это нужно верстальщику? Хотя бы несколько плюсов сильно выраженных. Я максимум значения в rem могу выделить. Но и то вряд ли дизайнер будет с ними заморачиваться отдавая вам проект на вёрстку
Большое спасибо за разбор! Круто будет если выпустишь новый курс по Фигме 3.0 =)
Я считаю, что это хорошо, когда разработчики следят за своим продуктом и делают его лучше. Спасибо за видео, было приятно посмотреть и послушать!
Спасибо за хорошее обучающее видео просмотрел сбольшим удовольствием всё ясно и доступно.
Да, спасибо, интересно было узнать о возможностях, которые открываются для разработчиков при использовании этой фичи.
Обновление понятно,хорошо пояснили, теперь буду знать то что осталось и то что поменялось😊
Понятно и просто всё объяснили , видео получилось информативным и полезным.
Прив, знаешь что-нибудь о работе с токенами из фигмы? Можно ли как-то экспорнтнуть их все сразу в один CSS файл?
Хорошая инструкция, можно прислушаться и попробыаать свои силы. Спасибо за информацию .
Очень люблю и коллекционирую лекции и гайды по работе с программами , ведь если инструкция не пригодится завтра , понадобится послезавтра . Спасибо и лайк .
Ничего в этом не понимаю, но тоже собираю такие видосы на будущее)))
смотря ваш канал я многому научилась многое узнала хорошая спасибо большое за то что да делайте такие видео обзоры который можно научиться воспользоваться спасибо большое
Каждый день что то новое😊 спасибо за обзор, очень доступно 👍
Неплохо, неплохо... Я давно перестал следить и редко захожу, но посмотреть что вышло нового всегда интересно.
Ребят, помогите, столкнулся с проблемой. Установил плагин в VS Code и при нажатии на Log in после установки ничего не происходит...
хорошо, что у программы теперь такое новое обновление, с таким намного удобнее работать всем пользователям, спасибо, что рассказали об этом
При каждом обновлении фигмы жду твою реакцию. Она самая содержательная и практическая. Спасибо. И заранее спасибо за новый курс по фигме. Предыдущий уже до дыр засмотрен))
Отличная новость, спасибо что подробно рассказали об этом обновлении к приложению👍👍
Очень важный обзор и своевременно представленная информация с демонстрацией возможностей. Очень актуально.
Спасибо за видео =) У меня такой вопрос - недавно меня попросили составить аудит сайта - найти его визуальные и технические недостатки и как их улучшить. Как в плане вёрстки, так и в плане сео. Можете записать ролик по написанию и составлению аудита сайта на конкретном примере? Было бы интересно посмотреть такое видео.
Отличный у вас канал, много полезной информации узнал от вас.
Новые возможности, тем более продуктивные всегда радуют. Спасибо за обзор.
очень интересно и познавательно получилось, спасибо за видео!
Мультиколор в тренде! Судя по модному настроению,в этом сезоне нужно окружать себя яркими красками.
Обучалка хороша, всегда приветствую таких людей, благодаря им мы знаем много и нетратив свое драгоценное время на поиск и обучение
Будет чем заняться в ближайшие часы смотреть в чём обновление и как работать
Не понял как теперь выделить несколько текстовых слоев для копирования. Реньше можно было это делать с зажатой cmd
Да, интересно получилось, мне нравится такой подход.
Спасибо за обзор обновлений
много полезной информации узнал от вас...
9:30 я уже давно привыкла к пикселям и не знала что можно иначе
спасибо за обзор нового обновления все новые функции объяснили
Здравствуйте Анна, можете на практике создать сайт и показывая всем как вы это делаете, надеюсь меня услышат!
Если возможно, не могли бы вы предоставить ссылку на фигму модели кота, показанного в этом видео 😅
Копирование текста через контент и раньше было.
Лично для меня в новинку, но многое я всетаки взяла на заметку 😊
Я не понял сама фигма будет платная или этот девмод?
скоро потеряем Фигма
Нововведения слабые, Профит сомнителен, потеря маловероятна
@@martix3090в vs code есть плагин. Фигму уже и открывать не надо
Не потерял ни минуты свободного времени зря, здесь хорошо рассказывают про обновления
А как отключить эту версию?
Круто что есть обновление 😍и можна узнать как пользоваться приложением
Ничего не понял, но очень интересно!!!😁
Да как в этом режиме объединить одним блоком три элемента чтобы посмотреть размер для создания блока внутри того же контейнера, так и не понял. Раньше было лучше.
Нужно будет протестировать их новое обновление и приложение, посмотрим что эти ребята создали и как оно работает.
Figma выпустила новое приложение 2023! Спасибо за профессиональный обзор про режим Dev Mode!Полезный контент!Удачи!
вот это на самом деле хорошие новости!
Чем проще командам проектировать, документировать, находить и реализовывать высококачественные проекты, не упуская при этом из виду работу и друг друга, тем лучше результаты продукта.
Как и прежде надо следить за обновлениями и не пропускать что будет нового
Я так понял фигма будет теперь платное приложение? А есть ли аналоги, хоть более менее удобные? И можно на них обзор.
Отличное видео для тех кто интересуется данной темой
Самое конченное и не удобное обновление в figma, подскажите пожалуйста можно его как-то отключить? Или как вернуть вкладку inspect в верхний правый угол? Заранее благодарен.
Обновление, действительно, хорошее и полезное! Спасибо!
Если приложение обновляется - то значит оно живет! И естественно развивается в лучшую сторону.
Честно говоря этот дев мод шляпа полная. Мне вкладка inspect больше нравится
Inspect есть, вы чо
В автолайаутах убрали space between режим(((
Куда пропала вкладка Inspect??? 😢
Это теперь Dev Mode
@@annblok_webdev и это станет платным скоро?
А как посмотреть font weight? У меня не показывает
Пожалуйста, не нужно про rem такое говорить. Может какие-то верстальщики-фрилансери без дизайнера и юзают рем, но в каких кейсах ето оправдано разработчику на продукте?
Я дизайнер и сейчас погрузился в ноукод разработку, которая не совсем ноукод, так как используются скрипты и часто менять приходится что-то в кастомных решениях руками, поэтому в css копаюсь часть, я работаю на Webflow и глядя на фигму, я вижу, что они начинают походить друг на друга, много фишек в вебфлоу реализуют по типу работы в фигме, а фигма движется в сторону реализации работы, похожую на то, что сейчас есть в вебфлоу. Итог такой, что я сейчас как дизайнер начинаю заглядывать на поляну фронтендера, самого слабенького и очевидного, но кайф для меня и для работодателя, что я полностью могу собрать крутой дизайн, повторить его на вебфлоу и реализовать все так, как это задумано изначально.
Туда же со временем я добавлю знание сложных анимаций и 3д. Как итог - нет испорченного телефона и быстрая скорость разработки от первого наброска до полностью функционального сайта. Причем я говорю не про лендосы и примитивы, сейчас я работаю над сайтом с cms системой на трех языках, где на сегодняшний день 1000 страниц и которые будут масштабироваться дальше. Конечно для сервисов огромных это еще так себе идея, но большинство задач всех пользователей - покрывается.
Как итог, появление режима разработчика в продукте для дизайнера говорит о том, что грань между этими направлениями больше начинает стираться. Многие дизайнеры этому не очень рады, но лично мне интересно работать с продуктом не только на уровне выбора цвета, шрифтов и сетки.
Не можешь ты ничего реализовать. Ты можешь сделать продукт мусор.
Фирма совсем не сечёт в технологии.
Весь подход для дурака.
И в целом фирма не может фронт.
rem на фирме мусор потому что ремы
Делаются в Sass в 100 раз удобнее.
До этого обновления как-то проще и удобней было
А по мне ужасно.
- Они предлагают свойство gap для флексов, которое не работает в сафари < 14.1 версии.
- Они так и не сделали алиасы каких-то значений в CSS переменные или константы препроцессоров (только для цветов). А эта фича есть в авокоде c 2014 года.
- Родные полупиксели фигмы никуда не делись, но режим дев появился.
- Анимации все еще нельзя экспортировать в видео или apng формат. Даже нарезать на картинки.
- Все еще кроме CSS нет никаких других форматов веба типа стайлед компонентов, SCSS и прочего. В авокод есть препроцессоры.
Из плюсов
- Сторибук интеграция это интересно, но она уже была в виде плагинов.
Я не очень понял, для кого это. Если бы я был верстальщиком на конвейере, я бы выбрал Avocode, сильно больше функционала, открывает разные форматы. Продуктовым фронтам тоже не подходит, CSS не так много, чтобы покупать себе инструмент для оптимизации его написания. Экономия времени на наборе css свойств крайне мизерная, учитывая, что CSS свойства помогает быстро писать emmtet.
а вам не обязательно гэп использовать)
@@user-ct8dn5xj3o не, это да. Просто они презентовали так свой дев мод, будто "как вы жили без этого раньше?! Купите и измените жизнь!". А по сути ничего нового, чего не было в фигме до этого (кроме переменных для цветов). Может будут ещё дорабатывать, не знаю.
Ощущение что этот девмод - подготовка к тому, чтобы дизайнеры постепенно стали сами делать сайты, без верстальщиков
Что? Девмод усложнил работу верстальщиков же
Nach wie vor müssen Sie die Aktualisierungen verfolgen und nicht verpassen, was neu sein wird
Честно, новое объявление мне не понравилось, поведение в некоторых макетах фигмы стало просто неадекватным, откопал один старый макет, там был чекбокс, который я верстал, и это был один из тех случаев когда свойство position: absolute и координаты top, right... и тд я смело переносил в проект, ползунок с точкой, а после обновления фигма считает, что чекбокс это нераздельный элемент, можно только экспортировать как картинку...
Только через дизайн мод можно извлечь размеры, но позиции уже нет, понимаю что можно, да, но это уже не так удобно. И я как только это заметил перешёл в пиксо.
По поводу "новых" изменений, которые вы назвали...
Ну, не хочу вас обижать, но тут вы неправы, копирование текста было очень давно, год точно, скорее даже два, переключение между ios Android, css, тоже было...
впервые вижу такой ролик про сервис фигма пока ничего не понял
Nice
Сразу видно руку Adobe. Фигма стаёт похожей на Dreamviewer. Испоганили Фигму и ещё деньги за это просят
Первые минуты видео. Просто потёк: "О да, детка! Вот теперь-то заживём! 🤪"
Чуть дальше: "Всё тлен! Это божественное изобретение будет доступно только избранным, а все остальные будут страдать."
Потом: "Ладно я найду способы оплатить это божественное творение! Это того стоит!!"
Ближе к концу видео: "Падажжите! То есть вот эта вот хрень на постном масле, которая на практике в работе ничего не меняет, а ещё скорее всего и будет только вредить, как обычно напихивая всякой ненужной фигни от фигмы в стили, это ещё и денег будет стоить?! Вообще поохренели и зажрались! Всякую туфту недоработанную втюхивают! 😕"
Видео - полный эмоциональный расколбас 😂
Круто конечно. Столько нововведений для разработчиков. А дизайнерам завезли превью в панели выбора шрифтов
😂
Думаю, дизайнерам постоянно обновы завозят. А тут именно в сторону разработки мощные изменения сделали.
ты точно смотрел: что завезли для дизайнеров???
А можно с тобой познакомиться? Я любился в тебя)))))
Аня ❤
В общем пока этот dev mode по большому счёту не нужен. И смысла за него платить нет
Сделали бутстрап мусор
Если вы не разработчик то смысла нет, если вы разработчик то это имеет огромный смысл
таким приложением нужно учится пользоваться и набираться опыта
АХАХАХА Я СИЖУ СЕЙЧАС, ДЕЛАЮ СТРАНИЦУ САЙТА И У МЕНЯ НА ГЛАЗАХ ВСЕ МЕНЯЕТСЯ. Я ТЕПЕРЬ НИЧЕГО ПОНЯТЬ НЕ МОГУ ТАМ
Все это очень плохо работает, когда макет делают криворукие дизайнеры, коих так-то много. А итоге постоянно приходится переключаться этот дев мод обратно на дизайн, исправлять дизайнерские косяки и опять переключать обратно, чтобы копировать стили
2000 р в месяц за возможность ускорить работу ровным счетом ничего не стоит...
Дев мод замедляет работу, кнопка "посмотреть код" была удобнее
Фигма с новой обновой верстальщикам по мелочи много чего испортила. Текст теперь полным блоком копируется нельзя по строчке. Цвета и некоторые свойства как-то не по копировать-вставить френдли задаются для верстки. Падинги не выделяются верно и ширина контента - приходится визуальные расчеты делать) лишняя путаница. Ужс короче. По мелочи по мелочи все, а мешает и замедляет плюс ошибки по внимательности надо лишний раз перепроверять опять таки на проектах лишнее время. Как веб версию откатить? Или хотя бы десктоп ? Та кто думал адоб купит фигму и сделает говно
Паддинги и раньше не корректно отображались
Есть такое но было удобнее. Сейчас вот макет верстаю, часть высоты от расстояния между блоками отображает как высота плюс верхний паддинг нижнего блока 😂 текст так вообще по слову только можно копирнуть либо всем блоком. Буду обходняк искать или на более сподручные решения переходить 😀 интересно ИИ сможет сайт верстать по макету ? Мне кажется с позиционированием все же проблемы возникнут.
При выделении текста в inspect есть content там текст, который выделен, можно копировать часть текста
@@user-nt8uy4gg7gа но опять таки неудобно когда ставит дизайнер списком текст и между ними отступы в одном контейнере. Раньше кликнул на строку два раза копирнул вставил. Тут выделил от и до один элемент, скопировал потом след выискиваешь выделяешь, ну тупо же. Зачем портить то, что было хорошо
Жаль, что Figma становится платной, но к этому уже привыкаем, что за все нужно платить!
Как не професионнальный верстальщик выскажу свою позицию. Обновление просто убило все прелести фигмы, когда ты аолностью копируешь весь css и меняешь буквально пару параметров. Теперь верстка занимает времени раз в 5 больше, дак еще и платным будеь 😂 воруют время за деньги)
Так что я в Pixso, надеюсь там на такое позорное обновление не решаться
В 2023 году вёрстка занимает во много раз меньше времени, чем было раньше. Я помню, ещё в 2008 году, когда начинал, вёрстку под IE6; как нужно было извратиться с картинкой, чтобы сделать резиновый блок с закруглёнными краями. А сейчас это решается одним свойством border-radius. Сейчас просто лафа для верстальщика, да и инструментов сейчас гораздо больше, а раньше пользовались только Photoshop, Dreamweaver ну и Fireworks, была такая прога у Adobe 😉
Полностью с тобой согласен, это обновление отвратительное и его надо откатить.