Всем привет, дорогие друзья! Это пятый урок курса «Создание коммерческого сайта от А до Я». Сегодня мы продолжим создание дизайна сайта в Figma на примере реального сайта. В данном уроке мы создадим секцию «Нам доверяют», попутно научимся работать с цветовыми и текстовыми стилями документа, закрепим работу с Auto Layout на примере более сложной композиции и научимся создавать отзывчивые кнопки в дизайне.
Для прохождения необходимо скачать Материалы курса
Полезные материалы и ссылки:
- Как стать крутым веб-дизайнером: Страница урока. Рекомендуемый таймкод - 18:33
Для создания дизайна в Figma необходимо установить в систему все шрифты из папки «design/fonts/_src/». Кроме того, в архиве курса можно найти готовый дизайн, который мы создаем в уроках «Design (Woodtech).fig». Для того, чтобы импортировать файл дизайна в Figma, достаточно открыть главное окно и перетащить в него данный файл. В списке проектов у вас появится новый проект.
Сегодня мы на реальном практическом примере рассмотрим работу с цветовыми и текстовыми стилями Figma.
Стили (Styles) - это многократно используемые коллекции свойств, которые можно применять к любым элементам дизайна. В Figma можно создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия и т.д.
Auto Layout в Figma - это инструмент для автоматизации создания дизайна, который позволяет определять отношение объектов друг к другу, а также, поведение и отображение элементов при изменении содержимого. Простой пример, который мы рассмотрели сегодня в уроке - это создание кнопки, при изменении текста в которой, ее оформление и контейнер будут менять размер соответствующим образом.
Премиум уроки от WebDesign Master
Другие уроки по теме «Веб-дизайн»
- Создание дизайна сайта в Figma на реальном примере. Материалы курса
- Создание коммерческого сайта от А до Я. Урок 15: Дизайн сайта #12. Финал дизайна
- Создание коммерческого сайта от А до Я. Урок 14: Дизайн сайта #11. О компании #1
- Создание коммерческого сайта от А до Я. Урок 13: Дизайн сайта #10. Дизайн «Блога» и универсальной страницы
- Создание коммерческого сайта от А до Я. Урок 12: Дизайн сайта #9. Дизайн страницы услуг
- Создание коммерческого сайта от А до Я. Урок 11: Дизайн сайта #8. Дизайн страницы проекта