Создание компонентов
Выполни следующие действия по инструкции:
1) Создай прямоугольник (R) белого цвета, 373х380рх, скруглить его углы на 5px:
2) Создай контейнер для фото из прямоугольника (R) 373x225рх, скругли у него только верхние углы:
3) Помести внутрь заголовок и описание и создай иконку рейтинга из стандартной фигуры Звезда. Цвет закрашенных звезд #286AEB, цвет пустой звезды #DDDDDE. Размер одной звезды 12px, расстояние между звёздами 6px.
4) Помести изображение в заглушку для него. Вот такая карточка у тебя должна получиться:
5) Создай компонент из элементов карточки. Для этого выдели их и нажми на Create Component, в верхней панели инструментов (Ctrl+Alt+K). Переименуй компонент в Hotel card’s. Вынеси его за пределы фрейма, так как родительские компоненты должны храниться вне фрейма и на отдельной странице.
6) Выдели созданный компонент и нажми Ctrl+C, то есть скопируй компонент.
Затем выдели фрейм с сайтом и нажми Ctrl+V. Поставь его под заголовок второго блока и продублируй, расставив по сетке, чтобы получилось всего 3 карточки:
7) Замени изображения в двух карточках:
Ссылка на изображения
8) Создай прямоугольник 246х56px, цвет #F7F7F8, скругление углов 5рх и перетащи в него любой из пунктов, которые относятся к форме поиска туров. Также перетащи в него созданные ранее иконки
9) Выдели прямоугольник, текст и иконки и создай из них компонент. Переименуй созданный компонент на Input:
10) Оставь включенной только одну иконку, напротив имени остальных иконок с панели со слоями нажми на пиктограмму глаза, чтобы их скрыть.
11) Выдели текст и привяжи его к левому краю и к центру области с помощью Constraints:
12) Выдели иконки и привяжи их к правому краю и к центру области:
13) Выдели все иконки и замени цвет на оранжевый (стиль цвета уже создан), просто выбери его из списка:
14) Дублируй компонент во фрейм, сделай 4 копии (под каждый пункт), замени текст (его мы уже набрали) и включи нужные иконки с помощью глаза в панели со слоями.
15) Осталось добавить кнопку. Создай прямоугольник 180х56рх, залей оранжевым цветом (выбери из стилей).
Напиши в ней с левой стороны текст такого же размера и стиля, как в компоненте Input, только белым цветом: Book a ticket.
16) Вставь иконку поиска с правой стороны. Выдели все 3 объекта и создай компонент и переименуй его в button. В нём привяжи текст и иконку по такому же принципу, как и в Input. Скопируй кнопку и подставь её в строку бронирования тура:
Итого у тебя должно быть в документе 3 родительских компонента, которые лежат вне фрейма, а их копии находятся внутри фрейма, то есть в самом дизайне:
17) Создай кнопку для слайдера для второго блока, вне фрейма, так как это будет родительский компонент.
Для этого создай эллипс 52х52рх, цвет #EE663B, создай пером стрелку в любую сторону, размер 10х10рх, цвет белый, толщина 1,5рх.
Размести стрелку по центру эллипса, выдели эти два элемента и создай компонент:
18) Рядом создай прямоугольник 22х6рх, цвет #EE663B, скругление углов 6px. Рядом с этим прямоугольником создай эллипс 6х6px, цвет #E3DEDE:
19) Выдели созданные в 18 шаге прямоугольник и эллипс и создай из них набор компонентов Create component set:
20) Выдели прямоугольник, и в правой панели интерфейса переименуй Property 1 на Status. Чтобы переименовать, достаточно 2 раза кликнуть в поле. В следующем окошке (с именем объекта) напиши active-bullet. Это означает, что данный стиль буллита будет использоваться для индикации активного слайда. У тебя сейчас выглядит примерно так:
21) Выдели эллипс, и проделай тоже самое с ним. В первом окошке уже будет стоять Status, а во втором окошке напиши: bullet-default.
Таким образом мы создали свойство (Property) со статусом (Status) буллита: активный (Active) и по умолчанию (Default).
22) Перенеси кнопку со стрелкой во фрейм: выдели её, зажми Alt и левой кнопкой мыши перетяни во фрейм. Затем продублируй её: выдели кнопку, зажми Alt и ЛКМ потяни в правую сторону. Продублированную стрелку отрази по горизонтали: выдели её и нажми Shift+H.
23) Перетяни из родительского компонента прямоугольник и эллипс. Эллипс нужно будет продублировать 2 раза (можно зажав alt перетянуть, а можно просто Ctrl+C/Ctrl+V). Расставь следующим образом: расстояние между буллитами — 16px, расстояние от буллитов до кружков со стрелкой — 30px:
24) Выровняй их по правой стороне сетки, и по центру относительно горизонтальной линии заголовка:
25) Выдели родительский компонент кнопки слайдера и вверху кликни на Add variant:
26) У созданного варианта поменяй заливку на #FF906C, вместо Property 1 напиши Status, и во второй строке напиши Hover. Этот вариант стрелки будет отображаться при наведении на первый вариант. А у первого варианта (по умолчанию) во второй строке напиши Default.
27) Чтобы настроить наведение — выдели вариант Default, перейди во вкладку Prototype, и нажми на пиктограмму напротив строки Interactions «+»:
28) Выбери следующие параметры: вместо On click установи While hovering, вместо None установи Change to и выбери в выпадающем списке напротив строки Status вариант Hover. Вместо Instant установи Smart Animate:
Чтобы проверить работу анимации, перейди в предпросмотр (иконка play в правом верхнем углу интерфейса)
Пример работы кнопок смотри здесь
Тоже самое можно сделать для кнопок слайдера в главном блоке. Только в том случае нужно выделить обе стрелки и создать сет. Полупрозрачную кнопку можно сделать для обычного состояния Default, а кнопку с заливкой сделать для состояния Hover.
Вот такое количество компонентов получится в итоге в твоём документе:
30 августа, 21:49
138
просмотров
2
реакции
2
0