Как создать макет сайта в Figma: рекомендации по созданию прототипа в Фигме

Figma — это универсальная программа для создания дизайнов любых предметов, сайтов и не только. В ней работают большое количество специалистов различных профессий: разработчики, дизайнеры, менеджеры, маркетологи. В этой программе можно реализовывать любые идеи. С помощью инструментов можно рисовать элементы для интерфейса, делать интерактивные примеры для презентаций, создавать векторные иллюстрации и пр. По словам преподавателей курсов Tilda с нуля https://videoforme.ru/course/website_development большое количество дизайнеров делают в фигме макеты для Тильды.

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

Начало работы в Фигме

Перед началом работы необходимо скачать и установить Фигму, но можно пропустить этот этап, так как в ней можно работать и через браузер вашего компьютерного устройства. Для этого необходимо зайти на официальный сайт, пройти регистрацию (она происходит на английском языке, поэтому советуем скачать расширение для браузера со встроенным переводчиком). Благодаря этому преимуществу, она более проста в работе, чем аналоги в виде Canva и имеет больше бесплатного контента.

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

Ещё есть бесплатное дополнение, позволяющие просматривать готовый дизайн с мобильного телефона, для этого скачиваем Figma Mirror (подходит для всех операционных систем). С помощью этого можно посмотреть, как будет выглядеть сайт или проект, если просматривать его с телефона.

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

Пункты меню менеджера файлов:

• Профиль – это ваша визитная карточка перед заказчиком, в настройках есть возможность загрузить или сменить аватар, имя, данные безопасности. Ещё в них можно сменить тарифы или удалить профиль.
• Поиск – в нём можете производить поиск проектов, в которых вы также состоите, с помощью поиск Search. Также можно находить файлы и др.
• Последние файлы – Figma автоматически сохраняет все загруженные файлы. Файлы, которые были открыты вами ранее, можете посмотреть в разделе Recent. В случае потери файла можно сделать его резервную копию, поэтому переживать об их сохранности.
• Плагины – они позволяют быстрее организовать работу. Например, в Unsplash можно найти стоковые иллюстрации, не отрываясь от процесса создания. В Iconify находятся более сорока тысяч векторы картинок для любого проекта. Все плагины вы можете посмотреть с помощью Browse all plugin.
• Новый файл – для создания нового дизайна в редакторе необходимо нажать Drafts или New File, которые находятся в правом верхнем углу. Файл первоначально будет назван Untitled.
• Команда – создавать проекты можно не только в одиночку, но и с другими. Для этого необходимо нажать New Team и дать ей название. Приглашение участников и назначение их на роль (редактора, заказчика и прочее) происходит через email.
• Проекты – сразу, когда вы добавляете команду, Figma осуществляет старт нового проекта. Что из себя он представляет? Представляет собой особую папку, сохраняющая файлы команды, относящиеся к какому-либо проекту. Эта функция удобна для оперативной работы, сортировки файлов.

Ещё в программе есть возможность создания дополняющее проекты внутри команды, для этого нужно нажать New Projects. Пригласить участников можно, нажав на Share.

Инструменты и возможности Фигмы

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

1. Фреймы.

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

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

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

2. Модульная сетка.

Она позволяет сделать более упорядоченными элементы. Для её настройки нажмите «+» в блоке Layout Grid. Укажите необходимое число колонок, их характеристики. В случае использования Тильды для создания сайтов устанавливаются определенные параметры (их устанавливают разработчики для своих работ).

3. Векторные формы.

Благодаря им можно обрисовывать различные форм с помощью нажатия на Shape Tool.

Для обводки предмета толщина линии изменяется в Stroke с помощью мыши.

Редактирование объекта происходит с помощью Pen Tool. В Effects есть возможность добавления тени.

4. Кривые.

С помощью Pen Tool можно рисовать различные кривые линии. Благодаря Bend Tool, происходит округление кривых.

5. Изображения.

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

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

6. Эффекты и маски.

Заливка объектов также возможна в фигме. Есть различные заливки, например, линейная, радиальный градиент и др.

Вы можете регулировать градиент и его насыщенность. Также указать несколько для него цветов с помощью палитры цветов.

7. Текст.

Стандартно для использования будут предоставлены шрифты из Google Fonts. Установление собственных шрифтов доступно только в версии Font Installers. Инструменты при работе с текстом стандартны как в большинстве текстовых редакторов.

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

8. Компоненты.

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

Дополнительные возможности

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

1. Grid for Tilda Publishing.

С помощью этого плагина создаётся сетка, чтобы не запоминать её для создания дизайна в фигме.

2. Unsplash.

Помогает работать с фото: вставлять их в нужном формате, не теряя качество фото, которое фирма сама снижает в случае загрузки фото маленького формата.

3. Blobs.

Способствует быстрому рисованию объектов в векторной графике, по сравнению со встроенным Pen Tool.

4. Humans to Figma.

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

Главное о Фигме

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

Также важным преимуществом Фигмы является то, что не нужно переживать из-за несовместимости программы и программного обеспечения, так как она работает через браузер.

Бесплатная версия Фигмы (тариф Starter) могут работать до двух человек. Поэтому индивидуальные фрилансеры могут работать на этой версии. В этом редакторе можно создать уникальные дизайны: рисовать, редактировать фото, делать наложения и другое. Также в нём есть различные плагины, позволяющие делать уникальные работы.

Таким образом, Figma является отличным приложением для создания макетов сайтов и дизайнов.

Подготовка к созданию дизайна сайта

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

Для того чтобы установить файл, нужно перейти в раздел «Drafts» и добавить его к другим файлам. Можно добавить его и по-другому: в левом верхнем углу есть плашка «Import», нажав на неё выберите «Sirius.fig».

Установка плагина с иллюстрациями для создания дизайна сайта в фигме

После скачивания файла выберите плагин для работы с иллюстративным материалом «Storyset by freepik», для установки нужно нажать «Install», находящаяся в верхнем правом углу.

Пошаговая инструкция по созданию дизайна сайта в Figma

Рассмотрим создание дизайна на примере создания конкретных элементов.

Создание первого экрана

Заказчик при получении заказа видит главный (первый) экран, поэтому важно проработать, чтобы он был презентабельным.

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

1. Затем активируем плагин с помощью нажатия на «меню», затем в «Plagins» нужно нажать на «Storyset by freepik».

2. Благодаря плагинам, вы выбираете необходимые иллюстрации (их стили).

3. Выбранную картинку переместить к остальным фигурам.

4. Отмечаем фрейм и в правой панели и в разделе «Fill» выставляем цветовое значение через #394755.

5. Текст делаем белым.

6. Убираем элементы, которые уже не понадобятся, на иллюстрации. Чтобы выбрать элемент, необходимо нажать на Ctrl (на клавиатуре) и мышью выбрать объект.

7. Создать круг можно благодаря «Ellipse».

8. Круг также следует переместить во фрейм. Чтобы перенести на задний план, зажмите «Ctrl + Alt + [».

Создание карточек внизу первого экрана

Благодаря им, можно красиво и качественно устроить рекламу для вашего товара или услуги.

1. С помощью «Ctrl + C» производим копирование из файла карточки.

2. Вставляем элемент «Ctrl + V».

3. Необходимые элементы копируем из карты.

4. Инструментом «Rectangle» внутри карточки создаем прямоугольник.

5. Необходимые фигуры выделяем и производим выравнивание.

6. После выбора прямоугольников нажимаем «Frame seleciton».

7. Меняем слой на «Img».

8. Производим копирование группы элементов, при этом необходимо зажать «Alt».

9. Создаем нужное количество прямоугольников.

10. Открываем плагин и выбираем карточки.

11. Указываем кнопки, цены с помощью, потом убираем, нажав на «Backspace».

12. Получившиеся прямоугольники перетаскиваем в ваши карточки. Ненужное просто удаляем.

13. Дублирование происходит при нажатии «Ctrl + D».

14. Готовые созданные карточки перемещаем во фрейм.

Изменение цвета в дизайне сайта с иллюстрациями в Figma

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

Для этого нужно: после выбора необходимой иллюстрации нажимаем на «Selection colors» и выбираем необходимый цвет. Также можно изменять цвет не только всего дизайна в фигме, но и элементов: цифр, изображений, иллюстраций и др.

Заключение

Figma — это уникальный сервис, позволяющие создавать сайты, дизайны презентаций и пр., которые будут актуальны в учёбе и бизнесе. Благодаря уникальным дизайнам, созданный в ней, можно увеличить оборот от рекламных кампаний, запустить интерактивный сайт и товары в производство (их визуал). Программа требует внимания при работе с элементами и большого количества знаний, чтобы создавать качественные продукты в ней. Так как верстка, сетка для проекта требуют внимательного изучения, чтобы все получилось. Несмотря на все сложности освоения этой программы, в интернете есть много уроков и курсов для этого.