Я повністю перейшов на Figma лише кілька місяців тому. Знаю, що запізнився, але це не завадило мені із задоволенням освоїти додаток.
Подібно до багатьох продуктових дизайнерів, останні кілька років я використовував Sketch. Його легко вивчити і зрозуміти. Крім того, мені подобалася інтеграція з InVision для створення прототипів, а функція auto-stacking за допомогою Anima, спростила роботу з більш динамічним контентом.
Потім я приєднався до Y Media Labs, команди, яка повністю перейшла на Figma. Я пробував цей інструмент раніше, але ніколи не використовував його як основний. Мені довелося повністю перебудувати свій робочий процес. І тоді я зрозумів, що Figma проста, легка і функціональна. Усього за кілька тижнів я виявив, що не тільки розумію, як проєктувати у звичному стилі, а й виявив "хакі Figma", що допомагають вдихнути в прототипи життя. Зараз я працюю над цим:
Оживіть свій прототип
У YML є мантра "прототипи важливіші за презентації". Прототип робить ваші дизайн-рішення реальними і повідомляє клієнтам або зацікавленим сторонам набагато більше, ніж статичний дизайн. Він також допомагає під час проектування не потрапити в "пастку Dribbble" (можливо, цей дизайн має гарний вигляд на невеликому скріншоті, але як він насправді працює?). Створення кнопок, які поводяться як кнопки - це маленький крок до того, щоб ваші прототипи дійсно ожили. Давайте розглянемо цей момент докладніше.
Прості кнопки
Те, що я називаю "простою кнопкою" - це приклад, який ви можете бачити на gif-файлі вище. Це кнопка за замовчуванням (default button), кнопка в стані наведення курсору (hover state))та в станусі натискання (pressed state)(state). Це допоможе зрозуміти концепцію прототипування кнопок у Figma.
Основні правила, прототипування кнопки:
- Ваші кнопки мають бути унікальним екземпляром компонента або фреймом. Отже, якщо у вашому прототипі є 4 кнопки, які ви хочете зробити інтерактивними, вам знадобиться всього 12 кнопок, щоб прототип працював (1 у стані за замовчуванням, 1 у стані наведення курсору та 1 у натиснутому стані для кожної кнопки). На даний момент я не знаю способу зв'язати послідовність прототипів на головній сторінці компонентів і застосувати це до всіх екземплярів компонента. (Якщо я помиляюся, будь ласка, напишіть у коментарях!)
- Стани наведення і натискання повинні розташовуватися за межами фрейму вашого прототипу, щоб вони працювали як оверлей. Просто так "оверлеї" працюють у Figma.
- Зберігайте узгодженість в іменах шарів для функції Smart Animate. Пізніше ми використовуватимемо в Figma функцію Smart Animate, тому слід послідовно називати шари. (Якщо ви схожі на мене, то ваші шари зазвичай називаються "Frame 1104", "image 32" або "Vector 200". Слід упорядкувати їх).
Це простий двоетапний процес
Крок 1 - Стан наведення курсору
1. Стан "Наведення курсору"
Ключем до цього прототипу є те, що ви фактично не змінюєте вихідну кнопку "за замовчуванням". Замість цього ви відкриваєте оверлей кнопки в "стані наведення курсору" безпосередньо поверх кнопки в стані за замовчуванням. Це робиться шляхом створення прототипу взаємодії "While Hovering", який запускає оверлей кнопки в стані наведення курсора.
Якщо в першому випадаючому списку в розділі "Overlay" ви виберете "Manual" (Вручну), Figma автоматично розмістить нову кнопку в стані наведення курсору поверх кнопки в стані за замовчуванням. Обов'язково перевірте, щоб оверлей розташовувався поверх вашої початкової кнопки.
Крок 2 - Натиснута кнопка
2. Кнопка в натиснутому стані
Тепер, коли відкрито стан наведення курсору, ми створимо другий етап нашої взаємодії. Для цього створіть прототип взаємодії "While Pressing" на кнопці в стані наведення курсору, який запускає команду "Swap With" із кнопкою в натиснутому стані. Думаю, технічно ви можете відкрити інший оверлей, але тоді ми не зможемо використовувати функцію Smart Animate.
Етап 3 - "За натисканням" (On Click)
3. Зробіть кнопку функціональною (необов'язково)
Добре, це трьохетапний процес, якщо ви хочете, щоб ваша кнопка дійсно щось робила. Щоб зробити кнопку функціональною, просто додайте до натиснутої кнопки прототип взаємодії "On Click", щоб вона дозволила перейти на нову сторінку, відкрила модальне вікно тощо.
Ось і все! Нижче, як приклад, наведено мій проект Figma, що демонструє викладені вище правила:
- Кнопки мають бути унікальним екземпляром компонента або фреймом.
- Стани наведення і натискання повинні розташовуватися поза фреймом прототипу, щоб працювати як оверлей.
- Зберігайте узгодженість назв шарів для коректної роботи функції Smart Animate.
Наступного разу ми займемося складнішими інтерактивними кнопками. Слідкуйте за оновленнями...
Переклад статті medium.com
Топ коментарі (0)