{"id":14287,"url":"\/distributions\/14287\/click?bit=1&hash=1d1b6427c21936742162fc18778388fc58ebf8e17517414e1bfb1d3edd9b94c0","title":"\u0412\u044b\u0440\u0430\u0441\u0442\u0438 \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0437\u0430 \u0433\u043e\u0434","buttonText":"","imageUuid":""}

Тестирую новые переменные Figma для прототипирования

Вчера на Config 2023 показали новый функционал: variables, wrap в autolayout и другое. Сразу захотелось потестить, и я попробовал собрать прототип игры, в которой нужно искать парные карты, что-то типа «Memory».

Основной принцип

Я собрал компоненты для парных карточек. По два состояния на карту — обложка и лицо. Внутри каждой карточки лежит своя переменная. В момент нажатия карта меняет состояние с обложки на лицо. При этом переменной присваивается определённое значение, это же значение записывается в отдельную переменную, с помощью которой происходит проверка совпадают ли открытые карты.

Обходные пути

Чтобы перевернуть карту, когда пара не найдена, мне пришлось пойти обходным путем и использовать «After delay» с условием. Из-за этого игра кажется немного глючной, но если не спешить, то глюки не вылезают 😅

Получилось, сделать проверку на то, все ли карты открыты. Но с отображением кнопки «Next Round» возникли сложности: не придумал, как запустить проверку в момент открытия последней карты. Здесь тоже пришлось пойти обходным путем и проявлять её через приемлемое время.

В заключении

Очень круто, что добавили математику в переменные. Но при подготовке прототипа, мне не хватило, например: пакетного сброса переменных, возможности скопировать условия или записать несколько переменных одновременно.

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

Вот ссылка на проект в Figma Community. Можно покликать и посмотреть подробнее как он устроен.

0
1 комментарий
Николай Синицын

Дизайнеры теперь программисты и точка

Ответить
Развернуть ветку
-2 комментариев
Раскрывать всегда