Адаптивные шаблоны Figma: как сделать гибкий дизайн-компонент навигации iOS
Всякий раз, создавая новый продукт, хочется сделать его лучше предыдущего, подобрать элегантное решение, чтобы создать удобные и гибкие компоненты дизайн-системы в Figma.
При создании набора компонентных iOS-шаблонов для Figma я решил поэкспериментировать с компонентом Tab Bar. Напомню, что в гайдлайнах iOS это нижняя навигация. Мне хотелось, чтобы его содержимое имело логичное и оптимальное поведение при ресайзе. Хотелось сделать его максимально адаптивным для всех iOS-устройств, насколько это позволяет сделать Figma и направляющие (constraints).
Из чего состоит Tab Bar
Tab Bar представляет из себя набор иконок с подписями либо без, по нажатию ведущие в соответствующий раздел приложения. Активный раздел всегда подсвечивается цветом. Гайдлайнами рекомендовано использовать от трёх до пяти разделов внутри приложений, использующих Tab Bar как основной навигационный контрол.
Адаптивный компонент
Пока что ни один инструмент для дизайна интерфейсов не даёт возможностей полной адаптивности. Figma не исключение, в ней используется уже классический constraints-подход, но даже с ним можно сделать многое. Например, на анимации ниже можно увидеть идеальное и фактически адаптивное поведение Tab Bar на всех устройствах:
Проблема кроется в иконках
Хорошая дизайн-система в Figma обязательно содержит библиотеку иконок. Хотя бы основных системных. Это избавляет от необходимости каждый раз импортировать их вручную из SVG-файлов.
По хорошему, для каждого компонента-иконки, из которых вы соберёте себе удобную библиотеку со временем, должны стоять констрейны в режиме Scale. Тогда вы получите гибкую иконку, которую можно использовать в любых размерностях: 16х16, 44х44 и так далее.
Скорее всего, именно такую иконку через левую панель Figma вы перебросите внутрь Tab Bar и добавите подпись, когда начнёте создавать компонент. И проблема в том, что с такими констрейнами иконку всегда будет плющить внутри Tab Bar при ресайзе, если вы хотите получить адаптивный компонент:
Есть несколько способов решения проблемы
Способ первый — сразу отсоединять иконки
Я предположил выше, что в вашей дизайн-системе все компоненты иконок в режиме Scale, значит, при создании Tab Bar можно сразу разрывать связь с ними и присваивать каждой иконке индивидуальные констрейны Center. Она в свою очередь останется во фрейме, которому нужно выставить режим Scale.
Плюс: скорость.
Минус: отсоединение компонента от системы.
Cпособ второй — хранить в системе иконки двух типов
Этот способ может подойти, если иконок не так много в проекте. Просто дублируете весь Scale-набор, распускаете, меняете констрейны на Center, снова создаёте компоненты и отправляете на новую страницу с другим именем. Последнее время мне кажется здравой идея о том, что несколько сотен иконок в любой системе для Figma можно хранить как Scaleable, так и Centered.
Плюс: гибкость.
Минус: если иконок много, их сложнее упорядочивать.
Способ третий — добавление промежуточного компонента
Согласно концепции атомарного дизайна, такой компонент будет считаться молекулой. Упаковываете в него иконку и подпись, затем смело ставите констрейны Center обоим, а для самой молекулы ставите режим Scale, когда вложите их в свой Tab Bar. Таким образом констрейны самой иконки будут проигнорированы.
Кроме того, иконка с подписью — это эффективный навигационный паттерн. Так почему бы не переиспользовать этот компонент где-нибудь ещё в проекте?
Плюс: эффективность.
Минус: лишний компонент системы.
Лично я использую третий способ. Мне кажется он более элегантный и профессиональный. Может быть у вас есть свои способы? Пишите в комментариях.
Кстати, именно по этой методике сделаны многие компоненты в дизайн-системе iOS 12. Рекомендую обратить внимание, если прототипируете мобильные интерфейсы в Figma.
У меня одного слово Фигма вызывает смех?
Нет, у меня тоже Figma вызывает смех, радость и сплошные положительные эмоции. В отличие, например, от InVision Studio. Там сплошное разочарование.
Зарегистрировался 43 минуты назад
Держите пожалуйста нас в курсе!
Накручивайте дальше)
Издержки размещения на нецелевом для классных продуктов рынке. На русском и «Адоби» звучит как-то не фантастически.
При всём многообразии продуктов найдутся смешные названия.
Эксперт по неймингу, чо уж там...
Иии? При чем тут мой прикол про книги? При чем тут экспертность в нейминге? Я лишь спросил один ли я такой) Психи)
Как продукт не назови... Главное - сам продукт!
Не совсем, название продукта может повлиять на разные моменты. Например на его продвижение.
Комментарий удален модератором
под тем что я описываю, мне видятся UI Kit'ы для figma.
Их море в сети, что платных что бесплатных, включая и нативные под платформы.
Там и компонентов море, и натаскивать их легко
Комментарий удален модератором
Прошу прощения, то что Вы описываете.
В остальном согласен, но если вам нужно прям совсем быстро набросать приложение, то существуют ui-kit с большим количеством иконок, но в любом случае если нужна своя то их нужно импортировать.
У меня на самом деле глаз замылился в последнее время, но я больше чем уверен что к скетчу есть плагин которые позволяет быстрый поиск и импорт иконок с noonprojecta или flaticon. Но надо искать.
У меня больше скетч смех вызывает. Особенно командная работа
У меня вызывает чувство боли
А сейчас смешно?)
Фигма топ, кто бы что ни говорил
Обе софтины отличные, у каждой свои плюсы и минусы. Но, да, последнее время чаще пользую Фигму.