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

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

Смотреть урок на YouTube

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

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

• Сайт Figma: Figma Home
• Программа «Pencil» для создания схем и прототипов: Pencil Project Home
• Создание слайдера и посадка на 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, правила хорошего тона, организация работы, верстка, самообучение

Дизайн сайта в фигме за 15 минут: делаем макет с иллюстрациями

Веб-дизайн, Уроки

1 min read
25.09.2021

В этом уроке разбираемся как сделать дизайн сайта в фигме за 15 минут на практике. Будем делать дизайн макет Landing Page с иллюстрациями. Вы узнаете, где брать качественные иллюстрации бесплатно и как их использовать в своём проекте.

Получить бесплатно 24 раздела landing page для figma

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

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

Чтобы установить комплект перейдите в раздел «Drafts» и перетащите его к другим файлам, которые у вас есть. Также слева, сверху есть иконка «Import». Можете её нажать и выбрать файл «Sirius.fig» на вашем компьютере.

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

В этом уроке мы будем использовать плагин с иллюстрациями «Storyset by freepik», который вы можете установить перейдя по ссылке. Для его установки нажмите на кнопку «Install» сверху, справа.

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

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

Первым делом, вам нужно взять элементы из комплекта, который вы ранее установили. Рекомендую взять шапку и раздел с текстом, как показано выше. Поместите шапку к тексту.

Чтобы активировать плагин, который мы установили «Нажмите на меню слева», далее перейдите в «Plagins» и выберите из списка «Storyset by freepik».

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

Помещаю иллюстрацию во фрейм к нашим элементам и тексту.

Выбираю фрейм и в правой панели, внизу надписи «Fill» ставлю значение цвета #241543.

Затем меняю цвет текста на белый.

Удаляю не нужные элементы в иллюстрации. Чтобы выбрать какой-то элемент, нажимаю на клавшу «Ctrl» и кликаю на левую клавишу мыши для выбора объекта за 1 клик.

Создаю круг с помощью инструмента «Ellipse».

