1) Создай прямоугольник (R) белого цвета, 373х380рх, скруглить его углы на 5px: 2) Создай контейнер для фото из прямоугольника (R) 373x225рх, скругли у него только верхние углы: 3) Помести внутрь заголовок и описание и создай иконку рейтинга из стандартной фигуры Звезда. Цвет закрашенных звезд #286AEB, цвет пустой звезды #DDDDDE. Размер одной звезды 12px, расстояние между звёздами 6px. Чтобы проверить расстояние, выдели объект и зажми Alt, наведи курсом на объект, до которого хочешь посчитать расстояние.
4) Помести изображение в заглушку для него. Вот такая карточка у тебя должна получиться: 5) Создай компонент из элементов карточки. Для этого выдели их и нажми на Create Component, в верхней панели инструментов (Ctrl+Alt+K). Переименуй компонент в Hotel card’s. Вынеси его за пределы фрейма, так как родительские компоненты должны храниться вне фрейма и на отдельной странице.
6) Выдели созданный компонент и нажми Ctrl+C, то есть скопируй компонент. Затем выдели фрейм с сайтом и нажми Ctrl+V. Поставь его под заголовок второго блока и продублируй, расставив по сетке, чтобы получилось всего 3 карточки: Обязательно проверь, чтобы родительский компонент находился вне фрейма, а внутри фрейма находились его копии.
8) Создай прямоугольник 246х56px, цвет #F7F7F8, скругление углов 5рх и перетащи в него любой из пунктов, которые относятся к форме поиска туров. Также перетащи в него созданные ранее иконки При этом они должны быть выровнены между собой по центру относительно вертикальной и горизонтальной линии (собраны в кучку): Назови иконки соответствующим именем, чтобы потом не запутаться в панели со слоями.
9) Выдели прямоугольник, текст и иконки и создай из них компонент. Переименуй созданный компонент на Input: 10) Оставь включенной только одну иконку, напротив имени остальных иконок с панели со слоями нажми на пиктограмму глаза, чтобы их скрыть.
11) Выдели текст и привяжи его к левому краю и к центру области с помощью Constraints: 12) Выдели иконки и привяжи их к правому краю и к центру области: 13) Выдели все иконки и замени цвет на оранжевый (стиль цвета уже создан), просто выбери его из списка: 14) Дублируй компонент во фрейм, сделай 4 копии (под каждый пункт), замени текст (его мы уже набрали) и включи нужные иконки с помощью глаза в панели со слоями. От текста до иконки расстояние должно быть 37px, между самими пунктами 20px
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: Сейчас создался мастер-компонент с 2-мя вариантами: 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 реакции