‎App Store: Figma Comments

Итак, что дальше?

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

Cпособ второй — хранить в системе иконки двух типов

Этот способ может подойти, если иконок не так много в проекте. Просто дублируете весь Scale-набор, распускаете, меняете констрейны на Center, снова создаёте компоненты и отправляете на новую страницу с другим именем. Последнее время мне кажется здравой идея о том, что несколько сотен иконок в любой системе для Figma можно хранить как Scaleable, так и Centered.

Левая иконка растягивается пропорционально, тогда как вокруг иконки справа растягивается лишь фрейм

‎figma comments

Figma: the collaborative interface design tool.

‎figurative

Meet dimension

‎’proto’ for figma

Адаптивный компонент

Пока что ни один инструмент для дизайна интерфейсов не даёт возможностей полной адаптивности. Figma не исключение, в ней используется уже классический constraints-подход, но даже с ним можно сделать многое. Например, на анимации ниже можно увидеть идеальное и фактически адаптивное поведение Tab Bar на всех устройствах:

Элементы двигаются пропорционально отступам между ними. Ниже я расскажу о том, как простым путём добиться такого поведения.

Из чего состоит tab bar

Tab Bar представляет из себя набор иконок с подписями либо без, по нажатию ведущие в соответствующий раздел приложения. Активный раздел всегда подсвечивается цветом. Гайдлайнами рекомендовано использовать от трёх до пяти разделов внутри приложений, использующих Tab Bar как основной навигационный контрол.

Интеграция ввода

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

В Dimension, когда дизайнер выбирает поле ввода (например, размер шрифта текстового поля), становятся доступными два метода ввода : Клавиатура и Ползунок .

Клавиатура

Без клавиатуры для ввода цифровая клавиатура выпадает из поля в фокус, позволяющий дизайнеру вводить значение.

Slider

Во-вторых, рядом с инспектором появляется ползунок, позволяющий им прокручивать с различной скоростью — 10 пикселей, 1px, .5px — как при просмотре видео на планшете.

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

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

Как пользоваться мобильным приложением фигмы

После запуска вам будет предложено авторизоваться. 

Судя по отзывам, многие не понимают, что Mirror является действительно лишь «зеркалом» для предпросмотра фреймов и сам по себе редактором не является. Из-за этого в отзывах на приложение есть заявления, что мобильная Фигма не работает, но на самом деле это вовсе не так. Просто она почти ничего не умеет.

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

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

Далее с устройства нам доступны всего несколько действий:

Тап слева или справа перелистнут на соответственно предыдущий и следующий фреймы на странице проекта;

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

Каким будет путь к реализации в figma dimension?

На протяжении всей работы над Dimension это требование оставалось в центре внимания: принимались продуманные дизайнерские решения. попытками облегчить реализацию.

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

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

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

Эти усилия начинают подталкивать Dimension из стадии идеи к этап реализации, но им не хватает последнего важного элемента головоломки: вы .

Если Figma строят будущее инструментов дизайна, а Apple строит будущее компьютеров, почему они не работают друг с другом?

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

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

Заполнив форму, вы можете получить доступ к основная жила файлов Dimension.

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

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

Наше мнение

Никакой необходимости в этом приложении нет, ведь Фигма позволяет изначально задать параметры фрейма под определённый экран. С другой стороны, если вы хотите брать от инструмента всё, Миррор может стать приятным подспорьем. Удобство использования — 6 из 10. 

Отрезание клавиатуры

При использовании На компьютере сочетания клавиш доминируют в рабочем процессе дизайнера. Первым шагом, который я предпринял, чтобы довести их эффективность до планшета, хотя, казалось бы, отсталой, я разместил все горячие клавиши оборудования — Command (⌘), Option (⌥), Control (⌃), Shift (⇧) и стрелки — поверх пользовательского интерфейса Figma.

Однако, составив карту каждого сочетания клавиш, я увидел, что при наличии жестов эти клавиши можно комбинировать. Вскоре после этого у Dimension был свой переносимый ответ: Цифровые клавиши и жесты .

Action

Первый рассматриваемый ключ, Command ( ⌘), было преобразовано в Действие, более подходящее название для его цели. Действие сохраняет функциональность Command в сочетании с клавишами со стрелками (например, уменьшение ширины фигуры) и заменяет функции Command и Control (⌃) в сочетании с буквенными клавишами.

Изменить

Вариант тоже был преобразован: в Изменить. Modify сохраняет функциональность Option (⌥), но в сочетании с мультисенсорным вводом дает больше возможностей. Например, Option Hovering на рабочем столе показывает расстояние между выбранной фигурой и другой рядом.

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

Хотя клавиши со стрелками сохраняют свое имя, Dimension также преобразует их, комбинируя их с Shift (⇧). На рабочем столе Shift работает в паре с клавишами со стрелками исключительно для быстрого перемещения. На планшете дизайнеры могут щелкнуть по кнопке со стрелкой для сверхподталкивания, устраняя необходимость в дополнительном нажатии.

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

Проблема кроется в иконках

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

По хорошему, для каждого компонента-иконки, из которых вы соберёте себе удобную библиотеку со временем, должны стоять констрейны в режиме Scale. Тогда вы получите гибкую иконку, которую можно использовать в любых размерностях: 16х16, 44х44 и так далее.

Скорее всего, именно такую иконку через левую панель Figma вы перебросите внутрь Tab Bar и добавите подпись, когда начнёте создавать компонент. И проблема в том, что с такими констрейнами иконку всегда будет плющить внутри Tab Bar при ресайзе, если вы хотите получить адаптивный компонент:

Есть несколько способов решения проблемы

Сказать привет пользователю стилус и перемещение по мыши

Затем появилась другая аппаратная функция компьютера — трекпад. Из двух возможностей трекпада — наведения и выбора — планшеты поддерживают только одну. Для Dimension встроить поддержку обоих означало принести два секретных оружия: Stylus и Sticky Taps .

Stylus

Styli, например Apple Pencil — это привычный и, что более важно, точность трекпада или мыши. Выбор форм, слоев и параметров — ключевой аспект рабочего процесса дизайнеров; Щупы позволяют дизайнерам делать это не только на планшете, но и с большей свободой и скоростью.

Липкие касания

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

Способ первый — сразу отсоединять иконки

Я предположил выше, что в вашей дизайн-системе все компоненты иконок в режиме Scale, значит, при создании Tab Bar можно сразу разрывать связь с ними и присваивать каждой иконке индивидуальные констрейны Center. Она в свою очередь останется во фрейме, которому нужно выставить режим Scale.

Используйте функциональность Detach Instance в контекстном меню для компонента иконки

Способ третий — добавление промежуточного компонента

Согласно концепции атомарного дизайна, такой компонент будет считаться молекулой. Упаковываете в него иконку и подпись, затем смело ставите констрейны Center обоим, а для самой молекулы ставите режим Scale, когда вложите их в свой Tab Bar. Таким образом констрейны самой иконки будут проигнорированы.

Кроме того, иконка с подписью — это эффективный навигационный паттерн. Так почему бы не переиспользовать этот компонент где-нибудь ещё в проекте?

Лично я использую третий способ. Мне кажется он более элегантный и профессиональный. Может быть у вас есть свои способы? Пишите в комментариях.

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

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