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

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

Конечно, UI3 - это не только интерфейс и визуальный дизайн, но и более глубокие рабочие процессы и поведение, которые он обеспечивает. В основе этих изменений лежит решение четырех основных проблем:

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

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

• Адаптируйтесь к меняющейся природе дизайна: Сегодня существуют совершенно новые способы взаимодействия с дизайном, которых не было еще десять лет назад. Например, все больше людей используют многоразовые компоненты и изучают генеративный ИИ. Мы знаем, что Figma должна адаптироваться к этому миру и предлагать более высокие уровни абстракции, чтобы у дизайнеров были строительные блоки, а не просто пиксели.
  
  

• Заложите основу для будущего Figma: Сближая дизайн и код с помощью Dev Mode и повышая эффективность с помощью Figma AI, мы также представляем новые продукты, такие как Figma Slides. Мы хотели заложить основу для создания целостного семейства инструментов Figma.

  
  

Внутри обновленного интерфейса Figma

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

Очистите сцену для вашей работы

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

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

Приоритетные функции, которые имеют наибольшее значение

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

Еще одно важное изменение: Все параметры макета, включая ширину, высоту и авторазметку, теперь объединены в одну панель. Это отличается от типичной панели x, y, w, h в большинстве инструментов, но более точно соответствует тому, как продукты создаются в коде. Хотя мы предполагали, что ширина и высота должны иметь приоритет над позициями x и y, раннее тестирование показало, что такая инверсия слишком сильно нарушает мышечную память. Поэтому мы адаптировали авторазметку, ширину и высоту, но оставили их ниже x и y, чтобы поддержать давних пользователей.

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

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

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

Интерфейс для удобства использования, а не для украшения

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

«Поддержание обширной системы иконок - это балансирование между обеспечением визуальной согласованности и передачей чрезвычайно сложных идей в зачастую абстрактной манере», - говорит дизайнер Figma Тим Ван Дамм.

В UI3 появились фоны для вводимых данных, границы вокруг выпадающих элементов, закругленные углы и 200 выразительных иконок, нарисованных вручную дизайнером Тимом Ван Даммом. Они служат визуальным объяснением того, как взаимодействовать с платформой. Они адаптируются к вашим потребностям. Включите ярлыки, чтобы быстро понять, что делает каждый элемент управления, или отключите их, чтобы сосредоточиться на работе.

Ярлыки свойств можно удалить для более наглядного представления.

Иконки разработаны дизайнером Figma Тимом Ван Даммом.

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

В одной из итераций мы сократили сетку выравнивания в Auto Layout, чтобы упростить общий вид панели и сделать ее более доступной. Но это оказалось не совсем удачным решением. Сетка слишком сильно перемещалась, поэтому мы вернулись к первоначальному дизайну, чтобы сохранить мышечную память для опытных пользователей, но обновили визуальный стиль, чтобы он стал более доступным.

Предыдущая панель авторазметки

Клик в сетке авторазметки

Наша финальная панель UI3 Auto Layout

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

Поддержка набора инструментов Figma

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

UI3 создает основу для целостного семейства инструментов Figma.

Эволюция в соответствии с меняющимся характером дизайна

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

Дизайн и инструменты, которые мы используем, постоянно развиваются. Если раньше мы работали с пикселями, то теперь мы будем работать на более высоких уровнях абстракции. Этот редизайн отражает этот сдвиг, оптимизируя рабочие процессы и уменьшая трение между воображением и реальностью. По мере появления искусственного интеллекта и других технологий они обладают огромным потенциалом для преобразования наших рабочих процессов. И поскольку дизайн продолжает развиваться - от одиночного к совместному, от статичного к интерактивному, от пикселей к паттернам - мы будем рядом с вами, адаптируясь и развиваясь во имя вашей лучшей работы. Этот редизайн - обещание: оставаться верными нашим корням и в то же время идти в будущее.

Источник: https://www.figma.com/blog/behind-our-redesign-ui3/