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 комментария
Написать комментарий...
Nick Fomich

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

Ответить
Развернуть ветку
Илитный Иксперт

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

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

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

Ты таки немного однобоко оцениваешь. Да, стопроцентный онлайн зло, однако функционал фигмы весьма доставляет. Не в фашистский же скетч идти? Который только под мак. Про ФШ и вовсе молчу, ты зря кстати сказал что он шустро работает, вот не прав ты тут.

Ответить
Развернуть ветку
Илитный Иксперт

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

Который только под мак

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

Ну фш явно не для того чтобы там ui рисовать

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

Sketch рендерит все механизмами MacOs, там невозможен порт по определению. Sketch тоже жрет много ресурсов, в тех случаях, когда много мелких векторных элементов с зависимостями вообще Овер дохрена. Скетч во многих моментах хуже фигмы в плане удобства и логики и наоборот. Sketch сильно лучше сохраняет SVG файлы, структура правильнее, лучше подходит фронтовикам. Figma банально удобнее для командной работы, особенно для фронтов. Нет лучшего или худшего, есть задачи. В какихто проектах с ними лучше справляется скетч, в каких-то фигма. Ещё есть XD, и если нужно безгеморно работат в AE, то XD интереснее двух предыдущих

Ответить
Развернуть ветку
Илитный Иксперт
рендерит все механизмами MacOs, там невозможен порт по определению

Это не нерешаемая проблема

Ответить
Развернуть ветку
Mark Rapida Gromov

кроссплатформа убьет скетч, имхо. он станет тормознутым и тяжелым

Ответить
Развернуть ветку
Илитный Иксперт

Если грамотно написать (на qt, а не на электроне), то нет.

Вот отсутствие кроссплатформы в перспективе точно может убить

Ответить
Развернуть ветку
Mark Rapida Gromov

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

Ответить
Развернуть ветку
Илитный Иксперт

Да, камон, не неси херни. Каким образом кроссплатформа это все убьет? 

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