Android navigation bar figma

Адаптивные шаблоны Figma: как сделать гибкий дизайн-компонент мобильной навигации iOS

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

При создании набора компонентных iOS-шаблонов для Figma я решил поэкспериментировать с компонентом Tab Bar. Напомню, что в гайдлайнах iOS это нижняя навигация. Мне хотелось, чтобы его содержимое имело логичное и оптимальное поведение при ресайзе. Хотелось сделать его максимально адаптивным для всех iOS-устройств, насколько это позволяет сделать Figma и направляющие (constraints).

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

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Из чего состоит 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. Таким образом констрейны самой иконки будут проигнорированы.

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

• Плюс: эффективность.
• Минус: лишний компонент системы.

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

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

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

Источник

Mobile UI Kit

Speed up your design workflow and create a beautiful app with Figma’s fully customizable mobile UI kit.

Create lovable products

This free mobile UI kit was thoughtfully crafted and documented by Figma designer, Joey Banks. Use these tailor-made components to build interfaces for chat applications, social networks, calendars, and more.

Fully customizable

Each screen is fully customizable (styles, components, text, color, size), carefully layered, and grouped to make your work as comfortable and simple as possible. This kit takes advantage of Figma components, making it easy to customize and make your own.

Start designing mobile interfaces in Figma today

Design, prototype, and build mobile apps in Figma. With our mobile ui kit, you can spend less time on the interface, and more time nailing the user experience.

Ready to share your moodboard with others? Just share a link. The file will open in the browser, ready for collaboration.

Figma lives inside the browser which means there is nothing to install. Jump straight into the file and get to work.

Figma is the free mobile design tool trusted by top design teams like Uber, Square, and Twitter.

Speed up your design process

Kickstart your design process with Figma’s mobile UI kit. You can use it to speed up your design process, help ideate on new screen ideas, or even as the foundation for your future outstanding app.

Mobile UI Kit users also like.

Share ideas, diagrams, and processes with your team in realtime.

Get this template

Speed up your design workflow with our component based wireframe kit.

Get this template

Easily conduct visual research and find your aesthetic with this mood board.

Источник

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

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

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

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

Знакомство с интерфейсом Figma

Самое замечательное в Figma – это чистый и интуитивно понятный интерфейс.

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

Позвольте мне провести быстрый обзор интерфейса Figma…

Панель инструментов

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

Вот краткий список инструментов (с соответствующими сочетаниями клавиш), которые вы будете использовать чаще всего…

• Move (V)
• Scale (K)
• Frame (Aили F)
• Rectangle (R)
• Line (L)
• Arrow (Shift + L)
• Ellipse (O)
• Place Image (Shift + Ctrl + Kили Shift + Cmd + K)
• Pen (P)
• Text (T)
• Hand (Нажмитеили удерживайтеSPACE)

Панель слоев (Layers Panel)

В левой части экрана находится панель слоев.

Она дает вам легкий доступ к слоям, компонентам и страницам, используемым внутри вашего текущего файла Figma.

Любые фреймы, группы или объекты, которые вы добавляете на холст, будут отображаться на панели слоев.

Панель компонентов (Assets Panel)

Внутри панели компонентов у вас будет легкий доступ ко всем вашим компонентам.

Компоненты – это повторно используемые элементы дизайна, такие как кнопки или иконки, а также более сложные элементы интерфейса, такие как меню или модальные окна.

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

Холст (Canvas)

Холст.

Здесь представлены ваши проекты.

Все просто, поэтому двигаемся дальше…

Панель свойств (Properties Panel)

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

Вкладка «Дизайн» (Design)

Вкладка «Дизайн» позволяет легко просматривать, добавлять, удалять или изменять свойства элементов вашего дизайна.

Слой, который вы в настоящее время выбрали, будет определять, какие настройки доступны вам на вкладке «Дизайн».

Вкладка «Прототип» (Prototype)

Вкладка «Прототип» дает доступ ко всем функциям прототипирования, которые может предложить Figma, и позволяет применять переходы между фреймами, оживляя ваши статичные дизайны.

Вкладка «Inspect»

Вкладка «Inspect» на панели свойств позволяет увидеть элементы вашего дизайна в коде, в следующих доступных форматах:

CSS

iOS

Android

А теперь о хорошем …

Проектирование экрана мобильного приложения

Обратите внимание: прежде чем мы углубимся в этот раздел, убедитесь, что вы загрузили элементы дизайна, необходимые для выполнения заданий в этой статье здесь. (Там также есть готовый файл, на который вы можете ссылаться).

Открыв Figma, создайте новый документ, щелкнув значок плюса (+) в правом верхнем углу экрана.

На появившемся экране выберите вариант iPhone 11 Pro / X и нажмите Create File.

