Онлайн-сервіс розробки інтерфейсів Figma оголосив про запуск «варіантів» компонентів. Це полегшує роботу з компонентами та робить їх інтуїтивно зрозумілішими.

Варіанти – це новий спосіб створення, впорядкування та використання компонентів. Вони зменшують складність дизайнерської системи, полегшують пошук компонентів та наближають компоненти дизайну до коду.

«Розробляючи варіанти, ми хотіли вдосконалити функцію наших компонентів, щоб підтримувати декілька варіації: наприклад state = “hover“ та style = “secondary”», – зазначають в блозі Figma.

Наприклад, на скріншоті дизайн-системи нижче є компонент кнопки з 24 варіаціями. Тут є чотири властивості з певними значеннями: властивість Type зі значеннями Primary і Secondary, Size – зі значеннями Large і Small, State – Default, Pressed і Inactive, Icon – True і False.

Варіанти можна об’єднати в один компонент з налаштованими значеннями та властивостями. Вони можуть відображати фронтенд код, спрощувати бібліотеки ресурсів і прискорювати вибір відповідного варіанту.

У варіантах є можливість перетворювати лише компоненти.

Щоб зрозуміти, як підготуватися до варіантів та використовувати їх, Figma підготувала інструкції.

Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.