Главная » Веб-дизайн » Рисуем дизайн первой страницы приложения в Figma

Рисуем дизайн первой страницы приложения в Figma

Рисуем дизайн первой страницы приложения в Figma

Обновлено: 09.11.2021

Хотите создавать красивый дизайн в Figma? Тогда вы по адресу! Уже в этом посте мы вместе начнем рисовать реальное приложение! Я буду описывать каждый свой шаг очень подробно и информативно. Вы даже не заметите, как за несколько простых уроков, познакомитесь с основными инструментами и возможностями Figma. А в качестве бонуса у вас появится готовый дизайн приложения, который вы сможете включить в свое портфолио. Начнем с первой страницы.

Что ждет в статье

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


Сегодня мы выясним:

  • Как загрузить изображение во фрейм (п. 2)
  • Как нарисовать фигуру (shape) в Figma (п. 3)
  • Что такое булевы операции и как с ними работать в Figma (п. 3)
  • Какие стандартные эффекты есть в Figma и как их применять (п.3)
  • Как использовать собственные шрифты в браузерной версии Figma с помощью Font Helper (п.4)
  • Как работать с текстовыми слоями в Figma (п. 4)

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

1. Описание будущего проекта и подготовка к работе

В прошлой статье мы поговорили о том, как создаются новые проекты в Figma.

Следующие действия нужно выполнять согласно инструкции, описанной в ней.

Создайте новый проект и назовите его Proper Nutrition – это будет некая база рецептов правильного питания, которые можно будет просматривать, добавлять в избранное и оставлять заметки.

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

Прототип экранов, загружаемых после Splash Screen (экран с логотипом приложения и его названием) будет выглядеть следующим образом.

Рисуем дизайн первой страницы приложения в Figma

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

Рисуем дизайн первой страницы приложения в Figma

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

Рисуем дизайн первой страницы приложения в Figma

Здесь будет видео инструкция и текстовое описание (ингредиенты + пошаговая инструкция).

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

В меню будет предусмотрена кнопка, которая откроет список всех избранных рецептов.

Рисуем дизайн первой страницы приложения в Figma

Удалять из него элементы можно будет движением пальца влево по экрану.

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

Создайте первый фрейм для Iphone 8 и назовите его SplashScreen

Рисуем дизайн первой страницы приложения в Figma

Приветственная страница или Splash Screen, с которой мы начнем, как правило содержит тематическое фоновое изображение, логотип и приветственные слова.

2. Загрузка изображений в Figma

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

Теперь в Figma выполните действие Menu – File – Place Image.

Рисуем дизайн первой страницы приложения в Figma

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

Рисуем дизайн первой страницы приложения в Figma

Обратите внимание, что часть изображения, которая выходит за границы фрейма не отображается, так как для него включена опция Clip Content (обрезка содержимого по размерам фрейма) в меню Design справа.

Щелкните на значок замочка напротив названия изображения в меню Layers, чтобы заблокировать его. Тоже самое можно сделать, выбрав в контекстном меню изображения функцию Lock/Unlock (заблокировать, разблокировать). Теперь фоновое изображение не будет нам мешать.

Рисуем дизайн первой страницы приложения в Figma


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


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

Теперь создадим логотип нашего проекта в Figma.

ЧИТАЙТЕ ТАКЖЕ
Фирменный стиль. Как создать логотип на практике. Узнайте как придумать логотип, используя карту мышления

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

В верхнем меню из выпадающего списка Shape Tools выберите Ellipse

Рисуем дизайн первой страницы приложения в Figma

Нарисуйте эллипс размера 60 на 60 пикселей. При этом удерживайте нажатой клавишу Shift, чтобы стороны были одинаковыми.

Рисуем дизайн первой страницы приложения в Figma

На панели Design справа выставите следующие настройки:

  • Выравнивание по центру фрейма
  • Fill (заполнение) — #DA0100

Рисуем дизайн первой страницы приложения в Figma

Поверх эллипса с помощью инструмента Text (T) напишите букву П. На панели Design задайте следующие настройки в графе Text – шрифт Roboto Mono – Bold, 42 px. Выровняете букву следующим образом.

Рисуем дизайн первой страницы приложения в Figma

Обратите внимание, что для удобства я вывела сетку для нашего фрейма SplashScreen с шагом 5px. Как это сделать, я описала в главе «Настройка сетки» в статье «Создаем первый проект в Figma»

Создайте дубликат буквы П – Ctrl + D (Cmd+D для Mac).

Отразите ее по вертикали — Flip Vertical в контекстном меню и выровняйте следующим образом

