{"id":8743,"title":"Windows 11 \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432","url":"\/redirect?component=advertising&id=8743&url=https:\/\/vc.ru\/promo\/321661-windows-11-krupneyshee-obnovlenie-os-za-poslednie-gody-vot-sem-glavnyh-izmeneniy-dlya-razrabotchikov&placeBit=1&hash=d495e1d882b51d6292fe6890650d751b0e17946139a3969ed4a20428c6a17cc8","isPaidAndBannersEnabled":false}
Дизайн
Roman Kamushken

Адаптивные шаблоны 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.

Плюс: скорость.

Минус: отсоединение компонента от системы.

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

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

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

Плюс: гибкость.

Минус: если иконок много, их сложнее упорядочивать.

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

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

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

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

Плюс: эффективность.

Минус: лишний компонент системы.

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

Кстати, именно по этой методике сделаны многие компоненты в дизайн-системе iOS 12. Рекомендую обратить внимание, если прототипируете мобильные интерфейсы в Figma.

0
17 комментариев
Популярные
По порядку
Написать комментарий...

У меня одного слово Фигма вызывает смех?

–13

Нет, у меня тоже Figma вызывает смех, радость и сплошные положительные эмоции. В отличие, например, от InVision Studio. Там сплошное разочарование.

16

Зарегистрировался 43 минуты назад

0

Держите пожалуйста нас в курсе!

0

Накручивайте дальше)

0

Издержки размещения на нецелевом для классных продуктов рынке. На русском и «Адоби» звучит как-то не фантастически.

0

При всём многообразии продуктов найдутся смешные названия.

3

Эксперт по неймингу, чо уж там...

0

Иии? При чем тут мой прикол про книги? При чем тут экспертность в нейминге? Я лишь спросил один ли я такой) Психи)

0

Как продукт не назови... Главное - сам продукт!

0

Не совсем, название продукта может повлиять на разные моменты. Например на его продвижение.

0

Комментарий удален

под тем что я описываю, мне видятся UI Kit'ы для figma.
Их море в сети, что платных что бесплатных, включая и нативные под платформы.
Там и компонентов море, и натаскивать их легко

0

Комментарий удален

Прошу прощения, то что Вы описываете.

В остальном согласен, но если вам нужно прям совсем быстро набросать приложение, то существуют ui-kit с большим количеством иконок, но в любом случае если нужна своя то их нужно импортировать.

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

0

У меня больше скетч смех вызывает. Особенно командная работа

0

У меня вызывает чувство боли

0

Фигма топ, кто бы что ни говорил

4

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

0
Читать все 17 комментариев
Бот, который сделает маму счастливее

Kind Bot напечатает и отправит по почте фото вашей маме. В 2 клика.

Бизнес — как ребенок: как мамы совмещают свое дело с заботой о детях

Как совмещать бизнес и семью? Ко Дню матери своими историями поделились бизнесвумен, которые работают c ЮKassa и занимаются детьми. Читайте, как им удается сохранять жизненный баланс и добиваться успеха.

Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Завод по производству идей. Как работают акселераторы, зачем они нужны стартапам и куда идти с идеей прямо сейчас

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

Пятерочка списала баллы вместе с деньгами и не желает исправлять ситуацию

Так получилось, что за покупками в основном ходим в пятёрочку, есть их "Выручай-карта" на которую копятся бонусы с покупок. 28.09.21 решил использовать эти бонусы в магазине по адресу Москва. Ул. Лухмановская 17А. При оплате терминал, со слов продавцов выдал ошибку, о невозможности списания баллов, и я оплатил деньгами. Вышло так, что списались и…

Крысы играют в DOOM, используя VR-подобную систему
Что Tele2 предлагает клиентам в «черную пятницу»

На главной распродаже года клиентов компании ждут сразу несколько интересных предложений: скидки на смартфоны, пакеты SMS и безлимитный трафик на YouTube, Яндекс.Карты, Яндекс.Навигатор.

Сервис Boxberry по доставке посылок из США в Россию не умеет забирать посылки из почтового отделения, товар потерян?

Прочитала статью и решила воспользоваться сервисом, заказав товар на eBay.com:

Из науки в IT: как создать свой стартап и стать преподавателем

Как перейти в IT из другой сферы? Как разработать курс, которому нет аналогов? Как студенту получить максимум пользы от занятий? Рассказывает преподаватель OTUS Сергей Окатов, руководитель курсов «Kotlin Backend Developer» и «Kotlin Developer. Basic».

Как у меня украли 600 тысяч с карты, а Тинькофф нарушает федеральный закон

Спойлер: я НЕ вводил никуда код, НЕ переходил по ссылкам и НЕ сообщал данные карты.

Я всегда считал себя финансово грамотным человеком, сам когда-то работал в банке, соблюдал цифровую гигиену, держал деньги на нескольких счетах, не привязывал основную карту в непонятных сервисах, в 90% оплат пользовался Google Pay. Когда родственники присылали…

Как я заработал свой первый миллион просмотров на лонгридах

Мой опыт ведения текстового блога на «Виси», «Пикабу», «Хабре», Дзене и еще пачке площадок. Сколько потратил на них сил и какую отдачу в итоге получил.

null