Подробный обзор обновленных функций в Figma 2023

Подробный обзор обновленных функций в Figma 2023

21 июня 2023 CPO компании Figma Юки Ямашита открыл конференцию Config 2023.

Доклад посвящен большим обновлениям в Figma: переменные, усовершенствованные прототипы, режим devmode, AI и многое другое.

Содержание:

  • Переменные. Легкое масштабирование дизайн-системы;
  • Компоновка. Где Space Between? Функции min/max, wrap (автоматическая компоновка);
  • Усовершенствованные прототипы. Платно, но упростит жизнь и уменьшит трудочасы, потому что можно добавлять условия, переменные и выражения;
  • Режим devmode. Обнова с заботой о разработчиках и коммуникации между разработкой и дизайном.
  • Дизайн-система от Apple.

Переменные

В обновлении добавили числовые, цветовые, строковые, логические переменные, коллекции сглаживания, режимы определения области видимости и наследования.

Количество режимов, которые вы можете создать для каждой коллекции, зависит от вашего плана.

Задавайте переменные параметров с помощью маленькой кнопочки шестигранника.

Подробный обзор обновленных функций в Figma 2023

Управление всеми переменными находится в правой части экрана. Внутри каждого типа переменной есть дополнительные настройки.

Подробный обзор обновленных функций в Figma 2023

При помощи вариантов легко масштабировать дизайн систему. Например, можно задать цветовые переменные для режимов работы тёмной, светлой темы и в пару кликов менять интерфейс по заданным параметрам.

Компоновка

Автоматическая компоновка — это свойство, которое вы можете добавлять к рамкам и компонентам. Доступны две новые функции: wrap, max width/height и min width/height.

Wrap переносит элементы так, чтобы они равномерно распределялись по контейнеру.

Как это работает: расположить объекты в auto layout, задать контейнер и включить заворачивание. Объекты будут автоматически подстраиваться под заданные вами отступы.

Подробный обзор обновленных функций в Figma 2023

Автоматическое распределение объектов (Space Between) и варианты для отступов под стрелочкой.

А в значке из трех точек осталась возможность выбора порядка слоев при отрицательной компоновке, выравнивание текста по базовой линии и включение/выключение обводки в слой.

С помощью max/min можно добавить максимальную и минимальную ширину для фрейма.

Подробный обзор обновленных функций в Figma 2023

Настройки wrap и min/max позволяют готовить практически готовые для кода макеты.

Усовершенствованные прототипы

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

К сожалению, этот функционал доступен только на тарифном плане Professional и выше. Детальнее с возможностями можно ознакомиться в статье и видео.

Добавили встроенный предварительный просмотр прототипа для эффективной работы. Область предпросмотра можно перемещать и масштабировать.

Подробный обзор обновленных функций в Figma 2023

Режим devmode

Новое пространство, созданное для разработчиков — режим devmode.

Направлен упростить процесс подготовки файлов для производства. Улучшить коммуникацию между дизайнерами и разработчиками. Размеры, спецификации, стили, а также готовый код — все в одном месте.

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

Подробный обзор обновленных функций в Figma 2023

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

Подробный обзор обновленных функций в Figma 2023

А ещё добавили:

  • в режиме разработке не надо проваливаться внутрь слоев, чтобы захватить слой;

  • возможность поменять единицы измерения отличных от пикселей;

  • диаграмму из devtools;

  • различные плагины для разработчиков;

Создали расширение Figma VS Code, которое предоставляет доступ к своим файлам фигма. Демонстрирует макет в редакторе кода с возможностью просмотра всех страниц, стилей и спецификаций. Работает автозаполнение по названию, которое запускают автоматическую запись стилей объекта.

Подробный обзор обновленных функций в Figma 2023

Бесплатно до конца 2023 года.

AI

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

Dylan Field

Figma приобрела компанию Diagram для ускорения работы в области искусственного интеллекта.

Некоторые идеи о том, что может дать искусственный интеллект в Figma:

  • предложение вариантов для дизайн-систем;
  • создание элементов интерфейса в нескольких вариантов;
  • автоматизация различных действий плагинов;
  • описание кода для выбранного элемента в VS Code;
  • составление текста по контексту;

Дополнительно добавили возможности:

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

Может быть интересно

Компания Apple опубликовала официальный дизайн-кит в фигма.

Осенью прошлого года Figma заключили контракт соглашение о приобретении их компании Adobe. Но Европейский антимонопольный регулятор готовится начать расследование и сделка может развалиться. Пруф

Я в восторге от обновлений! Возможности делать прототипы через условия, переменные и математические выражения позволяют делать быстро супер точные прототипы, тестировать их и не вызывать лишних вопросов у аудитории.

Внедрение AI в функционал Figma просто киллер-фича. Прощай, белый лист и подключение к VPN.

И много других разных приятных фич от Figma очень радуют. Напишите в комментариях, какие функции вы очень ждали?

Подписывайтесь на мои соцсети: VK | Telegram. Вам может оказаться это полезным, потому что там я делюсь, созданными мною материалами: выводами из книг, продуктовыми фреймворки и выкладываю шаблоны.

1010
5 комментариев

Profeccional это что-то новое))

1
Ответить

Спасибо, исправила

Ответить

Жаль что продвинутое прототипирование доступно только в про пакете. Так то я юзаю протопай. В принципе фигме пришлось столько времени потратить что бы сбелать то что уже достурно в протопай.

Ответить

Кстати, АИ тулзы, это просто что будет в будущем или часть функционала доступна или в ближайшее время будет?

Ответить

Да, на презентации были озвучены намерения и демонстрация как это может быть. На данный момент они специально купили компанию Diagram, чтобы ускорить разработку, поэтому в ближайшем будущем

Ответить