Помещаю круг во фрейм и перемещаю на задний план. Для этого нажимаю на комбинацию горячих клавиш «Ctrl + Alt + [».

Изменяю цвет круга на #3B246B.

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

Затем копирую из комплекта карточки товара. Для копирования нажимаю «Ctrl + C».

Чтобы вставить элементы нажимаю «Ctrl + V».

Копирую верний элемент из карточки зажав левую клавиши мыши и клавишу Alt. Тяну в сторону.

Создаю внутри этого прямоугольника ещё один прямоугольник. Для этого активирую инструмент «Rectangle» сверху.

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

Выделяю 2 прямоугольника, нажимаю правую клавишу мыши и выбираю «Frame seleciton».

Переименовываю слой на «Img».

Копирую группу элементов с зажатой клавишей «Alt».

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

Запускаю плагин с иллюстрациями «Storyset by freepik» и нажимаю на прямоугольник. Затем на иллюстрацию. Аналогичную операцию проделываю с другими 6 прямоугольниками.

Выбираю кнопки и цены, с зажатыми клавишами «Ctrl» «Shift». Затем удаляю нажав на клавишу «Backspace».

Получаются карточки, без цены и кнопки.

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

Удаляю не нужные элементы сверху карточек. Получается 3 карточки с иллюстрациями.

Дублирую карточки, нажав на «Ctrl + D». Затем помещаю 3 оставшиеся иллюстрации в эти карточки.

Получилось 6 карточек с иллюстрациями.

Перемещаю карточки к нашему фрейму.

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

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

Все элементы имеют значение «Синий» в цветовой палитре.

Если его изменить например на розовый, то цвет всех элементов также изменится.

Можно дополнительно скопировать какие-то элементы в комплекте. Например текст с цифрами.

Затем разместить их внизу заголовка.

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

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

Заключение

Итак, в этом видео вы узнали как сделать сайта (дизайн лендинг пейдж) в фигме. Также разобрались с плагином, который позволяет вставлять классные иллюстрации. Смотрите другие уроки по веб-дизайну, которые помогут разобраться в программе Figma и набить руку.

Автор статьи: Владимир Чернышов

P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Как мы создали нашу систему дизайна веб-сайтов

Примечание. Первоначально этот пост был опубликован на сайте designsystems.com. Он был обновлен и переиздан здесь

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

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

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

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

Мы также искали похожие, но не совсем одинаковые элементы и пришли к единому стилю. Таким образом, вместо 12 различных размеров заголовков мы установили стили h2-h4, основного текста и технического текста. Мы сделали то же самое для нашего блога и другого длинного контента, добавив такие стили, как кавычки и блочные кавычки.

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

В течение месяца наша небольшая команда создала и организовала надежное, адаптируемое руководство по стилю и библиотеку компонентов, которые теперь находятся в нашей CMS Contentful. Все едино: типографика, размеры, отступы, высота строк, цвета и сетка. Теперь, когда команда дизайнеров приступает к созданию новой страницы, у них всегда под рукой гибкие строительные блоки. Создать h2 так же просто, как взять его из дизайн-системы. Мы также начали «компонентировать» обычно парные элементы и полностью собранные секции, используя элементы из нашей системы. Мы называем эти более крупные организмы «FLEGO» (Figma + LEGO), и вы можете проверить их в этом общедоступном файле.

Большая часть основного маркетингового сайта Figma теперь построена с использованием этой структуры. Используя нашу систему дизайна через Contentful, мы можем перейти от концепции к выпуску за один день и сделать это без необходимости в каком-либо новом коде. Например, когда мы хотели создать страницу «Что нового», маркетолог, у которого изначально была идея, и я сделали быстрый каркас с помощью FLEGO, совместно работали над копией непосредственно в файле Figma, а затем построили страницу, используя компоненты. в нашей CMS. Мы прошли путь от идеи до работающей веб-страницы менее чем за 48 часов.

Часть страницы «Что нового», созданная с помощью FLEGO.

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

Вверху: часто используемый FLEGO с новым шрифтом Whyte. Внизу: тот же FLEGO со старым шрифтом Apercu.

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

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

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

Пытаетесь организовать и продвигать собственную систему? Вот файл, который управляет системой маркетингового сайта Figma, а также пустой шаблон для начала работы:

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

Фигурка | Как превратить дизайн Figma в веб-сайт

Как создать веб-сайт с помощью Figma

05.03.2022 • Тайлер Кеннеди

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

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

С помощью Figment вы можете создать свой веб-сайт прямо из дизайна Figma без программирования. Вот как это работает:

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

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

Дизайн для мобильных и настольных компьютеров

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

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

2. Установите подключаемый модуль Figment

Когда ваш дизайн завершен, пришло время создать веб-сайт. Для этого установите плагин Figment со страницы сообщества Figma. На странице плагина Figment нажмите «Установить» в правом верхнем углу.

Теперь у вас есть все необходимое для создания сайта на Figma.

3. Запустите подключаемый модуль Figment

Установив подключаемый модуль Figment, откройте свой дизайн в Figma. Затем запустите плагин Figment. Для этого щелкните правой кнопкой мыши свой дизайн и выберите «Плагины», а затем щелкните плагин Figment.

Это запустит окно плагина Figment внутри приложения Figma. Плагины Figma работают как в браузерной, так и в настольной версии Figma, поэтому вы можете использовать плагин Figment на любой платформе.

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

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

Знакомство с макетом плагина Figment

Плагин Figment позволяет полностью настроить дизайн Figma перед тем, как превратить его в веб-сайт. В открытом окне плагина вы увидите 3 раздела.

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

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

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

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

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

4. Опубликуйте свой веб-сайт

Когда вы закончите наносить последние штрихи и будете готовы опубликовать свой веб-сайт, Figment сделает это очень просто. Вернитесь на главный экран и найдите кнопки Опубликовать на веб-сайте или Код экспорта внизу.

Это дает вам два варианта того, как вы можете превратить свой дизайн в веб-сайт.

Публикация дизайна Figma на веб-сайте

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

Здесь вы можете выбрать фрейм, который хотите экспортировать как веб-сайт. ( Подсказка: Чтобы опубликовать несколько фреймов, поместите их в один контейнер фреймов)

Далее вы можете просмотреть домен, на котором будет размещен ваш новый веб-сайт. Если у вас есть хобби-план, для вас будет создан домен. Если вы используете план Pro или Team, вы можете подключить свой собственный домен, нажав Use Custom Domain .

Чтобы добавить метаданные на свою веб-страницу в целях SEO, заполните заголовок и описание страницы. Вы даже можете увидеть предварительный просмотр Google для вашей веб-страницы.

Когда вы будете готовы к запуску, нажмите Build & Publish! и наблюдайте, как ваш сайт появляется перед вашими глазами. Когда ваш сайт будет готов, нажмите кнопку еще раз, чтобы просмотреть ваш новый великолепный сайт в браузере.

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

Экспорт дизайна Figma в код HTML и CSS

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

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

Чтобы экспортировать полный код веб-сайта, вам потребуется план Pro или Team. Нажмите Экспорт полной страницы в нижней части экрана, чтобы получить полный код HTML и CSS для вашего дизайна.

Все готово 😆

И с этим все в порядке! Figment позволяет легко создать веб-сайт из Figma без необходимости кодирования.