Как в Figma сделать пульсирующую анимацию

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

В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:

• Кнопки, прокрутка и поп-апы
• Анимация

Базовые компоненты

1. Сделайте фрейм с размерами 100×100 пикселей. Затем на панели справа в блоке Frame скруглите углы на 20 пикселей, а в блоке Stroke нажмите плюс, чтобы появилась обводка. По желанию добавьте текст или изображение внутрь фрейма.

2. Выделите получившийся фрейм и нажмите . Затем сделайте копию компонента и поставьте рядом.

3. Здесь же сделайте ещё одну копию компонента, нажмите K и на правой панели в блоке Scale укажите 2.

4. Нажмите V, выделите последнюю копию компонента и на правой панели в блоке Stroke укажите толщину обводки 1 пиксель, в блоке Fill нажмите на минус и удалите из слоя текст или изображение, если вы его добавляли.

Читайте также:

Самоучитель по Figma

Анимация

1. Выделите всю получившуюся конструкцию из двух копий компонентов и нажмите , затем нажмите , чтобы получить вариант.

2. В первом варианте внутри комбайна выделите фрейм из одной обводки, нажмите K и на правой панели в блоке Scale укажите 0,5.

3. Во втором варианте выделите тот же фрейм и в блоке Layer укажите непрозрачность 0%.

4. На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.

5. В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation, укажите длительность 1800 ms.

6. Теперь наведите курсор на второй вариант и протяните стрелку к первому. В появившемся окне вместо On tap выберите After delay и укажите время 1000 ms. Ниже в том же окне вместо Smart animation выберите Instant.

7. Сделайте копию комбайна. В копии у первой анимации поменяйте задержку с 1 до 1000 ms, а у второй — с 1000 на 1 ms.

8. Добавьте на макет фрейм размером с iPhone 14 и скопируйте в него два фрейма — один из основного комбайна, а второй из его копии. На холсте они должны стоять друг под другом.

9. Анимацию уже сейчас можно проверять. При необходимости в оригинальном компоненте поменяйте цвет обводки и заливки.

Результат:

Читайте также:

Как в Figma сделать что угодно