Затем, когда фрейм не выбран, щелкните имя файла на панели инструментов и переименуйте его в «Mobile App Screen».

Миниатюра карточки

Выберите инструмент «Прямоугольник» (R), нарисуйте фигуру примерно 375px в ширину и 406px в высоту и поместите ее в верхней части фрейма. Вы также можете дважды проверить ее правильность, убедившись, что для нее установлено значение 0 по осям X и Y на панели свойств.

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

Теперь давайте поместим изображение внутри нашей фигуры, используя очень полезную функцию «Place Image».

Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, выберите файл preview.jpg из папки Images, а затем кликните по фигуре, чтобы вставить изображение прямо в нее.

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

На панели «Заливка» (Fill) щелкните значок «Плюс» (+), чтобы добавить новую заливку. Убедитесь, что выбран параметр Solid.

Во всплывающем меню введите следующее Hex-значение (#): 303030 и установите непрозрачность (opacity) на 50%.

Наконец, давайте добавим легкую тень (drop shadow) к миниатюре и придадим глубины нашему дизайну.

На панели «Effects» щелкните значок плюс (+), выберите «Drop Shadow» в меню выбора, а затем настройте следующие параметры эффекта…

• X – 0
• Y – 4
• Размытие (Blur) – 4
• Цвет (Color) – #303030
• Непрозрачность (Opacity) – 20%

Панель навигации (Navigation Bar)

Для панели навигации мы вставим пару иконок. Одну для возврата к предыдущему экрану, а другую для добавления статьи в закладки.

Открыв папку Icons, просто перетащите на фрейм следующие иконки, по одной…

• стрелка назад (arrow back)
• закладка(bookmark)

Выделив обе иконки, перейдите на панель «Selection Colors» и измените Hex-значение цвета на белый (FFFFFF).

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

Затем, выбрав обе иконки, перейдите на панель свойств и выберите «Align Vertical Centers» (Alt + V).

Когда обе иконки все еще выделены, используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать. Это просто придаст аккуратный и организованный вид на панели слоев.

Всегда переименовывайте и группируйте по ходу дела. Это экономит кучу времени.

Теперь, удерживая Alt, поместите эту новую группу в 56px от верхнего края основного фрейма.

Уведомление

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

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

Инструментом «Прямоугольник» (R) нарисуйте фигуру размером 131px x 33px, а затем закруглите углы до 24.

На панели «Заливка» (Fill) задайте Hex-значение (#) 303030 и уменьшите его непрозрачность до 60%.

На панель «Эффекты» (Effects) добавим этому маленькому уведомлению легкое размытие фона, чтобы добавить визуальный интерес и немного большего контраста между изображением и текстом, который мы скоро разместим в нем.

На панели «Эффекты» щелкните значок плюс (+) и в меню выбора выберите Background Blur (Размытие фона).

Щелкните значок настроек эффекта (Effect Settings) и измените силу размытия (Blur Strength) на 6.

Пришло время написать немного текста и настроить еще несколько свойств, не так ли?

Используя инструмент «Текст» (T), добавьте новый текстовый элемент и напечатайте слово «Bookmarked» (добавлено в закладки).

Затем на панели свойств текста (Text Properties) примените следующее…

• Шрифт (Font) – Lato
• Вес (Weight) – Regular
• Размер (Size) – 14
• Выравнивание текста (Text Align) – Center
• Выравнивание (Align) – Middle
• Заливка (Fill) – #FFFFFF

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

Используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать.

Затем, наконец, используйте Ctrl + Click или Cmd + Click, чтобы выбрать группу уведомлений и изображение, а затем используйте параметры выравнивания, чтобы выровнять уведомление по горизонтали и вертикали внутри изображения.

Аватар + иконки социальных сетей

Давайте разместим аватар, имя автора и иконки социальных сетей на свои места.

Выберите инструмент Эллипс (O) и нарисуйте фигуру размером 48 x 48px. Вы также можете удерживать клавишу Shift, чтобы сохранить пропорции.

Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, чтобы использовать инструмент «Поместить изображение» (Place Image), выберите avatar.png из папки «Images» и поместите его внутри фигуры.

Выделив фигуру, перейдите на панель свойств и добавьте следующее…

Stroke –

• Цвет (Color) – #FFFFFF
• Ширина (Width) – 2
• Положение (Position) – Inside

Drop Shadow –

• X – 0
• Y – 2
• Размытие (Blur) – 4
• Цвет (Color) – #303030
• Непрозрачность (Opacity) – 25%

Давайте добавим еще несколько текстовых слоев как для имени автора, так и для даты публикации статьи …

Используя инструмент «Текст» (T), создайте 2 новых текстовых слоя, отредактируйте текст соответствующим образом, а затем примените к имени автора следующие свойства…

• Шрифт (Font) – Lato
• Вес (Weight) – Bold
• Размер (Size) – 16
• Выравнивание текста (Text Align) – Left
• Заливка (Fill) – #212121

А для Даты публикации используйте следующее…

• Шрифт (Font) – Open Sans
• Вес (Weight) – Regular
• Размер (Size) – 12
• Выравнивание текста (Text Align) – Left
• Заливка (Fill) – #7D7D7D

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

Затем используйте инструменты выравнивания, чтобы они были выровнены по левому краю относительно друг друга, и, наконец, сгруппируйте их (Ctrl + G или Cmd + G).

Выровняйте эту новую группу на 16px справа от аватара, а затем, выбрав новую группу и аватар, нажмите Alt + V, чтобы выровнять их по вертикали относительно друг друга.

Давайте добавим пару иконок социальных сетей …

Как и раньше, просто перетащите по одной иконки Instagram и Twitter в свой дизайн и, используя комбинацию инструментов выравнивания и клавиши Alt, выровняйте их по вертикали относительно друг друга (Alt + V) и разместите их. На расстоянии 16px.

Сгруппируйте иконки (Ctrl + G или Cmd + G) и переименуйте (Ctrl + R или Cmd + R).

Выделив группу иконок социальных сетей, группу текстовых слоев и аватар, используйте Alt + V, чтобы выровнять их по вертикали относительно друг друга.

Сгруппируйте (Ctrl + G или Cmd + G) все эти элементы вместе, а затем поместите эту новую группу на 32px от левого и правого края фрейма и на 32px от нижнего края изображения.

Заголовок + контент

Давайте добавим небольшой заголовок и фрагмент контента, чтобы еще немного дополнить наш дизайн …

Используя инструмент «Текст» (T), создайте простой заголовок, а затем на панели свойств примените следующее…

• Шрифт (Font) – Lato
• Вес (Weight) – Bold
• Размер (Size) – 21
• Высота строки (Line Height) – 32
• Выравнивание текста (Text Align) – Left
• Выравнивание (Align) – Top
• Заливка (Fill) – #212121

Затем, используя инструмент «Текст» (T) еще раз, создайте абзац контента, который будет отображаться под заголовком со следующими свойствами …

• Шрифт (Font) – Open Sans
• Вес (Weight) – Regular
• Ращмер (Size) – 16
• Высота строки (Line Height) – 28
• Выравнивание текста (Text Align) – Left
• Выравнивание (Align) – Top
• Заливка (Fill) – #7D7D7D

Мы установили цвет этого блока текста на темно-серый (#7D7D7D), чтобы он красиво контрастировал с заголовком, добавлял немного визуального интереса, но все еще был доступен на белом фоне для пользователей с ослабленным зрением.

Удерживая клавишу Alt, наведите курсор на два слоя, чтобы увидеть расстояние между ними, и разместите их на расстоянии 8px друг от друга.

Не забудьте сгруппировать (Ctrl + G или Cmd + G) и переименовать (Ctrl + R или Cmd + R), а затем разместите эту новую группу на 32px от левого края фрейма и на 32px от нижней части аватара группы.

Форма комментария

ОК. Давайте подведем итоги и добавим в наш дизайн небольшую форму / поле комментария.

Снова вызвав инструмент «Прямоугольник» (R), нарисуйте фигуру размером 263 x 40px, задайте ей радиус скругления углов 24 и заливку #E4E4E4.

Вставьте текстовый слой (T), измените формулировку (например, «Добавить комментарий…»), а затем добавьте следующие свойства…

• Шрифт (Font) – Lato
• Вес (Weight) – Regular
• Размер (Size) – 16
• Выравнивание текста (Text Align) – Left
• Выравнивание (Align) – Middle
• Заливка (Fill) – #707070

Выделив и фигуру, и текстовый слой, выровняйте их по вертикали относительно друг друга (Alt + V), а затем сгруппируйте (Ctrl + G или Cmd + G) их и переименуйте (Ctrl + R или Cmd + R).

Перетащите в свой дизайн кружок со стрелкой вправо, а затем с помощью инструмента «Scale» (K) измените его размер пропорционально до 40 x 40px , чтобы он имел те же размеры по высоте, что и поле, которое мы только что создали.

Поместите иконку на 8px справа от поля комментария, а затем, выбрав группу полей и иконку, выровняйте их по вертикали относительно друг друга (Alt + V).

Ну, наконец-то. Сгруппируйте 2 элемента (поле комментария и иконку). И поместите эту новую группу на 32px от нижней части текста, а также от левого и правого краев фрейма.

Вот и все, наш маленький экран мобильного приложения готов.

Я уже много раз говорил: начинайте проектировать, а потом проектируйте еще. Это лучший способ изучить новый инструмент и одновременно улучшить свои дизайнерские навыки.

Источник