- Начало работы с Figma
- Создание фрейма
- Создание карточки
- HTML
- CSS
- Верстка страницы с карточками
- Верстка карточки
Figma (Фигма) — это графический онлайн-редактор для совместной работы. Figma используют в основном для создания прототипов сайтов и приложений. С фигмой можно работать с помощью сайта и десктопного приложения (после нажатия на "Desktop app for macOS" или "Desktop app for Windows"). Далее необходимо войти в аккаунт или зарегистрироваться.
После авторизации открывается главная страница, на которой в центре отображаются проекты, слева панель для перехода к недавним проектам, черновикам, избранными и проектами комманд (можно создавать команды и вместе создавать и работать над общими проектами).
Для создания проекта на левой панели нажимаем Drafts, затем на верхней панели Design file.
Интерфейс можно разделить на 4 области:
- Слева - слои
- В центре - рабочее пространство
- Справа - редактирование свойств объектов
- Сверху - инструменты
Фрейм — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения. Фрейм объединяет объекты внутри себя.
Добавим странице цвет, нажимаем на фрейм, в правой панели находим вкладку Fill - она отвечает за заливку, нажимаем на квадратик. Ползунок позволяет выбрать цвет или можно ввести код цвета.
Карточка будет отображать картинку, название, краткое описание, цену и кнопку для перехода к странице подробного описания продукта. Необходимы - 2 прямоугольника, картинка, 3 текстовых блока.
Для создания прямоугольника надо выбрать его в панеле инструментов или нажать клавишу R, в рабочей области удерживая левую кнопку мыши создать прямоугольник произвольного размера. Во вкладке с прямоугольником можно выбрать линию, стрелку, эллипс, многоугольник, звезду и изображение.
Создадим еще один прямоугольник, добавим изображение и текстовые элементы. Когда мы создаем внутри фрейма элементы, они автоматически в панели слоев создаются внтури этого фрейма.
Свойства элементов настраиваются в правой панели.
Свойства текста:
- Шрифт. Выбрать шрифт можно на сайте Google Fonts. Нажимаем на Filters->Language. Выбираем Cyrillic, чтоб выбрать шрифт, поддерживающий русский язык.
Выбираем текстовый элемент, во вкладке Text нажимаем на название шрифта, находим необходимый шрифт, ниже устанавливаем стиль и размер шрифта. Если нажать на три точки, то откроется со всеми настройками шрифта.
Аналогично сделаем для других текстовых элементов.
Свойства геометрических элементов:
- Цвет. Это уже умеем делать
- Скругление углов.
Рассмотрим параметры этой вкладки: X, Y - координаты элемента внтури фрейма, W, H - ширина и высота, пиктограмма угла - угол поворота элемента, скругление углов.
Сделаем скругление у карточки и изображения 20px, а у кнопки 10px.
- Обводка. У кнопки сделаем обводку, а заливку уберем. Для этого в Stroke нажмем на "+", добавится обводка. У нее можно настроить цвет, толщину, стороны, для которых их добавить. В Fill нажмем на "-" у цвета.
Свойства изображения:
Для изменения размера нужно потянуть за границы изображения, при этом для пропорционального изменения сторон необходимо зажимать Shift.
Если вам необходимо обрезать картинку, перейдите во вкладку Fill и нажмите на изображение. В открывшемся окне над изображением есть выпадающий список, в нем надо выбрать Crop и менять границы. Если вы хотите заменить картинку, наведите на картинку в этом окне, появится кнопка "Choose image".
Мы подготовили все элементы, теперь скомпануем их.
Для начала сгруппируем кнопку. Выбираем с нажатой клавишей Shift прямоугольник и текст для кнопки, в правой панели в самой первой вкладке можно настраивать выравнивание, нам надо выровнять элементы относительно друг друга по вертикали и горизонтали, нажимаем на 2 и 5 значки, затем нажмите Ctrl+G (группировка элементов).
default.mp4
Теперь собираем карточку, переносим элементы на прямоугольник, являющийся фоном карточки, выравниваем элементы, располагаем цену и кнопку на одном уровне и группируем. Если несколько элементов сгруппированы, то при одном клике на элемент, будет выделена вся группа, поэтому надо два раза кликнуть по элементу, чтоб выделить именно его.
В фигме есть такой инструмент, как Auto Layout. Это позволяет создавать контейнеры, которые могут содержать другие элементы интерфейса, затем можно настроить правила расположения, такие как выравнивание или расстояние между элементами. Auto layout можно сравнить с flex в css. Выделяем все элементы карточки, включая ее фон, в правой панели находим вкладку Auto layout, нажимаем плюс.
Сделаем картинку и описание на отдельных блоках.
HTML - это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом.
Элемент = открывающий тег + содержимое + закрывающий тег
<p>Hello world!</p>
Открывающий тег: состоит из названия (обозначения) тега, помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое
Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега
Содержимое: включает текст или другие элементы
Рассмотрим теги, которые нам необходимы:
<div>..</div>. Cлужит для структуризации контента на веб-странице, для заключения содержимого в отдельные блоки. div создает блок, который по умолчанию растягивается по всей ширине браузера, а следующий после div элемент переносится на новую строку.<p>..</p>. Представляет собой абзац, как блоки текста, отделенные от соседних блоков пустыми строками и/или отступами первой строки.<h1-6>..</h1-6>. Представляют шесть уровней заголовков разделов.<h1>- это самый высокий уровень раздела, а<h6>- самый низкий. По умолчанию все элементы заголовка начинатся с новой строки и занимают всю ширину, доступную в содержащем их блоке.<img/>. Добавляет изображение. Атрибут src обязателен и содержит путь к изображению (как путь до файла, так и ссылка на изображение в интернете), которое вы хотите вставить, атрибут alt содержит текстовую замену изображения. Поисковые системы по текстовой замене могут индексировать изображение, а при проблемах с выводом изображения, браузер показывает текстовую замену. Существует большое колчество атрибутов для настройки изображения, но это можно сделать и через css. Пример:<img src="./img/sun.png" alt="Картинка солнца"/><a>..</a>. Используется с атрибутом href и создает гиперссылку на веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или на что-либо еще, к чему может быть обращен URL.
Больше информации про теги.
CSS (Cascading Style Sheets) - это язык таблиц стилей, язык описания внешнего вида веб-страницы. С помощью html мы создаем элементы, а с помощью css - задаем им свойства. Предположим, что мы создали разметку с помощью html. Теперь мы хотим сделать красивый вншений вид страницы, поэтому нам надо описать, как должен выглядеть каждый элемент. Для этого надо описать набор правил форматирования элемента или просто стиль.
Набор правил = селектор {свойство: значение;}
div {
background: #EFEFEF;
}Селектор - имя элемента, которому будет присвоен стиль
Свойство - то, что хотим поменять
Значение - одно из возможных проявлений свойства
| Тип селектора | css | html | Устанавливает правила для |
|---|---|---|---|
| Тег | p { color: #ffffff; } |
<p> |
Всех тегов p |
| Идентификатор | #my-id { color: #ffffff; } |
<p id="my-id"> |
Элемента с данным идентификатором. На странице каждое значение идентификатора должно быть уникальным |
| Класс | .title { color: #ffffff; } |
<p class="title> <h3 class="title"> |
Для всех элементов с указанным классом. На странице может быть несколько экземпляров класса |
| Псевдокласс | p:hover { color: #252525; } |
<p> |
Указанного элемента в указанном состоянии. В этом примере <p> меняет цвет на при наведении мыши |
Свойств и их значений огромное количество, рассмотрим маленькую их часть, без которых не обойтись, остальное изучайте по мере необходимости.
width - определяет ширину элемента. Может быть указана в пикселях(px), процентах(%), em, rem, vw, vh (о них ниже)
height - определяет высоту элемента
border - рамка вокруг элемента. Можно настроить толщину, стиль рамки и цвет. Например, border: 1px solid black
border-radius - скругление краев в пикселях или процентах относительно элемента
margin - размер внешнего отступа вокруг элемента, указывается в px, %, auto и др
padding - размер внутреннего отступа, указывается в px, %, auto и др
Как указать margin и padding?
- Постфиксы: top, right, left, bottom. Примерs: { margin-top: 10px; padding-left: 2%; }
- Количество значений:
- { margin: 1px; } - отступ в 1px со всех сторон
- { margin: 1px 5px; } - первое значение для верхнего и нижнего отступов, второе для левого и правого отступов
- { margin: 1px 5px auto; } - первое значение для верхнего отступа, второе - левого и правого, третье - нижнего
- { margin: 1px 5px auto 0; } - по часовой стрелке для каждой из сторон: сверху, справа, снизу и слева.
display - отображение элементов.
Значения: block - элемент начинается с новой строки и занимает всю ширину контейнера, inline - элемент располагается внутри родительского элемента и не занимает отдельную строку, none - элемент не отображается, grid - элемент отображается в виде сетки, flex - гибкий.
display: flex
Основная идея — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление.
Свойства, которые будем использовать:
- justify-content - выравнивание элементов внутри контейнера по основной оси
- flex-direction - направление расположения элементов (в строку, в столбец и др.)
- align-items - выравнивание элементов внутри контейнера по поперечной оси
Эти свойства используются только при указании
{ display: flex; }Пример:
.container{
display: flex;
/* Элементы расположены в колонку */
flex-direction: column;
/* Между элементами равные интервалы */
justify-content: space-between;
}Подробнее про значения для этих свойств.
display: grid
Grid(сетка) в отличии от флекс-контейнера, одновременно работающего только с одним измерением, гриды дают возможность работать одновременно с двумя: горизонталью и вертикалью. Можно объединять отдельные ячейки, менять размеры строк и столбцов, регулировать отступы между ними.
Свойства, которые будем использовать:
- grid-template-columns, grid-template-rows - задают размеры и количество колонок или рядов сетки.
.container {
display: grid;
/* Будет создано 3 колонки */
grid-template-columns: 150px auto 40%;
/* Будет создано 2 ряда */
grid-template-rows: 200px 250px;
}Если нужны одинаковые колонки или ряды, то можно воспользоваться функцией repeat(). Для grid есть своя единица измерения - fr, которая рассчитывается автоматические.
grid-template-columns: repeat(3, 1fr) /*три колонки, каждая из которых будет занимать 1/3 ширины родителя*/
grid-template-columns: repeat(3, 250px); /*три колонки по 250 пикселей*/- gap - устанавливает отступы. Первое значение - отступы между строками, второе - отступы между колонками
gap: 50px 20px;
Подробнее про сетку.
background-color - цвет фона элемента
color - цвет текста
font-family - шрифт текста
font-size - размер шрифта
font-weight - стиль шрифта
text-align - выравнивание текста внутри элемента
background-image - фоновое изображение
object-fit - масштабирование и размещение изображения внутри контейнера
Единицы измерения:
- em — равна размеру шрифта родительского элемента. Если у родителя размер шрифта равен 16px, то 1em будет равен 16px. Это полезно, когда нужно, чтобы элемент изменялся вместе с размером шрифта родителя
- rem — равна размеру шрифта корневого элемента (html). Это полезно для тех элементов, которые должны быть привязаны к размеру шрифта html, а не к размеру шрифта конкретного родителя
- vw и vh используются для задания размеров в процентах от ширины или высоты окна браузера. Они полезны для создания адаптивных дизайнов, которые подстраиваются под разные размеры экранов. 1vw равен 1% от ширины окна браузера, а 1vh равен 1% от высоты окна
Сначала создадим разметку, а потом будем прописывать стили.
Создаем файл index.html и style.css, в index.html пишем.
<!DOCTYPE html>
<html lang="rus">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Магазин</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="space">
<div class="header"></div>
<div class="container"></div>
</div>
</body>
</html>Внутри body создадим div с именем space, внутри которого будем располагать элементы страницы. Страница разделена на две части: хедер и контейнер. В хедер вы можете добавить название компании, навигационную панель. В контейнере будут карточки.
Файл style.css
Когда создавали в Фигме карточку, то на сайте Google Fonts надо было выбрать шрифт, теперь на странице шрифта надо нажать Get Font->Get embed code->переключиться на @import->скопировать его. Этот import добавляем в начало style.css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: #000000;
}
body{
background: #EFEFEF;
}
.space{
width: 80%;
margin-left: auto;
margin-right: auto;
}
``
Что мы сделали с помощью стилей?
- установили фон для всей страницы
- контейнер со всеми элементами составляет 80% от ширины экрана и центрирован по середине за счет того
**Стили контейнера**
Пусть карточки располагаются по 4 в ряд и расстояние между ними будет 20px
```css
.container{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 20px;
}Карточка состоит из картинки, заголовка, описания, цены и кнопки. Будем использовать div class="card", который объединит все элементы.
Добавим это внутрь класса container
<div class="card">
<img src="./img/1.jpg" class="image">
<p class="title">LA ROCHE-POSAY effaclar</p>
<p class="short-description">Крем-гель для проблемной кожи</p>
<p>1348 ₽</p>
<a href="" class="card-button">Подробнее</a>
</div>Теперь у нас на странице есть просто картинка и текстовые элементы.
Стили для фона
В фигме смотрим, какие у нас свойства у фона карточки:
- цвет фона - #FFFAFA
- скругление краев - 20px
- внутренний отступ 20px, но давайте сделаем в процентах - 10%
.card{
border-radius: 20px;
background-color: #FFFAFA;
padding: 10%;
display: flex;
flex-direction: column;
justify-content: space-between;
}Чтобы размеры карточки менялась вместе с содержимым и можно было управлять расположением элементом, сделаем ее флекс-контейнером, элементы должны быть в столбик с одинаковым расстоянием между друг другом.
Стили для картинки
Из фигмы возьмем высоту и скругление.
Свойство object-fit - управляет масштабированием и размещением картинки
Значения:
- cover - изображение масштабируется таким образом, чтобы полностью заполнить родительский элемент, пропорции сохранятся, но всё, что не поместится в размер элемента, обрежется
- contain - изображение пропорционально масштабируется, чтобы целиком поместиться внутри родительского элемента, этом изображение может иметь пустые области по бокам, сверху или снизу
- fill - изображение заполняет всю доступную область элемента, при этом его пропорции могут быть искажены
- none - изображение будет отображаться в своих естественных размерах, игнорируя размеры родительского элемента
- scale-down — это значение определяется автоматически и выбирает более подходящее значение между none и contain, т.е. если размеры изображения больше размеров родительского элемента, то scale-down будет вести себя как contain, иначе — как none
.image{
width: 100%;
height: 211px;
border-radius: 20px;
object-fit: cover;
}Картинка будет занимать 100% доступной ей ширины, так как у карточки padding - 10%, то картника будет заполнять в ширину 80% карточки и располагаться по центру.
Стили для названия
Размер шрифта - 16px, стиль - bold (так же можно указывать в числах, bold - 700). Давайте еще сделаем отступ сверху в 16px.
.title{
margin-top: 16px;
font-size: 16px;
font-weight: bold;
}Стили для описания
Размер шрифта - 14px, стиль - Medium, сделаем отступ сверху и снизу - 10px, и чтоб текст заполнял в ширину 100% доступного ему пространства.
.short-description{
font-size: 14px;
font-weight: 500;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}Стили для кнопки
У текста ссылок по умолчанию устанавливается подчеркивание, убрать его можно с помощью text-decoration: none;
Для padding указано 2 значения, вспомним, первое - это верхний и нижний отступы, второе - правый и левый.
.card-button{
padding: 8px 10px;
border-radius: 10px;
border: 1px solid #000000;
text-decoration: none;
font-size: 14px;
font-weight: 500;
}Посмотрим, что получилось:
Теперь объединим картинку, заголовок и описание в один div, а цену и кнопку в другой.
<div class="card">
<div class="info">
<img src="./img/2.jpg" class="image">
<p class="title">LA ROCHE-POSAY nutritic intense riche</p>
<p class="short-description">Питательный крем для глубокого восстановления сухой кожи</p>
</div>
<div class="down">
<p>1915 ₽</p>
<a href="" class="card-button">Подробнее</a>
</div>
</div>Напишем стиль для элемента down, чтоб цена и кнопка располагались в строку и цена была у левого края, а кнопка у правого, для этого сделаем down флекс-контейнером и установим justify-content: space-between;, align-items отвечает за выравнивание.
Указать в качестве селектора тег, находящийся внутри класса можно так: .<имя класса> <имя тэга>. Для цены указываем размер шрифта и стиль.
.down{
display: flex;
justify-content: space-between;
align-items: center;
}
.down p{
font-size: 16px;
font-weight: 700;
}В итоге получаем такую карточку
Добавив еще карточки и название компании в хэдер получилось так
