Интернет-магазин на Node.js с нуля. Часть 1: Дизайн. Основы работы в Figma

Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.

Кратко о задаче

В этом разделе рассмотрим, как устроена Фигма: создадим первый файл и поработаем с ним.

Вы можете бесплатно скачать Figma на ПК. Для этого зайдите на страницу загрузки и выберите версию программы для MacOS или Windows.

Также доступно мобильное приложение для iOS и Android. Рекомендуем его использовать для просмотра дизайна мобильной версии вашего проекта.

После регистрации перед пользователем открывается главная страница Figma:

1. Аккаунт
2. Поиск
3. Недавние файлы
4. Команда
5. Доски
6. Проекты
7. Корзина
8. Комьюнити

Давайте рассмотрим каждый пункт подробнее.

По нажатию на стрелочку откроется список.

• Пункт «Theme» изменяет тему Figma. Доступна светлая и тёмная темы и автоматический режим в зависимости от настроек системы.
• Пункт «Settings» открывает настройки.
• Пункт «Get desktop app» перенаправит вас на страницу установки программы.
• Далее указан ваш Community-профиль, он необходим для публикации своих проектов в открытый доступ. Если вы его не регистрировали (это можно сделать здесь), то данного списка у вас не будет.
• Пункт «Add account» позволяет подключить дополнительный аккаунт Figma для быстрого переключения между ними.
• Пункт «Log out» завершает сессию аккаунта.

Интерфейс поиска выглядит следующим образом:

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

Здесь находятся все файлы в хронологическом порядке.

В данном пункте меню вы можете выбрать созданные команды или создать новую.

Команды позволяют работать над проектом совместно с другими участниками. Это полезно, когда разработчик видит актуальный дизайн, менеджер видит стадии работы над проектом, а заказчик может оставлять комментарии прямо в файле. При нажатии на кнопку «Create new» открывается окно, где необходимо придумать название для команды, что помогает структурировать работу и улучшить коммуникацию между всеми участниками проекта.

Далее при помощи email вы можете пригласить участников в команду. Данный пункт можно пропустить и добавить участников позже. Для этого нажмите кнопку «Skip for now».

И в завершение необходимо выбрать тариф.

Для начала нам подойдет тариф «Starter», для углубленной работы стоит рассмотреть покупку платных пакетов.

В этом пункте мы можем увидеть все созданные нами доски.

Сейчас данный пункт пуст, но после создания макета здесь появятся наши файлы.

В данном пункте мы можем увидеть все проекты нашей команды.

Здесь мы можем увидеть все файлы, которые мы удалили.

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

Design, figjam и слайды — три разных подхода и форматов представления материалов в Figma, каждый из которых имеет свою специфику и область применения.

Design («дизайн») — классический инструмент для проектирования интерфейсов, иконографики, иллюстраций и визуальных элементов. Это основной режим работы в Figma, используемый дизайнерами и UI/UX-специалистами для разработки макетов приложений, веб-сайтов и любых цифровых продуктов. Основные особенности дизайна включают:

• Создание и редактирование векторных объектов, шрифтов, цветов и слоев.

• Работу с сетками, компоновкой и интерактивностью прототипов.

• Совместную работу над проектами командой дизайнеров, разработчиков и менеджеров проектов.

Создание и редактирование векторных объектов, шрифтов, цветов и слоев.

Работу с сетками, компоновкой и интерактивностью прототипов.

Совместную работу над проектами командой дизайнеров, разработчиков и менеджеров проектов.

Это наиболее распространенный способ взаимодействия с Figma для большинства пользователей.

Термин «Figjam» часто используется среди российских специалистов по дизайну и UX-исследованиям. Этот термин возник от английской фразы foggy jam («затуманенный хаос») и обозначает ситуацию, когда дизайнерская идея запутывается и теряет ясность из-за большого количества итераций, неопределенности требований заказчика или переизбытка вариантов решения проблемы. Сам термин «figjam» относится скорее к процессу работы и возникающим сложностям, нежели к конкретной функциональности программы Figma.

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

Режим «Слайды» в Figma предназначен для быстрого создания презентационных материалов и схем. По сути, это аналог инструментов типа PowerPoint или Google Презентаций, встроенных прямо в интерфейс Figma. Режим слайдов позволяет создавать структурированные презентации, иллюстрирующие этапы проекта, концепции продукта, бизнес-модели, исследования рынка и другие аспекты дизайн-процесса. Основное назначение режима слайдов заключается в представлении результатов работ перед заказчиками, инвесторами, коллегами или широкой аудиторией.

Основные преимущества слайдов в Figma:

• Легкость интеграции графики и анимаций из режимов дизайна.

• Возможность вставлять компоненты дизайна непосредственно в слайды.

• Поддерживает общую экосистему совместной работы и комментирования.

Легкость интеграции графики и анимаций из режимов дизайна.

Возможность вставлять компоненты дизайна непосредственно в слайды.

Поддерживает общую экосистему совместной работы и комментирования.

Этот режим особенно полезен, когда проект требует пояснений, демонстрации этапов разработки или аргументации выбора определённых решений.

Таким образом, разница между этими тремя понятиями определяется характером задач и этапами процесса проектирования.

В нашем случае мы будем использовать «Design». Для этого перейдем на страницу «Drafts» (доски), наведем курсор на кнопку «+Create» и выберем «Design».

После создания файла перед нами открывается рабочее пространство с тремя областями: панель слоев, рабочая область и инспектор.

Для создания объектов используется нижнее меню.

1. Первый пункт — меню выбора режима работы курсора:

Первый пункт — меню выбора режима работы курсора:

• * **Move** отвечает за выбор объекта и его перемещение.

• Move отвечает за выбор объекта и его перемещение.
• Hand tool используется для передвижения по доске, заменяется нажатием на колесико мышки.
• Scale изменяет размер объекта.

1. Создание Frame , Section и Slice.

Создание Frame , Section и Slice.

1. * **Frame** — контейнер фиксированного размера для группировки элементов дизайна с возможностью установки границ и фона.

1. Создание фигур.

• Frame — контейнер фиксированного размера для группировки элементов дизайна с возможностью установки границ и фона.

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

• Slice — специальная область для экспорта отдельных частей макета в виде изображений или файлов определённого формата.

Frame — контейнер фиксированного размера для группировки элементов дизайна с возможностью установки границ и фона.

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

Slice — специальная область для экспорта отдельных частей макета в виде изображений или файлов определённого формата.

1. Инструменты для рисования векторов.

Инструменты для рисования векторов.

1. Инструмент для написания текста.

2. Инструмент для создания комментариев.

3. Меню асетов и плагинов.

Инструмент для написания текста.

Инструмент для создания комментариев.

1. Dev-режим, платная функция.

Dev-режим, платная функция.

Создание интерфейса магазина

Теперь можно приступить к созданию интерфейса нашего интернет-магазина.

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

Теперь мы можем переходить к созданию дизайна. Для начала определите, что необходимо на странице.

Наша структура будет следующей:

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

Теперь мы можем переходить к созданию макета. Начнём с подготовки компонентов. Создаем Header (меню для магазина). В нашем случае структура меню будет следующая:

Для поиска иконок воспользуемся плагином Phosphor Icons. Установить его можно из меню Фигмы:

Откроем данный плагин и найдем иконки для:

• Изменения темы
• Локации
• Корзины
• Избранных товаров
• Аккаунта

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

Далее для структуризации всех иконок создайте Frame «UI-Kit». В него будем добавлять все загруженные иконки.

Для выравнивания иконок добавим к Frame свойство Auto layout.

После создания UI-Kit переходим к созданию Header. Опираясь на шаблон, создаем Frame (фрейм) «Header - light». Структура нашего Frame следующая:

• Кнопка переключения темы («Vector»)
• Frame «Content»:

• Frame «Location»:

• Frame «Logo»:

• Frame «Icons»:

• Иконка локации («MapPinArea»)

• Текст «Москва»

• Frame «Text»:

• Текст «Online»

• Текст «Store»

• Объект для иконки корзины («ShoppingCartSimple»)

• Иконка для избранных товаров («Heart»)

• Иконка для профиля пользователя (“Regular/User»)

В данном примере в качестве лого магазина мы используем текст, поэтому каждое из слов пишем на отдельном элементе «Text». По этой причине мы создаем дополнительный фрейм «Text». Если использовать картинку, то ставим ее вместо фрейм «Text».

Переходим к настройке Auto layout для каждого элемента.

• Ширина: Hug (по размеру элементов)

• Высота Fill (заполнить высоту контейнера)

• Направление в сторону

• Отступы между элементами 10

• Выравнивание по центру с левой стороны

• Ширина: Hug (по размеру элементов)

• Высота Fill (заполнить высоту контейнера)

• Направление в сторону

• Отступы между элементами 0

• Выравнивание по центру с левой стороны

• Ширина: 120

• Высота Fill (заполнить высоту контейнера)

• Направление в сторону

• Отступы между элементами Auto

• Выравнивание по центру

Используем ранее составленную палитру цветов и получаем два Header, в светлой и темной теме:

Теперь переводим наши Header в компоненты.

Создание поиска и меню быстрой навигации

Ссылки в меню быстрой навигации будут на страницы:

1. Каталог
2. Отслеживание заказа
3. Поддержка
4. FAQ

Создаем Frame «Search» и создаем структуру:

Рассмотрим четвертый Frame «Search»:

• Ширина: Fill (100% ширины)
• Высота: Hug (по размеру элементов)
• Направление в сторону
• Отступы между элементами Auto
• Выравнивание по центру
• Padding 10px

Рассмотрим Frame «Button»:

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление в сторону
• Отступы между элементами 8
• Выравнивание по центру
• Padding по горизонтали 24, по вертикали 14

У активной кнопки добавляем Fill с цветом из палитры.

После всех настроек переводим Frame «Search» в компонент.

Создание виджетов с топ товарами

Составим структуру виджетов:

В виджете мы будем показывать наши товары, к их созданию мы перейдем позже. Создаем фрейм Widgets внутри которого будут еще два фрейма: Widget и Small Widgets. Рассмотрим структуру фрейма Widget:

Рассмотрим отдельно каждый элемент.

• Ширина: 356

• Высота 232

• Направление вниз

• Отступы между элементами 24

• Выравнивание по центру с левой стороны

• Ширина: Hug (по размеру элементов)

• Высота: Hug (по размеру элементов)

• Направление вниз

• Отступы между элементами 24

• Выравнивание по левому краю

• Ширина: Hug (по размеру элементов)

• Высота: Hug (по размеру элементов)

• Направление в сторону

• Отступы между элементами 12

• Выравнивание по центру

• Цвет: #7177F8

Рассмотрим структуру Small Widgets.

• Ширина: Hug (по размеру элементов)

• Высота: Hug (по размеру элементов)

• Направление вниз

• Отступы между элементами 18

• Выравнивание по левому краю

• Ширина: Hug (по размеру элементов)

• Высота: Hug (по размеру элементов)

• Направление вниз, отступы между элементами 5

• Выравнивание по левому краю

• Ширина: Hug (по размеру элементов)

• Высота: Hug (по размеру элементов)

• Направление в сторону

• Отступы между элементами 8

• Выравнивание по центру

• Цвет: #7177F8

По аналогии создаем второй Frame. В итоге получаем Frame «Widgets».

Теперь нам необходимо создать товары для нашего онлайн-магазина.

Мы будем продавать футболки, поэтому переходим в Community и пишем запрос «T-Shirt Mockup». Среди результатов ищем то, что нам подходит большего всего, и по инструкции внутри файла создаем макеты.

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

В данном интернет-магазине мы будет продавать три футболки:

Добавление товаров в виджеты

Добавим наши товары в созданный Frame и получаем:

Теперь создаем такой же Frame для светлой темы сайта:

Переводим Frame в компоненты.

Создание блока с информацией

Информация которую мы будем указывать:

• Быстрая доставка

• 24 часа на возврат

• Защищенная оплата

• Поддержка 24/7

• Доставка по МСК за 24 часа

Доставка по МСК за 24 часа

Создайте Frame «Features» и следующую структуру:

Блок Feature клонируем 4 раза, заменяя значения.

Компонент «Duotone/Package» — это иконка, которую мы добавили проект ранее.

Рассмотрим Frame «Feature»:

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление в сторону
• Отступы между элементами 16
• Выравнивание по центру
• Padding 16

Создаем остальные три фрейма «Feature» и получаем:

Создаем из Frame компонент.

Создание блока с товарами

Для начала определимся со структурой блока:

Создадим Frame «Best Deals» и добавим следующую структуру:

У «Товара 1» мы покажем информацию о рейтинге, названии, описании, цене, скидке и поставим отметку HOT.

Добавим все элементы и получаем:

У данного элемента мы не настраиванием Auto layout.

Создадим сетку из 8 товаров. Сетка будет состоять из восьми фреймов «Product». Структура фрейма будет следующая:

