{ плагин }Warp to Shape ⧓ Envelope Distort🔗 Ссылка на плагинЧто делает: врисовывает одну векторную фигуру в форму другой. Настройки позволяют выбрать угол наклона и степень деформации.Цена: бесплатно

{ обновление }Figma nodeПока что Figma Weave всё ещё остаётся отдельным приложением (но авторизоваться в нём можно по логину и паролю от Фигмы), но его всё больше и больше интегрируют с Figma Design.С позавчерашнего дня интеграция стала еще теснее — фреймы из Фигмы теперь можно скопировать и вставить прямо в Weave — и там они будут преобразованы в ноды.Самое удобное тут то, что скопированные фреймы не теряют связи с Фигмой — все изменения, которые сделаны в Weave, отобразятся и в Фигме. И наоборот. Нужно только предварительно соединить их через кнопку Connect.Изменения из Weave в Фигму прилетают автоматически, а для принятия их из Фигмы в Weave нужно нажать кнопку Update.А еще, Weave tools теперь можно публиковать в комьюнити. К публикации доступны разные форматы, в том числе видео и 3D рендеры, но в Фигме можно использовать только растровые и векторные изображения.

{ совет дня }Фрейм с названием типа «Frame 12974830» — знакомо?По умолчанию Фигма переименовывает дубликаты фреймов с цифрами по нарастающей, но этого можно избежать, убрав галку в настройках:Main menu → Preferences → Rename duplicated layersАвтоматическое переименовывание может мешать при работе с компонентами: например, если создать компонент Frame 1 и скопировать его инстансы, то они будут иметь названия типа Frame 2, Frame 3 и т.д. После переименования главного компонента в, например Button, инстансы останутся со своими старыми именами и для того, чтобы присвоить им новые, нужно будет сделать Reset name. Отключение автоматического переименования эту проблему убирает.

{ плагин }Roughen Edges🔗 Ссылка на плагинЧто делает: добавляет векторным фигурам неровные края. В настройках можно выбрать степень деформации, а также режим как острых углов, так и сглаженных.Цена: бесплатно

{ плагин }Typography & Color Style GuideПрошло чуть больше года со дня релиза плагина, который я найбкодила, с тех пор им воспользовались уже более 2800 человек, я исправила довольно много багов и добавила улучшений, поэтому пишу о нём снова.🔗 Ссылка на плагинЧто делает: визуализирует локальные текстовые стили, цветовые стили и цветовые переменные. Отображает для каждого цвета сам цвет, его название, HEX и RGB код, а также описание, если оно есть.Отображает для каждого текстового стиля его название, название и размер шрифта, межстрочное и межбуквенное расстояние, а также описание, если оно есть.Плагин доступен на русском и английском языках, в темной и светлой темах.Если заметили баги или есть предложения по улучшению — пишите в комментарии.

{ обновление }Обновление генеративных плагинов и шейдеров:— Шейдеры теперь поддерживают анимацию, которая может реагировать в том числе на движение мыши.— Шейдеры и плагины теперь можно публиковать в комьюнити. И использовать плагины и шейдеры других пользователей в своих файлах, соответственно.— Код сгенерированного Агентом плагина или шейдера теперь можно посмотреть и скачать.— Сторонние агенты могут вносить изменения в генеративные плагины и шейдеры через MCP-сервер. Плюс шейдер можно перенести в React, скопировав фрейм, к которому он применен.» Напомню, что пока Агент в бете, им можно пользоваться без траты кредитов как на платном, так и на бесплатном тарифах.

{ обновление }ИИ Агент теперь можно открыть отдельным окном в десктопном приложении.А ещё Фигма расщедрилась и увеличила количество ИИ кредитов при покупке дополнительных пакетов: в тарифе Professional в 2 раза, а в тарифах Organization и Enterprise в 1.6 раз. Это относится как к месячной подписке, так и к покупке в формате pay-as-you-go.

{ обновление }И снова обновление на основе CSS: добавлены дополнительные параметры для Auto отступа в автолейауте.— Between (в CSS: justify-content: space-between;)Параметр по умолчанию, тут без изменений: объекты отдалены друг от друга на равные расстояния.— Evenly (в CSS: justify-content: space-evenly;)Параметр аналогичен Between, только помимо отступов между объектами, добавляются такие же отступы и от краёв фрейма.— Around (в CSS: justify-content: space-around;)Параметр аналогичен Evenly, только отступы между объектами в два раза больше, чем от краёв фрейма.

{ обновление }Теперь в Фигме есть ластик.А ещё улучшили работу с ведром и теперь можно заливать несколько областей сразу.

{ обновление }Сегодня, несмотря на то, что официальной новости об этом не нашлось, ИИ Агент стал доступен на бесплатных тарифах (проверяйте!). Но он пока всё ещё остаётся в бете.Пока непонятно, есть ли у него какие-то лимиты в сравнении с возможностями на платных тарифах, но в ходе небольшого тестирования они не обнаружились.Напомню, что с помощью Агента можно создавать макеты или редактировать уже созданные, а также генерировать шейдеры и плагины. Просто опишите задачу в диалоговом окне или нажмите на значок рядом с выделенным на холсте объектом.

{ обновление }В Фигму добавили то, о чём пользователи просили уже давно — папки. Организовывать файлы станет удобнее.Папки теперь заменяют проекты, и внутри одной папки могут находиться другие (до 10 уровней вложенности — это доступно на платных тарифах). Каждой папке можно назначить цвет.» Обновление для пользователей будет раскатываться постепенно в течение нескольких недель.

