Figma оставляет дизайнерам все меньше места для творчества
Зато проекты теперь можно делать быстрее - на пару с роботом
Создатели Figma презентовали 26 июня новую версию редактора — Config 2024. Главный посыл — многое из того, что вы делали вручную, теперь автоматизировано. А многие опции вообще отданы на откуп ИИ. На официальном сайте весьма эффектно демонстрируется, как Figma может быстро создать дизайн приложения для ресторана, включая меню, панель вкладок и даже кнопки для сервисов доставки.
Многие выпускники онлайн-института дизайна Vill. работают с этим популярным редактором. Разбираем наиболее интересные нововведения и слушаем мнения дизайнеров по поводу их значимости.
- ИИ теперь умеет автоматически присваивать имена слоям, а затем упорядочивает и быстро находит их. Всё делается по одному клику.
- Статические макеты по клику на кнопку Make Prototype ассистент превращает в интерактивные логотипы.
- Можно создавать и изменять текстовый контент прямо в макетах, уходя от не любимой многими «рыбы». Кстати, текст можно переводить на любой язык с помощью специального меню.
- Полезная опция удаления фона из макета позволяет сделать это одним кликом мыши — без классического «лассо» или «ластика». ИИ выделит вам любой объект, будь то круассан, одежда или логотип.
- Интерактивные доски FigJam теперь умеют визуализировать сложные идеи в простых диаграммах, сортировать отзывы и автоматизировать рутинные задачи.
Туториал. Как создать дизайн сайта или приложения с помощью ИИ Figma
1. Кликните Actions на панели инструментов.
2. Выберите Make designs.
3. Если нужно, кликните Library, чтобы добавить готовые макеты из системы Figma. Если не нужно, система сама выберет наиболее подходящий вариант по вашему запросу.
4. Введите запрос, например, «Приложение для доставки еды для домашних животных», «Маркетинговый веб-сайт для консалтинговой компании по контент-стратегии».
5. Нажмите Make it.
6. Просмотрите различные варианты, кликнув миниатюры.
7. Если вас устраивает дизайн, закройте меню действий. Если вы хотите уточнить его, нажмите Make changes.
8. Внесите изменения в дизайн.
Пользовательский интерфейс
Если нужно больше места на холсте, теперь можно свернуть пользовательский интерфейс. Достаточно нажать Minimize UI, чтобы свернуть панель навигации и панель свойств. Если вы выберете что-то на холсте со свернутым интерфейсом, панель свойств временно откроется, и вы сможете получить доступ к элементам управления.
Панель инструментов
Инструменты дизайна сейчас перемещены в нижнюю часть редактора. Поэтому у вас будет больше свободного пространства для работы с холстом. Это освобождает рабочее пространство на холсте. Actions — новый элемент на панели инструментов. Через него вы получаете доступ ко всем инструментам ИИ Figma, плагинам и виджетам, компонентам.
Панель свойств
Свойства теперь сгруппированы в соответствии с актуальными рабочими процессами. Размер панели свойств можно изменять. На ней теперь есть строка заголовка с действиями, которые вы можете выполнить над выбранным объектом. Например, легко найти кнопку для применения «маски», создания объекта или выполнения другой операции. А можно спрятать второстепенные кнопки в меню More. Теперь вы можете получить доступ ко всем свойствам, связанным с положением объекта на холсте, в разделе Position.
Функции
- Теперь можно выровнять объект по его «родительскому» слою или выровнять несколько объектов относительно друг друга. Выберите несколько объектов, затем щелкните один из инструментов выравнивания в разделе Position на панели свойств.
- Функция Auto layout позволяет динамически подстраиваться под изменения контента и различные размеры экрана. Чтобы использовать функцию, нужно кликнуть раздел Layout на панели свойств.
- Функция Corner radius — это скругление углов. Выбираете объект, кликаете Corner radius в разделе Appearance и изменяете значение. Можно изменить каждый угол по отдельности.
- Раздел Text теперь называется Typography. Теперь вы можете изменить размер текстового слоя в разделе Layout. Расстояние между абзацами перенесено в настройки шрифта (Type). Перейти в них можно из раздела Typography.
Дизайн и код становятся ближе друг к другу
Figma модернизировала режим Dev Mode для дизайнеров сайтов. В Focus View появились новые статусы проекта, такие как «Отредактировано» и «Завершено». Это улучшает коммуникацию между разработчиками в команде.
Функция Ready for Dev позволяет разработчикам искать, фильтровать, анализировать обновления в проектах. Теперь можно четко понимать, кто, что и когда обновил в контенте.
Расширилась функция Code Connect — цель улучшений, по словам создателей, «сблизить дизайн и код». В режиме разработки отображаются реальные фрагменты кода вместо автоматически сгенерированных по умолчанию.
Лучше или так же?
Последние обновления явно свидетельствуют о движении редактора в сторону автоматизации работы с дизайном. Это, безусловно, делает работу дизайнера быстрой и качественной. Однако насколько такой подход оставляет место для творческой индивидуальности? Не получится ли так, что заказчики массово начнут получать от пользователей Figma унифицированные и похожие друг на друга проекты. Пишите в комментариях, какие из улучшений Figma вам кажутся полезными, а какие наоборот.