Больше маленьких нововведений и оптимизаций, которые сильно улучшат твою работу в Figma и FigJam! #новое Полный список:

1. Поддерживается вставка фото с iPhone в формате HEIC
2. Отзывчивость ввода: больше не будет задержек при наборе текста
3. Поддерживается ввод альтернативных символов на macOS (при долгом нажатии буквы)
4. Стиль списка не будет меняться при изменении отдельных строк
5. Кнопки Home/End (fn + ←→) перемещают каретку в начало/конец текста
6. Больше нет промежуточного экрана «Leaving Figma» при открытии ссылок
7. Векторные сегменты одного объекта поддерживают заливки разных цветов 🎨
8. Переименовывай любые слои через Cmd/Ctrl + R при выключенном UI (Cmd/Ctrl + \)
9. Скоро скриншоты с Retina перестанут вставляться увеличенными в два раза
10. Deep Select (Cmd/Ctrl + клик) помогает быстро выбрать основной фрейм, раньше это было возможно сделать только кликом по его имени
11. Меню быстрой вставки компонентов (Shift + i) позволяет искать компоненты только по одной библиотеке, а не всем сразу
12. Быстро публикуй выбранные компоненты через контекстное меню или правую панель
13. Поиск в меню публикации библиотеки 🔥
14. Чёрные иконки для библиотек в файловом менеджере (синие для обычных файлов)
15. Быстрый переход к наборам вариантов с конфликтующими значениями из меню публикации библиотеки
16. Команда «Remove from library» в контекстном меню в панели Assets переименована в «Hide when publishing»
17. Кнопка «Return to instance» больше не прячется при выделении внутренних слоёв компонента
18. Быстро открывай библиотеки из настроек в Figma Organization
19. Корректный экспорт обводки основного фрейма в SVG. Ты ещё читаешь?
20. Более гибкое изменение размера шейпов в FigJam
21. Копируй ссылку на любой объект в FigJam
22. Красный теперь красный, а не оранжевый
23. Улучшена видимость выделения текста на синем фоне
24. Hide/Show UI и Unlock all objects опции добавлены в меню Quick Actions в FigJam
25. Больше горячих клавиш показываются при наведении на инструменты в FigJam
26. Нажимай Enter для перехода на новую строку в коннекторах
27. Объекты в FigJam выравниваются по сетке во время перемещения и изменения размера 😍
28. Встроенные библиотеки FigJam показываются в списке ниже твоих командных

С картинками: https://figma.fun/0KOIV6

Присоединяйся завтра к вебинару «Figma like the Pros» в 20:00 по Москве! 😎 Узнай полезные советы по работе в Figma из первых рук — от людей, которые её создают и знают вдоль и поперёк. Передача макетов разработчикам, малоизвестные сочетания клавиш, создание сложных прототипов и другие интересные темы ждут тебя! #мероприятия

👉 Регистрация обязательна: https://figma.zoom.us/webinar/register/WN_38Zj7sEMRFG3nG2_tcp-xA?timezone_id=Europe%2FMoscow

FigJam вышел из beta и стал платным: давай разберёмся, что это значит! #новое 🤑 Если коротко, то несмотря на то, что FigJam и Figma существуют в одном пространстве, оплачиваются они независимо друг от друга. При этом все платные и бесплатные особенности Figma работают точно также и в FigJam. И если твоя команда не пользуется FigJam совместно, для тебя ничего не поменяется.

Использование FigJam в Starter командах с бесконечным числом редакторов и в личных Drafts бесплатно с теми же ограничениями, как и для Figma. В Professional, Organization и (новом) Enterprise тарифах оплата подобно Figma происходит за каждого редактора FigJam.

Редакторы FigJam не зависят от редакторов Figma, то есть если один участник команды имеет доступ к редактированию только Figma файлов, то оплата за FigJam за него списываться не будет, и наоборот. А если член команды имеет доступ к редактированию в обоих инструментах, будет необходимо платить и за Figma, и за FigJam. Всем этим можно управлять в настройках команды.

Подробнее про тарифы на FigJam: https://www.figma.com/pricing/#figjam-for-whiteboarding

🆕 Нижний и верхний индекс (subscript и superscript) теперь поддерживается для всех шрифтов и символов, а не только редких шрифтов, у которых есть OpenType фича для этого. Как и раньше, кнопки для включения индексов находятся в панели Type Details. #новое

Figma будет продолжать стараться использовать «типографически правильные» символы при условии, что в тексте используются только поддерживаемые шрифтом символы. Если же введены символы, уменьшенных версий которых нет в шрифте, будет использоваться искусственный верхний или нижний индекс: обычные символы уменьшаются и перемещаются к низу или верху строки. (Обновление вышло пару недель назад.)

