Создание коммерческого сайта от А до Я. Урок 5: Создание дизайна сайта #2

Всем привет, дорогие друзья! Это пятый урок курса «Создание коммерческого сайта от А до Я». Сегодня мы продолжим создание дизайна сайта в Figma на примере реального сайта. В данном уроке мы создадим секцию «Нам доверяют», попутно научимся работать с цветовыми и текстовыми стилями документа, закрепим работу с Auto Layout на примере более сложной композиции и научимся создавать отзывчивые кнопки в дизайне.

Для прохождения необходимо скачать Материалы курса

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

• Как стать крутым веб-дизайнером: Страница урока. Рекомендуемый таймкод - 18:33

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

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

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

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