21 июня 2023 года на конференции Config 2023 показали большое обновление Figma: представили Dev Mode, переменные (дизайн-токены), расширенный функционал прототипов, интеграции, AI и многое другое. Разберемся с каждой фичей подробнее.
Dev Mode
Теперь в Фигме есть отдельный режим для разработчиков, который упростит передачу макетов и саму разработку.
Обновленный Inspect
В обновленном режиме Inspect теперь можно получить больше информации о макете: размеры, спецификации и стили, а также сам код.
Статусы
Теперь можно назначать Секциям статусы готовности макета и помечать их как “Ready for development”, а также сравнивать изменения в макете.
Плагины
Можно связать проекты в Figma с кодом компонентов и документацией разработчиков с помощью интеграции с Jira, Storybook, GitHub и других. Плагины можно будет устанавливать и из Community.
VS Code
Также появилось расширение от Фигмы для редактора кода VS Code, с помощью которого можно смотреть файлы, общаться с дизайнерами, получать уведомления, не выходя из редактора.
Функционал Dev Mode будет доступен всем пользователям и уже можно ознакомиться с его возможностями в демо-файле.
Переменные или токены
С помощью переменных (Variables) или дизайн-токенов будет проще создавать и менять на темные/светлые темы, мобильные и десктоп версии, iOS и Android приложения. А также масштабировать и согласовывать вашу дизайн систему с кодовой базой, экспортируя токены через REST API.
Видео туториал по переменным от Фигмы. Функционал будет доступен всем пользователям, но в бесплатной версии будет доступна только одна коллекция токенов в файле. Демо-файл от Фигмы.
Прототипы
Расширенный функционал прототипов позволяет создавать продвинутые прототипы через условия, математические выражения и токены. Например, можно будет по клику увеличивать или уменьшать числа в прототипе. Кроме того, в Фигму добавили режим предосмотра прототипов, чтобы быстрее вносить изменения в него.
Функционал будет доступен только на тарифном плане Professional и выше, но посмотреть возможности можно в демо-файле.
Auto Layout
В Auto Layout завезли две новые функции: Wrap и Max/Min. Wrap позволяет переносить элементы списка на следующую строку (обычно подходит для чипсов). А Max/Min устанавливать максимальное и минимальное значение ширины/высоты карточки, чтобы контент внутри менялся в зависимости от размера карточки. Узнать подробнее можно в демо-файле от Фигмы.
Превью шрифтов
Наконец-то появились предварительные просмотры шрифтов, улучшенный поиск по ним и фильтры в подборщике шрифтов Figma!
Глобальный поиск
Благодаря глобальному поиску и уведомлениям теперь можно искать файлы и комментарии по всему аккаунту, не перемещаясь по другим файлам.
AI (скоро)
А еще Figma купила Diagram — компанию, которая разрабатывала AI плагины для Фигмы, поэтому завтра обещают подробнее рассказать про внедрение AI в Фигму. Но уже сейчас известно, что можно будет просто ввести запрос, например, на создание пака кнопок в разных состояниях и она их сделает.
UPD 22.06
Спасибо, что прочитали до конца! Если я что-то упустил или написал не так, смело пишите в телеграм: t.me/mikemurzak Еще я складываю свои личные сохраненки на тему дизайна в телеграм канал: t.me/design10000 (там пока 1 подписчик — это я))
Шрифты бесили, вот реально бесило отсутствие превью... Каждый раз я недоумевал: какого хрена было не сделать это сразу, если есть силы создать такую программу)
Самое смешное, что даже в богомерзком corel draw было превью для шрифтов.
Приходилось идти на goole-fonts. Вот там превью есть.
за корел перед дизайнерами 90-х ответишь )
Отрегдерить кучу шрифтов в браузере нетривиальная задача. Каждый шрифт весит минимум 200-500 кб, а сколько их в фигме… Насколько понимаю, нужно было через какой-то серверный движок рендерить. Это не быстро делается.
*Отрендерить
Во framer они например рендерятся по мере прокрутки. В редимаге это есть чуть ли не с открытия сервиса)
Ну, самое логичное и очевидное решение)
А у меня наоборот, никогда не напрягало отсутствие превью, а сейчас жутко бесит, что название шрифта нельзя скопировать как раньше
Вот да!
Я нашла выход, они в этой всплывашке с превью добавили сортировку по шрифтам, можно просто выбрать чтобы отображались только те шрифты, которые есть в файле :)
Кто нибудь в курсе куда пропал разработчик Фигура нашего ответа фигме?)
Такой большой по масштабу проект был изначально мертворожденный, если его хотел сделать один человек
Пошёл окопы рыть.
помогите пожалуйста разобраться с Inspect, там теперь передвигать элементы вообще нельзя? эта вкладка теперь только для разрабов?
А там и раньше вроде бы нельзя было ничего двигать, тоже код для разрабов был
В том и прикол, что можно было)
Не сильно им пользовался, а что именно там передвигать можно было? Как? Зачем?
Было намного удобнее работать с изменениями расстояний между элементами, то есть не нужно было каждый раз зажимать alt, а просто перейти во вкладку inspect и спокойно все двигать, просто наводя курсор, теперь - увы, все стоит на месте, только alt и осталась)
Хм. Ну если это тот Inspect, который для разрабов, то это ОЧЕНЬ странно, имхо, что там можно было менять дизайн. Это же не дизайнерский инструмент. Почему там можно изменять, если у тебя нет прав на редактирование файла?
Переключаешься в Design и правишь, хоть внутри автолейаута, хоть между не связанными АЛ элементами. По-моему логично.
Та это понятно все, просто мне лично так было удобнее, поэтому и спросила. Да, именно тот, возможно вы никогда не задумывались что так можно. Я когда еще начинала фигму изучать, не сразу узнала что можно alt использовать, чтобы глянуть сколько пикселей между тем или иным элементом, и потыкав по вкладкам, узнала, что очень даже удобно менять расположение через Inspect, так и продолжала использовать такой метод по привычке, а вот теперь придется как все)
Наконец-то подумали о разработчиках. Нормально хоть видны отступы у блоков. 👀
Комментарий недоступен
До конца верил в скетч, но похоже, фигма окончательно победила
Комментарий недоступен
Хотя бы потому, что фигма работает везде, а не только на маках?
Для работы в соло возможно, но я не представляю как сейчас большим командам работать в скетче
Комментарий недоступен
Проблема в том, что этим никто не пользуется)) вот не самый старый ресерч: https://uxtools.co/survey/2022/ui-design
очень радует что мультиплатформенный инутсрмент как фигма, побеждает мак онли скетч
Норм.
Следил как они работали в сторону Dev Mode… прям радует это движение.
Неужели обновление
)
Круто, что фигму сделали более интуитивной для дизайнеров. И про разработчиков вспомнили))
Подскажите, пожалуйста, где теперь искать line-height в макете?