Как создать страницу в фигме

Создание дизайна сайта в Figma на реальном примере. Материалы урока

Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На данной странице вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.

Поделиться Отправить Класснуть Запинить

Материалы курса, готовый результат: Скачать

Полезные материалы и ссылки:

• Сайт Figma: Figma Home
• Программа «Pencil» для создания схем и прототипов: Скачать (Win)
• Создание слайдера и посадка на Winter CMS: Страница курса
• Как стать крутым веб-дизайнером: Страница урока
• Что такое диаграмма связей: Диаграмма связей (Wiki)
• Что такое прототипирование: Прототипирование (Wiki)
• Создание Bootstrap-сетки в Figma: Страница урока
• Иконки Font Awesome: Посмотреть и скачать
• SVG Viewer Extension for Windows Explorer: Скачать с GitHub
• Визуальная иерархия в интерфейсах: Изучить статью
• Векторный редактор Inkscape: Ознакомиться и скачать
• Работа с иконками для веб-дизайна: Изучить урок
• Программа пипетка «Instant Eyedropper»: Instant Eyedropper Home

• Стрелка «Назад»: ←
• Стрелка «Вперёд»: →

В архиве материалов курса можно найти прототипы всех страниц сайта, которые мы разработали в этом курсе. Экспорт прототипов лежит в папке «design/wireframes/». Пресет настроек для приложения Pencil, который вы можете импортировать в Pencil на вкладке «My Shapes», можно также найти в архиве курса — «other/WireFrame-Pencil-Collection.zip».

В архиве материалов есть все используемые в дизайне шрифты. Для прохождения курса необходимо установить в систему все шрифты из папки «design/fonts/_src/».

Кроме того, в архиве курса можно найти готовый дизайн «Design (Woodtech) — Ready.fig». Для того, чтобы импортировать файл дизайна в Figma, достаточно открыть главное окно Figma и перетащить в него данный файл. В списке проектов у вас появится новый проект Figma.

Бланк технического задания «other/Техническое задание – Бланк.docx» – это универсальная заготовка технического задания на разработку сайта.

Готовая карта сайта (Mind map):

Для закрепления информации:

Компоненты Figma (Components) — это объекты, которые используются в дизайне многократно. По-сути, компоненты Figma — это объекты для повторного использования, которые могут быть простыми (например, кнопка) или сложными (форма обратной связи, заголовок, footer и т.д.). Ключевой особенностью компонентов Figma является возможность повторного использования блоков, где при редактировании корневого (главного) компонента, меняется структура и наполнение во всех дочерних (копиях) компонентах во всех фреймах документа.

Auto Layout Figma — это инструмент для автоматизации создания дизайна, который позволяет определять отношение объектов друг к другу, а также, поведение и отображение элементов при изменении содержимого.

Стили Figma (Styles) — это многократно используемые коллекции свойств, которые можно применять к любым элементам дизайна. В Figma можно создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия. Ключевой особенностью стилей Figma является возможность менять свойства стиля в одном месте для всех элементов дизайна, во всех фреймах документа. Данный функционал схож с использованием переменных в программировании.

Inkscape (Инкскейп) — свободно распространяемый векторный графический редактор (Open source), который мы используем в курсе для векторизации растровых иконок.

Настройки экспорта оптимизированного SVG (Inkscape)

Прототип и готовый дизайн главной страницы:

Прототип и готовый дизайн страницы «Наши проекты»:

Прототип и готовый дизайн страницы проекта:

Прототип и готовый дизайн страницы услуг:

Прототип и готовый дизайн страницы «Блог компании»:

Прототип и готовый дизайн универсальной страницы:

Прототип и готовый дизайн страницы «О компании»:

Прототип и готовый дизайн страницы «Наши преимущества»:

Прототип и готовый дизайн страницы «Обратная связь»:

Прототип и готовый дизайн страницы «Наши партнеры»:

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Я — фрилансер! Базовый курс для начинающих

Другие уроки по теме «Веб-дизайн»

• Создание Bootstrap-сетки в Figma
• С чего начать работу над дизайном и где брать вдохновение
• Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
• Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
• Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, верстка, самообучение

Как я навел порядок страниц в Фигме

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

Проблема

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

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

Она гибкая, наглядная и удобная с точки зрения ориентации в файле. И что самое важное — она очевидна для тех, кто заходит в файл впервые!

Решение

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

1. Продакшен — итоговые макеты, готовые к разработке;
2. Черновик — макеты, которые находятся в процессе работы;
3. Презентация — прототипы для показа;
4. Архив — вспомогательная страницы для сбора ненужных в текущий момент макетов;

Для дополнительного отделения типов создаем пустую страницу и вставляем в название какие-нибудь символы на свое усмотрение. Я чаще всего использую: «• • •» или «/ / /».

Наименование черновиков

Хорошо при работе над проектами перемещаться от общего к частному. Начинаем с простых наименований, вроде: главная страница, страница товара, а затем, когда задачи становятся более узкими—разбиваем на части.

Я называю страницы, в соотвествии тому, как называются задачи в Jira. Если название сложное или длинное, то пишу кратко в двух словах и добавляю номер задачи, например: Фильтры #220.

Наименование итоговых макетов

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

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

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

Бонус

Чтобы упростить поиск страниц или макетов, установите плагин — Figma Walker. Это поисковая строка, которая находит любую сущность в файле, если ввести часть ее названия.

К плагину можно привязать горячие клавиши на macOS. Для этого:

1. Открываем настройки;
2. Выбираем раздел «Keyboard»;
3. Переходим на вкладку «Shortcuts»;
4. Выбираем в списке слева раздел «App Shortcuts»;
5. Нажимаем на плюсик и в появившемся окне заполняем поля, как в скрине (комбинацию клавиш выбирайте на свое усмотрение);

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

Мы запустили свое приложение, которое напоминает вам о ваших идеях и важных мыслях. Оно называется Noter.

На своем канале в Телеграме рассказываю о процессе разработки и показываю макеты до того, как они попадут в разработку: @raselgit

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

Регистрация и добавление нового макета

Чтобы начать пользоваться редактором, нужно зайти на https://www.figma.com/ и зарегистрироваться. Можно войти через Google или просто создать аккаунт на сайте.

Вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для знакомства с приложением. Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение .fig или .sketch . При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте.

После добавления макет появится в общем списке.

Структура макета и рабочие инструменты

Интерфейс в разделе работы с макетом состоит из нескольких блоков.

1. Боковая панель. Здесь показана вся структура проекта. Можно проследить вложенность элементов и найти нужный. Каждый тип элемента обозначен отдельной иконкой — текст, изображение, составной блок.
2. Основная рабочая область в центре — для непосредственного взаимодействия с макетом.
3. Основное меню в верхней части страницы. Большая часть инструментов в нём предназначены для дизайна, но вам точно пригодится меню масштабирования, расположенное справа.
4. Боковая панель справа включает три вкладки, но нам будут нужны только две из них — Design и Inspect, в которой расположены разделы Code и Local Styles. В этих вкладках находится вся доступная информация об элементе.

Работа с параметрами элементов

Основная задача верстальщика при работе с макетом — узнать параметры элементов и перенести их в вёрстку. Давайте разберём по пунктам, как это сделать в Figma.

Параметры текста

Чтобы узнать все текстовые параметры, нужно выделить элемент и открыть вкладку Inspect — Code в правой боковой панели. Там в списке свойств отобразятся все используемые параметры — название, размер, насыщенность и цвет шрифта, высота строки и остальные.

Изображение

Свойства width и height во вкладке Inspect — Code расскажут о размере изображения.

Также можно скачать любое изображение из макета. Для этого нужно кликнуть по вкладке Design и там найти последний пункт Export. Далее в выпадающем меню выбрать формат, в котором вы хотите экспортировать изображение — PNG, JPG, SVG или PDF.

Цвет элемента

В разделе Code вкладки Inspect можно узнать фоновый цвет элемента — значение background .

Размеры и расстояние между элементами

Размер определяется несколькими способами.

Например, во вкладке Code можно посмотреть значения свойств width и height . Или просто выделить нужный блок — размер отобразится внизу элемента. Также можно узнать расстояние между двумя любыми элементами. Для этого нужно выделить первый элемент, а затем наводить курсор на остальные — будет появляться направляющая и значение.

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

Пригодится верстальщику:

• Дизайн для верстальщиков
• Вёрстка для дизайнеров
• Топ-20 лучших плагинов для Figma в 2023

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Уроки по дизайну в Figma (часть 1)

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

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

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

Итак, погнали. Скачиваем, устанавливаем, открываем Фигма, создаем новый проект:

Сразу переименуем проект, кликнув по «Untitled» в верхней части экрана:

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

Зачем использовать разные страницы

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

Что такое UI-кит вкратце

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

Чтобы создать страницы, вверху слева нажмите на Pages и значок + (плюс).

Делаем три страницы и переименовываем их в UI, Home, Contacts. Название, очевидно, ни на что, кроме нашего удобства, не влияет.

Далее переходим во вкладку «UI» и создаем новый фрейм (кнопка F или иконка на верхней панели).

Нас особо не интересуют размеры этого фрейма, так как на нем будут располагаться отдельные элементы, не образующие какую-то страницу. Я задал размеры 800 по ширине и 1000 по высоте.

Назовем этот фрейм Elements — в этом фрейма мы будем размещать наши элементы управления.

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

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

Итак, мы находимся на странице UI, на фрейме Elements. Выбираем инструмент «Прямоугольник» (R) и создаем прямоугольник произвольных размеров на нашем фрейме:

Переименовываем его в древе слоев в «Фон кнопки»:

Теперь мы выделим его и отредактируем его параметры: установим ширину 150, высоту 50 и зальем ее градиентом:

Высота — это параметр H, ширина — W. В палитре выбора цвета переключите сверху с Solid (сплошной цвет) на Linear (линейный градиент):

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

Чтобы наша кнопка была более материальной, повесим на нее тень: выделим кнопку и нажмем в параметрах справа + в области Effects:

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

Отредактируем параметры тени, чтобы было посимпатичнее. Для этого нажмем на иконку слева от эффекта.

Фон готов, добавляем текст кнопки: выбираем инструмент «Текст» и выделяем область по площади всей кнопки: это нужно для того, чтобы нам было легко расположить текст по центру фона. Вводим текст:

И выставляем параметры текста справа как на скриншоте: выравнивание по центру по высоте и по ширине.

Далее в древе слоев выделяем наш фон и текстовый слой и группируем их (control + g).

Переименовываем группу в «Обычная кнопка».

На этом этапе мы создали элемент, и теперь нам надо сделать из него компонент. Выделяем группу и жмем сочетание Command + Option + K или Control + alt + K, либо выбираем пункт из выпадающего меню:

Готово, вы создали компонент!

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

Нам этом первый урок окончен.