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. Бывают случаи, когда дизайнеру необходимо неограниченное пространство для работы, а бывают случаи, когда более структурированный подход, основанный на коде, является самым быстрым и эффективным способом его работы.

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

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

0
92 комментария
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Олег Павлов
 Эдакий гибрид специально для дизайнеров, которые любят верстать

Кажется, мы сейчас пилим продукт специально для вас :)
Потестить можно по ссылке https://quarkly.io (инвайт: BETA)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Олег Павлов

Круто :) Приглашаю в нашу ламповую телегу @quarklyapp, там можно оперативно нас о чем-то спросить, да и узнавать новости про апдейты

Ответить
Развернуть ветку
Kostas

Посмотри на этот проект: https://relate.app

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Kostas

Может есть на примете, что то достойное?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Артём Жигалин

В Quarkly мы планируем сделать возможность свободного позиционирования элементов на холсте, как отдельный тип страниц. Дальше на эту концепцию хорошо ляжет импорт страниц из figma и sketch + импорт значений (цвета/шрифты/фоны/...).
Что касается переменных ($base) для размеров, для озвученных целей служат единицы rem в css, которые можно использовать. Влиять на них можно устанавливая базовый размер шрифта в body. Но если будет необходимость более широкого использования и соберется большое количество кейсов, мы внедрим такие значения в тему. 
Остальное у нас есть). Пользуйтесь, пишите в телегу ваши потребности и желания.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Kostas

Еще вот такой есть: https://www.plasmic.app

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Tomas Zyong

Webflow не подходит под ваши задачи?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Пластиковое Окно

Не по продукту, а по трейлеру претензия - пиздец. Анимация не попадат в бит музыке, а это так было задумано, как я понимаю. Моментальное отвращение и недоверие к продукту из-за этого. Какой-то кривой закос на презентации то ли Apple, то ли Google, то ли Microsoft. Не надо так.

Ответить
Развернуть ветку
Олег Павлов

Нам бы бюджет презентации Apple, было бы получше, но спасибо за критику)

Ответить
Развернуть ветку
Пластиковое Окно

Ну и не надо было тогда косить под них и было бы лучше)

Ответить
Развернуть ветку
89 комментариев
Раскрывать всегда