Откройте Фигму. Нажмите New Design File:

Чтобы создать фрейм, зажмите F, левой кнопкой мыши кликните по рабочей области и, не отпуская, потяните в сторону. Получившемуся фрейму на правой панели свойств задайте размеры:

Сочетанием Shift + R включите линейки. Подведите курсор мыши к линейке на краю рабочего поля. Когда курсор превратится в стрелочку, зажмите левую кнопку мыши и потяните в сторону, появится направляющая. Зажмите клавишу Option/Alt и установите две вертикальные направляющие, отступив от края фрейма 200 и 300 пикселей. Создайте горизонтальную направляющую по центру:

Чтобы создать прямоугольник, зажмите R, левой кнопкой мыши кликните по рабочей области и, не отпуская, потяните в сторону. На правой панели свойств задайте размеры и скругления. Измените значение Fill на 303D64. Расположите прямоугольник по центру фрейма:

Чтобы создать круг, нажмите O, левой кнопкой мыши кликните по рабочей области, зажмите Shift и, не отпуская, потяните в сторону. Выделите круг и с зажатым Option/Alt скопируйте его. Повторите. Кругам на правой панели свойств задайте размеры 140, 100 и 70 пикселей. Измените их значения Fill на 37527B, 3D658F и 4476A0:

Выделите круги и, в правой панели свойств, выровняйте их по центру вертикально и горизонтально. Клавишами Ctrl/⌘ + G сгруппируйте их:

Переместите группу кругов в центр пересечения правой вертикальной и горизонтальной направляющих:

Нарисуйте два круга размером 50 пикселей. Второму задайте цвет C3D5D9:

Скопируйте второй круг используя сочетание клавиш Option/Alt. Новому кругу измените цвет на 4476A0. Расположите его так, чтобы не перекрытая часть второго круга приобрела форму полумесяца:

Переместите первый круг так, чтобы полумесяц полностью его закрывал. При совпадении их контуров круг сам «прилипнет» к границам фигуры. Выделите круги и клавишами Ctrl /⌘ + Option/Alt + M создайте маску:

Поместите полумесяц в центр пересечения направляющих:

Создайте несколько маленьких кругов размерами от 5 до 8 пикселей и расположите их вокруг полумесяца. Измените их цвет на C3D5D9. Выделите их и объедините в группу:

Создайте три круга белого цвета размерами 20, 30 и 40 пикселей. Расположите их в форме облака. Нижнюю часть облака дополните прямоугольником:

Выделите фигуры. В верхней панели раскройте список Boolean groups и выберите Union selection:

Создайте круг размером 80 пикселей. В правой панели во вкладке Fill кликните по квадратику возле значения цвета. Над палитрой раскройте свиток Solid:

В списке выберите Linear. Кликая по квадратикам цвета над полосой градиента, установите левому HSB «0 0 100 100», а правому — «0 0 82 100». Перетяните точки отрезка над кругом левой кнопкой мыши так, чтобы градиент стал горизонтальным:

Выделите круг. Зажмите Alt и скопируйте его. В палитре градиента измените левый цвет на HSB «0 0 90 100», а правый на HSB «0 0 100 100»:

Выделите оба круга. В правой панели сверху выровняйте их по вертикали и горизонтали. Клавишами Ctrl/⌘ + G сгруппируйте их:

В правой панели поверните группу на −30 градусов:

Перетащите группу кругов так, чтобы их центр совпал с центром пересечения левой вертикальной и горизонтальной направляющих:

Расположите облако слева от переключателя:

Выделите нижнее поле переключателя и скопируйте его клавишами Ctrl/⌘ + C. Вставьте клавишами Ctrl/⌘ + V. Выделите созданную фигуру, слайдер, облако, круги фона, полумесяц и звезды и нажмите Ctrl/⌘ + Option/Alt + M:

Выделите слайдер и сочетанием клавиш Ctrl/⌘ + ] переместите его поверх фона:

В правой панели во вкладке Effects кликните по знаку +. Нажав на иконку «солнышка», раскройте вкладку Drop shadow. Введите значения X и Y «4» и 20% прозрачности:

Выделите нижнее поле переключателя и добавьте ему тень с теми же параметрами:

Выделите фрейм с переключателем и скопируйте его клавишами Ctrl/⌘ + C. Вставьте копию клавишами Ctrl/⌘ + V:

Во втором фрейме наведите курсор на звезду и кликните левой кнопкой мыши. Объекты внутри маски станут доступны для выделения по отдельности. Кликните повторно и сможете выделять звезды по одной. Перетащите звезды за правую границу маски:

Кликните левой кнопкой мыши по группе маски и перетащите ползунок направо, а фон и полумесяц — налево. Следите, чтобы их центры совпадали с точками пересечения направляющих:

Кликните левой кнопкой мыши по группе полумесяца и перетащите верхний круг за границы переключателя:

Выделите облако и поместите его перед кругами:

Выделите нижнее поле переключателя и задайте ему цвет 98E0FD:

Последовательно выделяя круги, задайте им цвета C1ECFD, E0F4FE, FCEFD5, FEE2A9 — от большого к маленькому:

Кругу за пределами маски измените цвет на E0F4FE:

Выделите первый фрейм. В правой панели сверху выберите Prototype. Во вкладку Interactions нажмите на +:

Нажмите Click. Разверните вкладку On click. В открывшемся списке выберите Navigate to:

Справа от Navigate to выберите из списка Frame 2. Разверните свиток под Animation и кликните Smart animate. Внизу нажмите Ease out и выберите Custom bezier. Поняните за управляющие кривой и придайте ей форму волны. Установите длительность анимации в 800ms:

Выделите второй фрейм и повторите во вкладке Prototype все то же самое, но в поле Interactions details выберите первый фрейм:

В правом верхнем углу нажмите кнопку Present:

Передавайте привет разработчику :‑)

Подписывайтесь, чтобы не пропустить следующий рецепт: