Как создать кастомный дизайн колеса фортуны в Figma: пошаговая инструкция

Мы предоставляем готовый стартовый проект в Figma, который вы можете использовать в качестве шаблона для того чтобы нарисовать свой дизайн. В этом проекте есть примеры дизайна колеса, указателя и фона.

Для начала работы создайте пустой проект в Figma и скопируйте содержимое стартового проекта в свой.

Дизайн колеса

Для дизайна колеса особенно важно использовать стартовый проект, так как сектора уже размечены, а это важно для правильной работы колеса фортуны. Можно использовать пустую так называемую "балванку" и накинуть полностью свой дизайн.

Либо взять готовый дизайн и изменить его под себя.

После того как вы закончили с дизайном, готовый дизайн нужно экспортировать из Figma. Для этого выделите все 3 варианта удерживая клавишу shift. И нажмите кнопку Export 3 layers. Обратите внимание на настройки экспорта 1x и формат PNG.

После того как вы экспортируете дизайн на ваш компьютер скачается zip-архив. Его нужно распаковать и внутри будут лежать 3 файла. 

После этого идем в личный кабинет на страницу настройки вашего колеса фортуны и загружаем дизайн колеса.  Если вы еще не создали виджет то как это сделать описано в инструкции по созданию и настройке колеса фортуны.

В этой форме выбираем файлы соответствующие названиям полей и самих файлов и нажимаем на кнопку загрузить.

После этого колесо с вашим дизайном появится в списке дизайнов колес. Можете его применить к своему виджету. Так же можно его удалить если этот дизайн вам больше не нужен.

Готово! Теперь вы умеете делать свои кастомные дизайны колеса под свой бренд или сайт.

Дизайн указателя

Дизайн указателя делается по такому же принципу, как и дизайн колеса. Единственное что нужно учитывать это то что кончик указателя должен быть по центру чтобы визуальное отображение выигранного приза пользователем совпадало с фактическим.

Дизайн фона

Для дизайна фона тоже есть шаблон который лучше всего использовать, так как он имеет нужный размер как для десктопной версии так и для мобильной версии, а так же размечены границы видимой области в случае если виджет установлен на сайте в качестве модального окна. 

Так же для удобства добавлен плесхолдер виджета чтобы было понятно какое место будет занимать сам виджет на фоне.

После того как вы сделали дизайн фона, переходим в настройки фона виджета.

Тип фона выбираем Изображение

И по такому же принципу как с колесом и указателем загружаем дизайн фона.

Еще важный момент настроить цвет подложки, чтобы он гармонично смотрелся с фоном. Цвет подложки нужен в том случае когда картинка на фоне еще не подгрузилась и вместо нее показывается подложка.

Готово! Теперь вы умеете делать свой дизайн фона для колеса фортуны.