Рисуем дизайн первой страницы приложения в Figma

Как вы уже догадались, у нас будет логотип, в котором замаскировано сокращение ПП – Правильное Питание.

Пришло время довести его до ума. Выделите эллипс и две буквы П.

В верхнем меню, в выпадающем списке булевых операций выберите Subtract Selection (Вычитание).

Получится вот такой логотип. Обратите внимание, что на панели Layers, слои с эллипсом и буквами объединятся в группу Subtract.

Рисуем дизайн первой страницы приложения в Figma


Понятие булевых операций в Figma не должно быть ново для вас. Так как логика самого процесса практически не отличается от других графических редакторов – Photoshop или Sketch.

Булева группа объединяет в себе несколько фигур (Shape), от 2 и более. Все они взаимодействуют друг с другом в зависимости от выбранной операции (булевой операции):

  • Union — Объединение двух фигур в одну. Видимы обе.
  • Subtract — Вычитание верхней из нижней. Видима нижняя.
  • Intersect — Пересечение. Видима область пересечения двух фигур.
  • Exclude — Исключение. Видимы обе фигуры, не видима область пересечения.

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

Булевы операции можно проводить над любым количеством фигур и по- разному сочетать их.

Как вы убедились булевы операции действуют даже на текст.


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

Для этого на панели Layers щелкните правой клавишей по группе Subtract и выберите операцию Flatten


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


Рисуем дизайн первой страницы приложения в Figma

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

Отключите видимость сетки для фрейма Splash Screen. Она нам пока не понадобится.

Выделите логотип и на вкладке Design справа найдите группу Effect – щелкните на значок +. Выберите Inner Shadow (внутренняя тень). Настройте ее следующим образом.

Рисуем дизайн первой страницы приложения в Figma

Логотип готов.


Обратите внимание, что в Figma ограничен набор стандартных эффектов. Их всего 4:

  • Inner Shadow – внутренняя тень
  • Drop Shadow – внешняя тень
  • Layer Blur – размытие слоя
  • Background Blur – размытие фона

4. Работа с текстом в Figma – установка новых шрифтов с помощью Font Helper

В базе Figma доступны шрифты из Google Fonts, где есть и кириллические варианты.

Мне доставил неудобства тот факт, что при наведении курсора мыши на название шрифта, не отображается его миниатюра, как, например, в Photoshop. Поэтому процесс подбора шрифта может растянуться. Легче зайти на сайт Google Fonts и там подобрать шрифт для своего текста.

ЧИТАЙТЕ ТАКЖЕ
Как выбрать шрифт для проекта если ты новичокКак выбрать шрифт для проекта если ты новичок Узнайте каким правилом стоит руководствоваться для создания гармоничного дизайна проекта.

Чтобы вы могли воспользоваться скаченными из сторонних источников шрифтами в браузерной версии Figmaпредлагается использовать Font Helper.

Чтобы его включить необходимо выполнить следующий порядок действий:

  1. Перейти в настройки аккаунта — figma.com/settings
  2. Найти пункт Fonts и нажать на кнопку Download installer to enable local fonts – на компьютер загрузится скрипт для Font Helper (на моем Mac Os это FigmaInstaller.pkg).
  3. Запустите скаченный скрипт для Font Helper и в списке шрифтов браузерной версии Figma появятся шрифты с вашего локального диска.
  4. Для того чтобы удалить этот скрипт, нажмите на Download uninstaller to disable local fonts в группе Fonts. Ссылка появится вместо кнопки Download installer… Будет загружен пакет для удаления Font Helper.

Рисуем дизайн первой страницы приложения в Figma

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

С помощью инструмента Text напечатайте следующую фразу под логотипом – «Лучшие ПП рецепты»

Я воспользовалась креативным бесплатным шрифтом Sweet Mavka Script о котором писала в статье «Бесплатные русские шрифты для заголовков». Цвет шрифта #FDE0C0, размер 13 px.


Посмотрите на панели Design, какие еще есть настройки для текста в Figma. Там можно определить параметры обводки (Stroke) или эффекты (Effect), такие же как и для других объектов в Figma.


В результате проделанных манипуляций у нас получился следующий дизайн приветственной страницы приложения:

Рисуем дизайн первой страницы приложения в Figma

В следующем уроке мы сделаем данную страницу адаптивной и узнаем, что такое ограничители в Figma.

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

Рисуем дизайн первой страницы приложения в Figma

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна

2 комментарии на “Рисуем дизайн первой страницы приложения в Figma

Добавить комментарий для Anna Dmitrieva Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *