fbpx
1

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

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

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

И угадайте, что?

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

Знакомство с интерфейсом 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. Урок по созданию мобильного приложения

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

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

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

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

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

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

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

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

Холст (Canvas)

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

Холст.

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

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

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

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

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

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

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

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

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

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

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

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

Вкладка «Inspect»

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

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

CSS

iOS

Android

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • X – 0
  • Y – 4
  • Размытие (Blur) – 4
  • Цвет (Color) – #303030
  • Непрозрачность (Opacity) – 20%
Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Уведомление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Шрифт (Font) – Lato
  • Вес (Weight) – Regular
  • Размер (Size) – 14
  • Выравнивание текста (Text Align) – Center
  • Выравнивание (Align) – Middle
  • Заливка (Fill) – #FFFFFF
Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения

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

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

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

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

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

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

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

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

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

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

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

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

Stroke –

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

Drop Shadow –

  • X – 0
  • Y – 2
  • Размытие (Blur) – 4
  • Цвет (Color) – #303030
  • Непрозрачность (Opacity) – 25%
Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения

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

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

  • Шрифт (Font) – Lato
  • Вес (Weight) – Bold
  • Размер (Size) – 16
  • Выравнивание текста (Text Align) – Left
  • Заливка (Fill) – #212121
Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения

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

  • Шрифт (Font) – Open Sans
  • Вес (Weight) – Regular
  • Размер (Size) – 12
  • Выравнивание текста (Text Align) – Left
  • Заливка (Fill) – #7D7D7D
Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Шрифт (Font) – Lato
  • Вес (Weight) – Bold
  • Размер (Size) – 21
  • Высота строки (Line Height) – 32
  • Выравнивание текста (Text Align) – Left
  • Выравнивание (Align) – Top
  • Заливка (Fill) – #212121
Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения

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

  • Шрифт (Font) – Open Sans
  • Вес (Weight) – Regular
  • Ращмер (Size) – 16
  • Высота строки (Line Height) – 28
  • Выравнивание текста (Text Align) – Left
  • Выравнивание (Align) – Top
  • Заливка (Fill) – #7D7D7D
Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения

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

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

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

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

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

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

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

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

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

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

  • Шрифт (Font) – Lato
  • Вес (Weight) – Regular
  • Размер (Size) – 16
  • Выравнивание текста (Text Align) – Left
  • Выравнивание (Align) – Middle
  • Заливка (Fill) – #707070
Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения

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

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

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

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

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

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

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

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

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

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

Спасибо, за прочтение статьи.

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Total
12
Share