Config 2023: 15 важных обновлений Figma

Пропустили конференцию Config 2023? Не расстраивайтесь! Сегодня вкратце расскажем вам обо всех обновлениях, которые, сделают ваш опыт проектирования в Figma более удобным и эффективным.

1. Режим Dev Mode

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

Dev Mode позволяет разработчикам чувствовать себя на платформе как дома, ведь Figma традиционно рассматривалась как инструмент для дизайнеров. Бета-версия Dev Mode будет доступна бесплатно для всех пользователей до конца 2023 года.

2. Подключение к другим инструментам и кодовым базам

Dev Mode предоставляет возможность интеграции с другими инструментами и кодовыми базами, включая такие популярные, как Jira, GitHub и Storybook. Это позволяет продуктовым командам и разработчикам оптимизировать свой рабочий процесс.

3. Отслеживайте, что должно быть запущено в разработку

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

4. Просматривайте дизайн параллельно с кодом в VS Code

С помощью расширения Figma для редактора Visual Studio Code разработчики могут просматривать ваши макеты прямо там, где они пишут код. Это еще больше сближает проектирование и разработку, сводя к минимуму необходимость переключаться между различными инструментами.

Используйте это расширение, чтобы:

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

И все это не покидая среду разработки!

5. Переменные

Большое обновление! Переменные позволяют оптимизировать процесс проектирования и повысить его эффективность. Они способны хранить цвета, текст, числовые и булевы (true/false) значения, которые можно повторно использовать в макете.

6. Поддержка псевдонимов (aliasing) в переменных

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

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

7. Определение области применения переменных

Область применения переменной (или scope) — это контекст, в котором она доступна. В рамках дизайн-системы это может быть конкретный проект, страница или даже отдельный компонент. Функция упрощает работу с дизайн-системой и помогает быстро понять, где применяется та или иная переменная.

Например, у вас есть переменная, определяющая размер внутреннего отступа (padding), которая используется во всем проекте. Это глобальная переменная. Но внутри конкретного компонента вы хотите сделать отступ другим. Вы можете создать новую переменную с тем же именем, но применимую только к этому компоненту. Когда вы ссылаетесь на переменную padding внутри него, она использует значение, привязанное к компоненту. Когда вы ссылаетесь на переменную padding где-то еще, она использует глобальное значение.

8. Режимы переменных с различными значениями

Режимы позволяют определить набор переменных для каждой темы. Например, цветовые переменные для светлой темы — light-background и light-text, и соответствующие переменные для темной темы — dark-background и dark-text.

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

Когда все переменные заданы, вы можете быстро переключаться между темами в панели справа (раздел Layer). Например, если вы хотите посмотреть, как будет выглядеть ваш дизайн в темном режиме, просто выберите нужную опцию в выпадающем списке, и все элементы, свойства которых заданы при помощи переменных, обновятся соответствующим образом.

9. Поддержка плагинов и REST API

Команда Figma обновила API-документацию, чтобы расширить функциональность переменных и упростить масштабирование дизайн-систем. 

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

Поддержка REST API позволяет интегрировать дизайн, созданный в Figma, с другими системами через интерфейс прикладного программирования (API). Разработчики могут получить доступ к переменным и манипулировать ими извне, а также использовать внешние данные для обновления переменных в Figma.

10. Продвинутое прототипирование

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

• Переменные, как мы уже знаем, могут содержать текст, цвета, числовые или булевы (true/false) значения. Используйте их в вашем прототипе для создания более динамичных взаимодействий. Например, переменная может хранить количество нажатий на кнопку или текущее состояние тумблера.

• Условия позволяют выстраивать логику взаимодействия. Вы можете задавать различные результаты на основе текущего значения переменной. Например, создать правило, которое гласит: "Если кнопка была нажата более 5 раз, перейти на другой экран".

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

11. Контекстное редактирование и встроенный предварительный просмотр

Эти функции позволяют редактировать и просматривать прототипы на одном экране, что ускоряет процесс проектирования.

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

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

12. Улучшенный Auto Layout

Теперь элементы Auto Layout способны подстраиваться под размер контейнера, как никогда раньше.

• Функция Wrap (Перенос) позволяет переносить элементы дизайна, как текст. Если у вас есть группа элементов, расположенных горизонтально, и она стала слишком широкой для родительского фрейма, элементы автоматически перенесутся на следующую строку. Это особенно полезно при проектировании компонентов, которые должны адаптироваться к различным размерам экрана или разному количеству контента, например, тегов в списке тегов или карточек, выстроенных по сетке.

• Функция Min/max height/width (Минимальная или максимальная высота или ширина) помогает поддерживать согласованность и целостность дизайна. Установив соответствующие ограничения, вы будете уверены, что элемент никогда не станет слишком маленьким (что может сделать его нечитаемым или некликабельным) или слишком большим (что может нарушить лейаут или перекрыть другие элементы) независимо от контента, который он содержит, или размера экрана, на котором он открыт.

13. Обновленный инструмент выбора шрифтов

Обновленный инструмент выбора шрифтов помогает дизайнерам находить идеальные шрифты быстрее и проще, чем когда-либо.

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

• Фильтрация позволяет сократить список шрифтов по определенным критериям, например, serif (с засечками), sans-serif (без засечек), monospace (моноширинный) и др. Это полезно, когда вы не уверены, какой шрифт использовать, и хотите сравнить несколько вариантов из определенной категории. Так процесс выбора подходящего шрифта становится менее утомительным и более узконаправленным.

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

14. Обновления в браузере файлов

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

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

Кроме того, появился новый раздел "Общие файлы" (Shared files). Здесь сгруппированы все файлы, которые находятся в совместном доступе. Это настоящий подарок для пользователей, которые часто сотрудничают с другими командами, поскольку им больше не придется рыться в собственных файлах, чтобы найти нужные.

15. Figma приобретает Diagram!

Чтобы ускорить развитие AI-функционала, Figma приобрела компанию Diagram!

Очевидно, что приобретение является важным шагом на пути к расширению AI-возможностей инструмента, и я думаю, что с учетом того, в каком направлении сейчас движется технологическая индустрия, очевидно, что не за горами то время, когда Figma представит нам новые функции на основе искусственного интеллекта.