🆕 Figma наконец-то поддерживает письмо справа налево нативно! #новое Письмо справа налево используется в арабском, иврите, персидском, урду и синдхи и многих других языках. Направление письма Figma определяет автоматически, но при необходимости можно его переключить в панели Type Details. В одном текстовом блоке может использоваться текст и слева направо и справа налево. (Обновление вышло на прошлой неделе.)

🆕 Новые более удобные и мультиплатформенные сочетания клавиш для часто используемых команд:

1. Вставить и заменить выделенные объекты: Cmd+Shift+R или Ctrl+Shift+R
2. Режим аутлайнов (Outlines), также известный как «помогите я что-то нажал и всё стало вот так, отмена не помогает»: Shift+O
3. Показать/скрыть сетки: Shift+G
4. Показать/скрыть пиксельную сетку: Shift+’ (Shift+Э)
5. Режим растрового предпросмотра (Pixel Preview): Cmd+Shift+P или Ctrl+Shift+P
6. Подняться на уровень выше: \ (обратный слеш или Ё в русской раскладке), альтернатива Shift + Enter

Старые сочетания клавиш для этих команд продолжают поддерживаться. #новое Также напоминаю, что все горячие клавиши и команды без них можно найти в меню поиска Cmd/Ctrl + /

Config 24 часа: 10-11 мая пройдёт ежегодная конференция Figma! Целые сутки выступлений от 100+ (!!) интересных спикеров и команды Figma! Начало в 18:00 МСК.

Традиционно Дилан Филд откроет конференцию презентацией новых ооочень долгожданных фич! Регистрируйся и не пропусти: https://config.figma.com/. Записи всех выступлений будут доступны через неделю после конференции. #config

Ох, так не терпится рассказать вам сегодня про все обновления! Будет круто, не пропусти трансляцию, регистрируйся: https://config.figma.com/

Начало в 18:00 по Москве сегодня! #config

🆕 Auto Layout V4 уже тут! Новинки: абсолютное позиционирование (нулевые фреймы больше не нужны 🔥), выбор стандартного и обратного порядка слоёв, выравнивание текстов по базовой линии, отрицательные отступы между элементами, настройка для включения обводки в размер фрейма (аналогично box-sizing в CSS) и управление спейсингом прямо на холсте. #новое Видео про обновление: https://youtu.be/floQKLsWAy4

😍 Личная рекомендация: используй плагин Pro Layout Panel (уже обновлён для поддержки всех новых фич) — в отличие от нативного интерфейса, он позволяет управлять всеми настройками авто лейаута за один клик! Быстрее не бывает! 🏃‍♀️ https://figma.fun/alpro

🆕 Поддержка вариативных шрифтов! #новое Устанавливай любимые шрифты поддерживающие эту функцию, открывай панель Type Details и получи доступ к тонкой настройке шрифта: https://help.figma.com/hc/en-us/articles/5579502031511-Use-variable-fonts

🆕 Отдельная обводка с разных сторон — больше не нужны хаки с линиями или тенями, можно добавлять разную обводку только на отдельные стороны объекта. #новое https://help.figma.com/hc/en-us/articles/360049283914-Apply-and-adjust-stroke-properties#individual

🆕 Новый тип анимации перехода: Spring! Для более естественных или просто весёлых движений. 😎 #новое Доступно несколько пресетов или можно настроить совершенно кастомную функцию движения. Вместе с этим немного поменялась сама панель анимации — перезагружай Figma и пробуй!

https://www.figma.com/community/file/1100581821937139565

🆕 Свойства компонентов: не только ещё одна возможность приблизить макеты к реализации в коде, но и упрощение одновременно и для стандартизации, и для кастомизации компонентов! 🤯 #новое

Текст, видимость слоёв и готовые оверрайды в компонентах можно выносить в правую панель для быстрого доступа в инстансах. Лучший способ примерить обновку — попрактиковаться и поиграться в обучающем файле-песочнице: https://www.figma.com/community/file/1100581138025393004

🆕 Тёмная тема: для любителей ночной работы! Дождались! Многолетние мольбы сообщества были услышаны! ⚫ #новое Активируется в меню Preferences → Theme в главном меню Figma (можно также найти в поиске Cmd/Ctrl + / — главное не забудь перезагрузить Figma, чтобы получить обновление). Также напоминаю, что для «полного погружения» можно сменить цвет фона страниц в правой панели. https://help.figma.com/hc/en-us/articles/5576781786647-Change-themes-in-Figma

⚫ Тебе наверняка интересно, почему на реализацию dark mode ушло так много времени — продолжай смотреть Config, одно из выступлений от команды Figma будет как раз про это.

🆕 Почувствуй себя на виртуальной сцене, пригласив других следовать за тобой в новом режиме Spotlight! 👑 #новое

