Figma

Кто смотрел Config Europe #config, тот уже ждёт не дождётся выхода анонсированных там интерактивных компонентов. Возможность создавать переходы между компонентами для реализации интерактива внутри страниц (без использования оверлеев, как это делается сейчас) уже почти готова, однако команде нужно больше времени, чтобы всё довести до ума. ✨

Interactive Components будут доступны в открытой Beta в ближайшие несколько недель — можно будет выбрать включать эту функцию или нет. Естественно, как и в любой бета, тут будут возможны баги. Мы сообщим, когда бета станет доступна. ❤️ #анонс

Улучшены упоминания людей в комментариях в Figma Organization! Начни вводить имя человека как обычно, начиная с “@”. В начале списка будут показываться более релевантные контакты — те, которые упоминались тобой в последнее время. #новое

Разрабатываешь плагины или публикуешь файлы в Figma Community в команде, а не в одиночку? Хочешь устроить коллаборацию с кем-то? При публикации файла или плагина появилась возможность указывать до 10 соавторов! Достаточно указать их хендлы в Community в поле под твоим именем и все они будут отображаться на странице опубликованного ресурса. ✨

Подробнее о публикации ресурсов в Figma Community: https://help.figma.com/hc/en-us/articles/360040035974-Publish-a-file-to-the-Community #новое

Файлы Figma теперь можно встраивать в Asana! Держи всю команду в курсе всех последних изменений в файлах. Можно добавить как просмотр всего файла, так и определённого фрейма, если выбрать его, когда копируешь ссылку на файл. #новое

Подробнее о встраивании файлов Figma в Asana: https://help.figma.com/hc/en-us/articles/360061900153

Раньше при публикации обновления библиотеки текст с описанием сохранялся только в истории версий файла. Теперь он также будет показываться в окне принятия обновлений стилей и компонентов — твоим коллегам будет легче понять изменения! 🔍

И ещё одно маленькое обновление: в Figma Organization появилась возможность глобально включить или отключить окно темплейтов при создании файла. #новое

Всем продуктивной рабочей недели! 🤗

Недавно был обновлён файл дизайн системы 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 и пробуй новинку! #новое

Напомним, что группировка стилей создаётся через слеш ( / ) в названии. Например, стили с названиями “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 #плагины

Проблемы при импорте компонентов с Auto Layout из библиотеки? Есть решение: зайди в файл библиотеки и найди в поиске новую команду “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

Группа Friends of Figma недавно появилась в Москве, и 11 декабря в 19:00 пройдёт первое мероприятие! Приглашаются все независимо от города: оно будет проходить онлайн! 💥 Спикеры расскажут про новинки Auto Layout и Variants и покажут лайфхаки с ними. Организаторы расскажут о планах на следующие события и развитие сообщества в целом.

➡️ Регистрируйся: https://friends.figma.com/events/details/figma-moscow-presents-variants-new-auto-layouts/

Тоже хочешь создать сообщество при поддержке Figma в своём городе или помогать уже существующим? Узнай как по ссылке: https://friends.figma.com/become-a-community-advocate/ ☺️ #friendsoffigma

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

Только начинаешь осваивать Figma и знакомиться с дизайн инструментами в целом? Тогда этот плейлист из четырёх видео для тебя! 🤗 Узнай о процессе дизайна в 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. #обучение

🆕 Больше улучшений панели Inspect для разработчиков! 👾 Добавляй к компонентам не только описание, но и ссылку на документацию связанную с этим компонентом, которую разработчики смогут открыть кнопкой “View documentation”. Также им доступна вся информация о вариантах: какие параметры выбраны для данного компонента. Её можно скопировать в один клик в удобном формате. Вдобавок во вкладке Inspect теперь можно легко найти родительский компонент и перейти к нему. #новое

🤓 Полное описание функций вкладки Inspect: https://help.figma.com/hc/en-us/articles/360055203533