Недавно был обновлён файл дизайн системы Figma UI2
- в нём появилось ещё больше компонентов интерфейса Figma и используются новые фичи, такие как Variants и Auto Layout. Интересно, что Auto Layout используется довольно консервативно: только там, где без него было бы совсем плохо
- в списках меню, например. Также в обновлении добавлены примеры страниц, собранных из компонентов дизайн системы. https://www.figma.com/community/file/928108847914589057/UI2%3A-Figma's-Design-System

теперь группы стилей можно легко переименовывать без плагинов а также добавлять стили в группы или убирать их простым перетаскиванием. Операции переноса и удаления стилей также теперь можно совершать с несколькими стилями сразу, выделив их с зажатым Shift или Cmd/Ctrl.🔥 Заходи в Figma и пробуй новинку! #new Напомним, что группировка стилей создаётся через слеш ( / ) в названии. Например, стили с названиями “Brand/Blue” и “Brand/Red” будут находиться в одной группе стилей “Brand”.

Новое меню темплейтов открывается при создании файла нажатием кнопки “+” в Drafts или в командах. Можно выбрать пресет для создания файла с готовым фреймом нужного размера (1) или использовать популярные темплейты из Figma Community, разобранные по категориям. Для удобства в этом окне есть меню выбора проекта, в котором создастся файл (2).

Чтобы быстро создавать файлы без этого меню, ты по-прежнему можешь использовать кнопку “+” во вкладках приложения или ссылку https://figma.com/new (добавь на панель закладок, чтобы не потерять). Или сними галочку “Show this next time”, чтобы больше не видеть этого нового меню.

Относительное изменение размеров и позиций нескольких объектов сразу позволяет совершать плагин Resize Commands при помощи несложных команд. Например, чтобы растянуть выделенные объекты влево на 50 пикселей, просто запусти плагин и введи “l+50”. На картинке полная памятка со всеми параметрами и операциями, которые сейчас поддерживаются плагином: сохрани и расскажи друзьям!

👉 Устанавливай: https://www.figma.com/community/plugin/750394507756587098/Resize-Commands #плагины

Поиграй в неё прямо в Figma с новым плагином Asteroids! И не забудь пригласить друзей в один файл
- при открытии плагина они автоматически присоединятся к игре. Разрушайте астероиды вместе! Более того, можно создавать свои астероиды и увеличивать сложность игры просто копируя их. Развлекайся: https://www.figma.com/community/plugin/916835579596798269/Figma-Asteroids #плагины

Есть решение: зайди в файл библиотеки и найди в поиске новую команду “Republish Auto Layout components”. Это обновит все компоненты в библиотеке на новую версию Auto Layout и скорее всего исправит проблемы при их использовании в других файлах. 🎉 Всё ещё что-то не работает? Напиши в поддержку со ссылками на проблемные файлы и видеозаписью или скриншотами багов: https://help.figma.com/hc/en-us/requests/new

Якорные ссылки в прототипах Figma
- ждали? 🤗 Создавай более реалистичные прототипы со ссылками, которые производят прокрутку страницы до выбранного элемента! Можно создавать переходы с действием “Scroll to” между любыми двумя элементами, которые лежат внутри одного фрейма со скроллингом. Даже при изменении позиций элементов на странице переход останется в порядке! ✨ Переход может быть как мгновенным, так и плавным 
- с анимацией, и всеми. Имеется и точная настройка отступа, прям как в вебе, чтобы, например, фиксированная шапка не закрывала собой элемент, к которому прокручивается страница. https://www.figma.com/community/file/918189250907220365

Небольшое обновление, которое понравится некоторым из работающих с тёмными темами приложений и сайтов: установи цвет холста (не фрейма, а всего рабочего пространства) на абсолютно чёрный #000000, и при создании нового текста его цвет изначально будет белым. Теперь ты можешь видеть, что печатаешь! 😎 #новое

Тогда этот плейлист из четырёх видео для тебя! 🤗 Узнай о процессе дизайна в Figma: начни с поиска и проработки идеи, затем воплоти её в своих макетах, создай интерактивный прототип и наконец передай результат разработчикам. https://www.youtube.com/playlist?list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4

Познай обновлённый Auto Layout, посмотрев запись вебинара, прошедшего на прошлой неделе! 🤗 В нём есть всё самое нужное от основ до хитростей профессионалов. Целый час полезностей:

https://youtu.be/u4K2m-3MmQQ

А вот и долгожданное обновление Auto Layout! Создавай гибкие и тянущиеся компоненты с полностью обновлённой панелью Constraints. Как всё устроено в подробностях ты сможешь узнать завтра на вебинаре. Также ты уже сейчас можешь начать самостоятельное изучение, просто перезагрузи Figma!

Поиграй с новинкой в подготовленном гайде: https://www.figma.com/community/file/784448220678228461

Прочитай статью, где рассказывается о каждой детали: https://help.figma.com/hc/en-us/articles/360040451373

В этом месяце Auto Layout заметно обновится! В следующую пятницу в 19:00 по Москве будет проводиться вебинар, где ты сможешь узнать подробнее об обновлениях, как к ним готовиться, и конечно же задать интересующие вопросы. 🐥

Регистрируйся заранее, чтобы не пропустить: https://figma.zoom.us/webinar/register/WN_XnLmGvmIT9uo7tbSTGFWJw?timezone_id=Europe%2FMoscow

Тебе понадобится небольшая карта, которую мы сделали для тебя! 🗺
1. Сначала открой вкладку Community в меню слева.
2. Нажми на кнопку Explore
- первую в куче других похожих кнопок.
3. Найди вкладку Plugins. Ты на месте! 📍

Чтобы найти свежие плагины (или просто очень непопулярные), включи сортировку по количеству установок. Поиск по плагинам доступен там же, во вкладке Community.

👀 При создании дизайн системы часто появляются родственные компоненты, которые отличаются только парой свойств, но по сути являются одним и тем же объектом. Например, кнопка в состоянии фокуса, неактивная, с иконкой и т.п. Чтобы не плодить в дизайн системе кучу похожих компонентов, используй Variants! Варианты
- это контейнеры, которые хранят различные состояния и вариации одного и того же компонента.

Варианты отлично подходят для кнопок, чекбоксов, табов, полей ввода и других интерактивных элементов. Хорошо будут работать они и для слегка отличающихся карточек (например, в одной есть кнопка, в другой нет), баннеров с предупреждениями и информационными сообщениями, меню с разным видом и шириной для разных платформ. Не следует использовать варианты для группировки иконок
- если объединить их в варианты, в поиске они будут отображаться как один компонент и нельзя будет их менять через панели Assets и Swap Instance.

Приходи на вебинар, где команда Figma расскажет о всех особенностях новой фичи, покажет лайфхаки и ответит на вопросы! Начало сегодня в 6 часов вечера по Москве. Регистрируйся: https://figma.zoom.us/webinar/register/WN_VX8Cjs1DQdyMkU2FEPPTiQ?timezone_id=Europe%2FMoscow