Крупное обновление Figma 2022 | Темная тема, вариативные шрифты, анимации и многое друг

При входе в редактор вы, наверно, уже видели оповещение о новых функциях от самой Figma. Их представили на днях на конференции Config 2022, а мы решили собрать их все тут для вас.

Темная тема

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

Что будет с фоном файлов

Когда вы создаете новые файлы, Figma устанавливает светлый или темный цвет фона в зависимости от текущей темы. В светлом режиме цвет будет светло-серым #F5F5F5, в темном почти черным — #1E1E1E. При переключении тем цвет фона уже созданных страниц надо будет менять вручную.

Как изменить тему

Через главное меню файла:

1. Откройте любой файл дизайна Figma, к которому у вас есть доступ;
2. Нажмите на иконку Figma в левом верхнем углу панели инструментов;
3. Перейдите в «Настройки» > «Тема»;
4. Выберите вариант из списка тем.

Через быстрые действия (так правда быстрее, попробуйте):

1. В любом файле Figma откройте меню быстрых действий через
   • Mac:⌘ Command /
   • Windows:Control /
2. Введите в поле поиска нужный запрос
   • Use dark mode
   • Use light mode
   • Use system theme

Вариативные шрифты в Figma

По этой ссылке Figma очень ярко и наглядно показали, в чем суть функции (плюс сможете немного поиграть с анимациями).

Что такое вариативные шрифты

В этой теме стоит понимать, что вариативные шрифты используют одну или несколько осей, предлагая намного больший диапазон стилей. Ось же определяет, насколько тонким или жирным может быть символ и дает больше возможностей для изменения какого-то атрибута. Например, наклона.

Пружинная анимация

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

Обо всех анимациях, которые предлагает использовать Figma можете почитать по ссылке.

Разделители

У обводки появились новые свойства — теперь ее можно делать отдельными штрихами, как на видео ниже. Это упростит создание разделителей между блоками.

Также можно будет отдельно менять толщину и цвет каждого штриха фигуры.

Больше внимания разработке

Обновленный Auto layout

Figma переосмыслила свой Auto layout, добавив новые параметры и изменив панель его свойств. Обновленный автоматический макет позволит создавать полностью адаптивные дизайны.

Появился параметр «Абсолютная позиция» в виде знака «+», который позволяет более гибко располагать элементы в Auto layout. Их теперь можно перемещать буквально как угодно и закреплять где угодно (как в случае с кнопкой «Fresh» на видео выше и примере с иконкой ниже).

Добавили выравнивание по базовой линии:

Обновленные свойства компонентов

Немного переработали и свойства компонентов. Теперь можно добавлять больше настроек одному компоненту, а значит, создавать меньше отдельных вариантов. Это упростит вашу дизайн-систему и процесс передачи макета разработчикам.

Другие приятные обновления в Figma

Защита паролем

Теперь можно контролировать, кто может получить доступ к файлам и прототипам при обмене ссылками, с помощью паролей.

Избранные файлы

Для быстрого доступа к самым важным проектам добавили «Избранное».

Генератор кода от Figma

Плагин Widget Code Generator позволяет создавать виджеты Figjam и легко переводить проекты в код. Этот плагин от Figma генерирует код, который можно скопировать и использовать для создания интерфейса виджета.

Что не поддерживает генератор кода

В плагине пока не поддерживаются такие функции:

• Маски;
• Локальные шрифты, которые вы загрузили в Figma (не шрифты Google);
• Несколько стилей текста в одном узле (плагин только сгенерирует первый стиль);
• Названия слоев с символами за пределами AZ и 0-9;
• Узлы с шириной или высотой менее 1 пикселя (будут округлены до 1 пикселя);
• Градиентные штрихи (поддерживаются в виджетах, но в настоящее время плагин не генерирует для них код).

Новые шорткаты для международных клавиатур

Сейчас Figma экспериментирует с японской, немецкой и французской раскладкой.

Запросы на внесение изменений

Для утверждения обновлений, обмена отзывами и запроса изменений добавили специальное состояние обзора. Можно будет делать запрос на внесение чего-то в макет, чтобы другой участник команды одобрил или не одобрил его.

Обновленный вид контура

Теперь на холсте показывается все — от скрытых объектов до внешних рамок.

Источник

Читайте также: В Figma появились голосовые чаты

Теги

• Новости
• Инструменты