Figma — код и дизайн стали ближе

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

Figma — код и дизайн стали ближе

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

В результате возникает неизбежное противоречие между ними: то, что разработчику кажется сломанным, для дизайнера — просто творческое исследование. Что для разработчика структура, для дизайнера — препятствие.

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

Вчера утром на конференции Config Europe мы анонсировали несколько новых функций, которые объединят лучшее из обоих миров в дизайн-системы в Figma, сделав их ближе к коду и к интуитивно-понятному использованию.

Поддержка систем проектирования, отражающих вашу кодовую базу

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

Сегодня мы анонсировали Variants, Интерактивные компоненты и улучшения Auto Layout.

Объединение кода и компонентов дизайна с Variants (ожидается в ноябре)

Один компонент во front-end-коде обычно отображается в нескольких визуальных стилях для разных контекстов и состояний взаимодействия с пользователем. Например, кнопка может иметь основной и дополнительный стили, маленький и большой размеры, и даже разные версии для iOS и Android.

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

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

Drag and drop интерактивных компонентов в прототипы (запуск в январе)

Теперь, когда вы можете сгруппировать разные варианты одного компонента, вы могли задаться вопросом: «А будут ли работать эти интерактивные состояния с вашими прототипами?».

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

Интерактивные компоненты делают прототипирование намного более эффективным, позволяя дизайнерам добавлять взаимодействия между прототипами с помощью Variants, поэтому примеры сразу же «оживают» в режиме прототипирования.

Создавайте дизайн как код с помощью Auto Layout (ожидается в ноябре)

Появление в 2019 году Auto Layout привнесло в Figma определённые правила компоновки. Позволяя дизайнерам обновлять текст кнопки без ручной подгонки фрейма, Auto Layout позволяет им более легко создавать адаптивные интерфейсы. Но мы знали, что впереди нас ждёт ещё много работы, чтобы приблизить Auto Layout к блочным моделям CSS и Flexbox.

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

Делаем дизайн-системы более доступными в масштабе

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

Навигация по библиотекам с помощью Instance Swap Меню (уже доступно)

Раньше поиск нужного среди тысяч компонентов в Figma был той ещё задачкой. Для этого нужно было запомнить точное название компонента или пересмотреть огромный список всех компонентов.

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

Копипаст и код в новой вкладке Inspect (уже доступно)

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

Есть и новые разделы, показывающие соответствующие значения для Variants, цветов, теней, содержимого, типографики, границ и т.д. Разработчики могут щелкнуть мышью, чтобы скопировать любое значение в буфер обмена, включая целые сниппеты пар ключ: значение, чтобы легко вставлять эти данные в код.

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

155155
92 комментария

Фигма — лучшее, что случалось с разрабами и дизайнерами.
Новые фичи это супер круто, только вот бы им поправить бесконечное сжирание оперативки на маках (хз как на винде) — это какой-то гуглохром на максималках.

54
Ответить

Да нихуя не лучшее, фигма - это путь в никуда.

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

16
Ответить

Это в браузерной версии? В десктопном приложении вроде не жрет

Ответить

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

1
Ответить

На линуксе (в фаерфоксе) постоянно проблемы с ней - скроллинг печален, ноут улетает в небеса, если во время зума открыть фигму случается зачастую интересное :)

Ответить

а на винде иногда случаются маркетинговые ошибки и у бука расширяется оперативка за 2 тыщи рублей)

Ответить

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

Ответить