{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

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

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

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

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

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

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

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

В заключении

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

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

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

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

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

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