У данного компонента мы также не настраиваем Auto layout.

Добавим все элементы и получаем:

Клонируем Frame «Product» до необходимого количества.

Настроим родительский Frame для «Product».

• Ширина 1000 и ограничитель max-width со значением 1000
• Направление в сторону с переносом на новую строку
• Выравнивание по центру с левой стороны
• Все отступы оставим в 0

Проверяем, что у нас получилось:

По аналогии создаем блок для светлой темы:

Переводим Frame в компоненты.

Проверим, что все элементы у нас готовы:

Все страницы мы будем делать внутри Frame, поэтому создаем фрейм и задаем размеры 1440 на 1080 — это эталонные размеры для области контента. Далее необходимо дать название нашему фрейму. Сейчас мы создаем главную страницу, поэтому назовем его «MainPage PC light» («PC» — так как версия для ПК, а «light» — так как светлая тема).

Создаем Frame и добавляем настройки:

• Ширина: 20 Hug
• Высота: 20 Hug
• Направление вниз
• Отступы 10
• Выравнивание по левому углу

Ничего страшного, что наш фрейм стал размером 20 на 20. Добавляем в него созданные элементы:

По аналогии добавляем темную тему:

Более подробно посмотреть процесс создания данных страниц можно в видео на Rutube.

Используя полученные знания, создадим страницу товара. Структура страницы:

Создадим страницу для товара «Футболка OnlineStore».

Информация, которую мы добавим:

• Путь: Главная/Магазин/Мужская одежда/Футболки/Футболка OnlineStore
• Оценка: 4.7 (21,671 Оценок)
• Артикул: A264671
• Бренд: Tutorial
• Наличие: В наличии
• Категория: Футболки
• Цена: 750 ₽ со скидкой 50%
• 3 цвета: синий, белый, черный
• Размерный ряд: XS, S, M, L, XL

Используя эти данные, составим Frame «Product Detail».

Создадим Frame «path», добавим данные и получим:

Добавим адаптацию под светлую и темную тему:

Фрейм «path» остается одинаковым как для светлой, так и для темной темы.

Страница отслеживания заказа

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

Путь до страницы: Главная/Отследить заказ

Для получения информации о заказе пользователь должен сообщить ID заказа и свой email.

Составим страницу и получим:

Добавим адаптацию под светлую тему и получаем:

После проверки данных пользователя будет перекидывать на страницу с активностью заказа. Структура данной страницы:

Используя макет, создадим страницу:

И создадим адаптив для светлой темы:

Популярная и востребованная функция в интернет-магазинах — возможность добавить товар в избранное. Создадим данную страницу, используя следующий макет:

Путь до страницы: Главная/Избранное.

Для примера добавим все три товара в список избранного и получим следующую страницу:

Адаптируем страницу под светлую тему и получаем:

Для создания корзины воспользуемся макетом:

Для примера добавим два товара в корзину:

Реализуем адаптацию под светлую тему:

Страница оформления заказа

Для создания страницы оформления заказа воспользуемся макетом:

Составим страницу, ориентируясь на макет, и получим:

Адаптируем дизайн под светлую тему и получим:

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

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

• Главная (общая аналитика, последние заказы, самые популярные товары)
• Товары (просмотр товаров, создание новых, товарный остаток)
• Заказы (все активные и архивные заказы)
• Пользователи (все зарегистрированные пользователи)
• Статистика (выручка за день, неделю, месяц; количество активных заказов; время большей активности; самый популярный товар)

Создадим структуру нашего меню:

Теперь создадим наше меню в Figma:

Применим к меню Auto layout и настроим его:

В Frame «Content» находится всё наше меню:

• Return — возврат в магазин
• Logo — картинка, в нашем случае текст «OnlineStore | ADMIN»
• Icons — иконки навигации

Далее создадим темную тему для меню:

Переходим к созданию самой страницы. Ее макет выглядит следующим образом:

Создадим раздел с аналитикой. Его макет:

Создадим Frame «Activity». Структура и настройки:

Добавим адаптацию под темную тему:

Для «Активных заказов» и «Популярных товаров» создадим обычную таблицу:

Собираем страницу и получаем:

Добавим адаптацию для темной темы:

По аналогии создаем все остальные страницы. В результате получаем следующие страницы.

Нужен сервер для практики? Арендуйте VPS/VDS в России — root-доступ, NVMe, DDoS-защита и поддержка 24/7.