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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#figma