Обновление Figma 2023: новые возможности и функции

Figma — популярный сервис для дизайна, который используется для создания веб-сайтов, мобильных приложений и различных прототипов. На конференции Config, которая состоялась 21 июня 2023 года, было представлено крупное обновление Figma. Среди новых возможностей — Dev Mode, переменные, расширенная функциональность прототипов, интеграции, искусственный интеллект и многое другое.

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

Dev Mode

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

Хотя область применения данной возможности весьма широка, использовать ее стоит с осторожностью. Dev Mode находится в бета-версии и не всегда работает корректно. Часто приходится редактировать результат или даже начинать с нуля.

Обновление Figma 2023: новые возможности и функции

Обновленный режим Inspect

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

Обновление Figma 2023: новые возможности и функции

Также теперь с помощью таких плагинов, как Anima и Figma to Code, можно получить готовый код в различных вариантах:

  • HTML
  • CSS
  • TailwindCSS
  • Flutter
  • SwiftUI (среда для разработки на iOS, iPadOS, WatchOS, tvOS и MacOS)
  • React (JSX)
  • TypeScript (TSX)
Обновление Figma 2023: новые возможности и функции

Кроме того, код можно сразу открыть в любой среде разработки (Visual Studio, Sublime Text, Atom) или скачать в виде архива, который содержит готовый шаблон. Для этого достаточно открыть файл в своем редакторе кода.

Плагины

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

Обновление Figma 2023: новые возможности и функции

Новый Auto Layout

В Auto Layout появились две новые функции — Wrap и Max/Min.

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

Обновление Figma 2023: новые возможности и функции
Обновление Figma 2023: новые возможности и функции

Max/Min позволяют устанавливать максимальные и минимальные значения ширины и высоты карточки, что позволит изменять размер контента в зависимости от ее размера.

Обновление Figma 2023: новые возможности и функции

Превью шрифтов

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

Обновление Figma 2023: новые возможности и функции

Статусы

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

Обновление Figma 2023: новые возможности и функции

Плагин для VS Code

С помощью плагина для VS Code возможен доступ к файлам дизайн-макета, просмотр и контроль изменений в них без выхода из редактора.

Обновление Figma 2023: новые возможности и функции

Что будет в следующем обновлении Figma?

Компания Figma приобрела Diagram — организацию, которая занималась разработкой AI-плагинов.

Обновление Figma 2023: новые возможности и функции

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

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

Круто, что теперь есть превью. Его отсутствие реально раньше раздражало. Хорошо, что разработчики наконец-то одумались)))

Точняк! Раньше мешало, что не были нормально видные отступы у блоков. Теперь такой проблемы нет.

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

Раньше можно было двигать элемент в Inspect, а как теперь это делать? Что-то не могу понять? У кого-то получается?