Всім привіт!
Привіт друзі! В цьому відео я покажу вам, як швидко зробити такий ось анімований акордеон зображення у Figma. Поїхали!
Якщо ви потрапили на цей канал вперше і цікавитесь всім, що пов'язано з Adobe Illustrator і Figma, підпишіться на канал і натисніть на дзвіночок, щоб не пропустити нові відео. Почнемо зі створення акордеону в Figma.
Створюємо новий фрейм розміром 256 на 400 пікселів. Перейменуємо його. Додамо прямокутник такого ж розміру і змінимо йому тип заливки на лінійний градієнт. Зверху у нас буде білий колір, а внизу чорний.
Непрозорість змінюємо на 50%. Тепер заокруглимо кути фрейму, встановимо радіус 16 пікселів. Далі вставляємо текст заголовка та підзаголовка.
Створимо автолейаут та налаштуємо йому вертикальний інтервал між елементами. Перенесемо автолейаут всередину нашого фрейму, далі перетягнемо його трішечки вниз та змінимо непрозорість на 0%.
Дублюємо фрейм. Перейменуємо. Збільшимо непрозорість на 100%. Перетягнемо наш текст вище. Збільшимо ширину фрейму вдвічі і відповідно розширимо прямокутник з градієнтом.
Виділяємо два фрейми. Створюємо компонент. Переходимо в прототип. Натискаємо ось тут на плюсик і тягнемо від одного фрейму стрілочку до іншого. В налаштуваннях вибираємо "While hovering", "Smart Animate", "Ease In And Out" і 600 мілісекунд.
Тепер створюємо ще один фрейм. Робимо дизайн першого екрану для студії дизайну інтер'єру. Переходимо в закладку "Assets", додаємо 4 однакових компоненти. Виділяємо їх, створюємо автолейаут, налаштовуємо горизонтальні інтервали і вирівнюємо групу фігур по центру.
Далі запускаємо плагін Pixel. Виділяємо один з фреймів і додаємо йому зображення. Аналогічно робимо з іншими фреймами.
І ще один момент: переносимо градієнтну заливку наперед.
Тепер давайте додамо ще декілька елементів на нашу робочу область, а саме верхнє меню, заголовок сторінки, підзаголовок і дві кнопки.
Готово! Вмикаємо режим презентації і дивимось, що у нас вийшло.
На цьому все. Сподіваюсь, що вам сподобалось. Якщо ви хочете ще більше уроків по анімації у Figma, напишіть про це в коментарях, а також ставте лайки цьому відео та підписуйтесь на канал. З вами була Адолька, до зустрічі!