Вместо того, чтобы просить других нажать на твою аватарку (порой даже такая простая с виду задача вызывает сложности), можно направить на себя виртуальный прожектор, нажав в верхней панели на свою аватарку и кнопку «Spotlight me». Все, кто находится в файле автоматически начнут «следовать» за тобой по файлу. Вечеринка курсоров! 🎉 https://help.figma.com/hc/en-us/articles/5025214483351-Facilitate-meetings-with-spotlight

🆕 Полный список обновлений Figma, запущенных на Config 2022:
• Авто лейаут 4.0
• Свойства компонентов (component props)
• Вариативные шрифты
• Отдельные обводки с разных сторон
• Анимация Spring
• Тёмная тема
• Режим спотлайт для мультиплеера

👑 И несколько небольших:
• Защита файла паролем (тариф Pro и выше)
• Быстрое выделение идентичных объектов во всех вариантах (иконка мишени под объектом внутри варианта или Cmd/Ctrl + Alt + A)
• Улучшенный режим просмотра контуров (Outline Shift + O)
• У треугольников три угла
• Светлая тема стала более контрастной
• В ветках (branches) можно обозначать текущий статус
• Изменён дизайн панели Smart Animate
• Обрезка текста с многоточием

Все обновления доступны прямо сейчас. #новое Посмотри презентацию Дилана: https://www.youtube.com/watch?v=JUTFghsG8nI

Сегодня в 13:00 по Москве пройдёт вебинар про DesignOps (практики управления дизайн командами и процессами). 🤗 #мероприятия

Лиды Design Operations команд расскажут о том, что это такое, с чем это едят и как Design Ops обеспечивают успех дизайн команд. Регистрируйся: https://figma.zoom.us/webinar/register/3616491500960/WN_zM_lSg5XRjqFDJQmmvcnlQ?timezone_id=Europe%2FMoscow

По просьбам участников сообщества я создал чат для обсуждения этой активно развивающейся области, присоединяйся к обсуждению: @designopschat

Как добавить эффекты к прозрачным объектам в Figma? Создаём белую заливку (можно написать просто «f» в поле цвета), ставим метод наложения Multiply или Darken (именно в настройках цвета заливки). Готово — можно добавлять Background blur и тени к прозрачному объекту! 🔥 #обучение

Как это работает: режим наложения Multiply перемножает каждый компонент R, G и B фонового изображения (A) с соответствующим компонентом цвета накладываемого слоя (B). Если B = 1 (белый), то A × B = A × 1 = A, следовательно цвет фона остаётся без изменений, заливка не видна.

Больше не нужно заливок с непрозрачностью 1% или 0.01%. Бежим добавлять такой стиль в дизайн системы и UI киты! Только не забудь написать понятное описание стиля для других дизайнеров и разработчиков. Нашёл этот метод в файле Material You & Android 12 от Eduardo Pratti: https://www.figma.com/@pratti, не мог не поделиться.

Виджеты в Figma и новая панель плагинов! #новое

Зайдя в Figma сегодня ты заметишь в панели инструментов новое «меню ресурсов»: через него можно искать плагины и виджеты, а также вставлять компоненты. Вставка компонентов открывается через привычный шорткат Shift + I, а вот быстро открыть панель плагинов без мыши пока можно только через поиск: жмякни Cmd/Ctrl + /, введи “fm” (Find More Plugins) и нажми Enter. Но советую настроить свой шорткат сторонними программами (я использую Alt + 4) и проголосовать за предложение добавить его нативно: https://figma.fun/6GR2Re. Также для удобства можно закрепить панель, чтобы она всё время была открыта.

Главное обновление — плагины больше не нужно устанавливать, и не нужно заходить в Figma Community, чтобы найти их. Установленные плагины теперь больше играют роль «любимых», чтобы всегда держать их под рукой. А все остальные можно найти через поиск в меню ресурсов.

Также в Figma теперь доступны виджеты: интерактивные объекты, которые живут на холсте и позволяют тебе и твоим коллегам взаимодействовать с собой. Найди виджеты для своей работы в новой панели ресурсов!

Список полезных объектов, которые можно копировать из FigJam в Figma пополнился Разделами (Sections). До этого момента, по-моему, в списке были только стрелки. 😅 #новое А чтобы не создавать новые файлы FigJam просто чтоб скопировать этот объект, можно использовать плагин: https://figma.fun/MEx5ff

Разделы — это удобные контейнеры для объединения относящихся друг к другу объектов на холсте. Прототипы и компоненты в Разделах продолжают работать как обычно, ведь Разделы созданы для удобного структурирования Figma файлов, а не для использования в составе дизайна. Секции можно помещать друг в друга и их заголовки всегда видны, в отличие от фреймов. Экспортированные секции также сохраняют заголовки.