{ совет дня }Если вы не планируете использовать ИИ Агента, а отображение его значка на каждом фрейме только мешает, вы можете его скрыть:Main menu → Preferences → Show Agents on canvas

{ обновление }Что ещё было представлено на Конфиге:— 3D трансформации: возможность вращать изображения и фреймы по трехмерной оси.— Слои кода: этот инструмент объединяет дизайн и код, позволяя работать на холсте одновременно и с тем и с другим.— ИИ Агенты в FigJam и Slides» Все три инструмента на данный момент находятся в лимитированной бете, запросить ранний доступ к ним можно, заполнив заявку.А еще, ИИ Агент теперь умеет генерировать плагины прямо внутри Фигмы. И пока эта функция в бете, кредиты за неё расходоваться не будут.

{ обновление }Продолжая тему Конфига: ToolsВ левой боковой панели появилась новая кнопка с доступом как к привычным плагинам и виджетам, так и к новым инструментам — Шейдерам и Инструментам Weave.— ШейдерыДелятся на два типа: заливка (паттерны, градиенты, текстуры) и эффекты (размытие, искажение, зерно, пикселизация, настройка цвета).Шейдер можно выбрать из библиотеки Фигмы или создать свой собственный с помощью встроенного Агента — это доступно на платных тарифах и пока в бете, ИИ кредиты на это расходоваться не будут, поэтому стоит воспользоваться этой возможностью.Шейдер можно применить как к заливке, так и к обводке.Настроенные Шейдеры можно добавить в библиотеку стилей в качестве заливки или эффекта.— Weave ToolsЭти инструменты доступны на платных тарифах и тем, у кого есть доступ к ИИ в Фигме. В библиотеке представлено более 20 готовых инструментов, которые помогут с редактированием изображений или с созданием новых.Например, можно создать мокап, стикер, марку, извлечь из картинки цвета или сгенерировать векторное изображение на основе растрового.Пока инструменты в бете, за их использование ИИ кредиты также расходоваться не будут.

{ обновление } { урок }На прошедшем Конфиге Фигма представила очередные обновления. Расскажу о них отдельными постами, а начну с нового режима — Motion.Теперь в Фигме можно создавать анимацию без использования плагинов. Это может быть как небольшой спиннер для сайта, так и целая видеопрезентация дизайна для своего кейса.Как это работаетПри выборе режима Motion, внизу откроется временная шкала, а в правой панели напротив свойств появится возможность добавлять ключевые кадры.Для анимации доступны:— Позиция (Position)— Масштаб (Scale)— Поворот (Rotation)— Размер (Size)— Прозрачность (Opacity)— Путь (Path)Также из библиотеки можно выбрать уже готовый пресет.┈┈┈┈Анимацию можно создать вручную, а можно поручить эту работу Агенту, который через заданный промпт сделает это за вас (опция доступна на платных планах).┈┈┈┈Фрейм с анимацией можно преобразовать в компонент и использовать его сразу в нескольких местах. Анимация отображается и в режиме прототипа.Проигрывание можно настроить на однократное (Play once), зацикленное (Loop) или туда-обратно (Ping-pong).Для экспорта доступны видеоформаты (MP4, WebM), GIF и анимированный SVG. Код анимации для копирования доступен в режиме Dev.Прикрепляю мини-урок по базовой анимации.

{ обновление }Работать с большим количеством открытых файлов стало удобнее: вкладки теперь можно группировать и каждой группе задать заголовок и цвет.

{ обновление }Новость для тех, у кого есть профиль в комьюнити Фигмы: его функционал расширили и сделали редизайн.В профиле можно:— Добавить больше информации о себе: должность, образование, опыт работы, ссылки на популярные соцсети— Выбрать из списка инструменты, которыми владеете— Рассказать о себе, прикрепив изображения (максимум 3)— Добавить ссылку на портфолио: скриншот сайта будет оформлен в рамку выбранного устройства (ноутбук, телефон или Макиншот), также можно загрузить своё изображение— Добавить произвольные ссылки (максимум 4) на свои лучшие работы или личные проекты— В списке ресурсов можно выбрать и закрепить избранное

{ обновление }Фигма выпустила собственное расширение для Хрома, с помощью которого можно скопировать любой сайт (или выделенный элемент на сайте) в файл по слоям.🔗 Ссылка на расширение

{ совет дня }Что делать, когда с собой только телефон, но нужно срочно внести небольшие правки в макет или экспортировать изображение?У Фигмы нет полноценного мобильного приложения, а если открыть figma.com с телефона, то файл будет доступен только для просмотра.Решение есть: включить в браузере версию сайта для ПК. Как это сделать показано на примере Хрома выше.

{ обновление }Настройки слотов расширили:— Теперь можно задать минимальное и максимальное количество объектов, которое может содержать слот.— Можно ограничить содержание слота только определенными инстансами, добавив их в список Preferred instances.— Если выбрать By default, display empty slot, то пустой слот будет виден на холсте.— Если выбрать By default, fill items on slot's counter axis, то всем объектам внутри слота будет назначен fill по одной стороне, в зависимости от направления автолейаута у слота.Например, если у слота стоит вертикальное направление, то fill объектам внутри будет назначен по ширине.┈┈┈┈При этом, даже если слот ограничить максимальным количеством объектов и только выбранными инстансами, в него всё равно можно добавить и большее количество объектов и не только из выбранного списка. Если это произойдет, Figma отобразит уведомление о том, что лимиты были нарушены, и укажет, где именно.