0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>3 ноя 2023</li>
2
<ul><li>3 ноя 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.</p>
4
</ul><p>Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.</p>
6
<p>Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.</p>
7
<p>Figma - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования сделать пульсирующую анимацию.</p>
7
<p>Figma - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования сделать пульсирующую анимацию.</p>
8
<p>В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:</p>
8
<p>В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:</p>
9
<ul><li><a>Кнопки, прокрутка и поп-апы</a></li>
9
<ul><li><a>Кнопки, прокрутка и поп-апы</a></li>
10
<li><a>Анимация</a></li>
10
<li><a>Анимация</a></li>
11
</ul><p>1. Сделайте фрейм с размерами 100×100 пикселей. Затем на панели справа в блоке Frame скруглите углы на 20 пикселей, а в блоке Stroke нажмите плюс, чтобы появилась обводка. По желанию добавьте текст или изображение внутрь фрейма.</p>
11
</ul><p>1. Сделайте фрейм с размерами 100×100 пикселей. Затем на панели справа в блоке Frame скруглите углы на 20 пикселей, а в блоке Stroke нажмите плюс, чтобы появилась обводка. По желанию добавьте текст или изображение внутрь фрейма.</p>
12
<p>2. Выделите получившийся фрейм и нажмите . Затем сделайте копию компонента и поставьте рядом.</p>
12
<p>2. Выделите получившийся фрейм и нажмите . Затем сделайте копию компонента и поставьте рядом.</p>
13
<p>3. Здесь же сделайте ещё одну копию компонента, нажмите K и на правой панели в блоке Scale укажите 2.</p>
13
<p>3. Здесь же сделайте ещё одну копию компонента, нажмите K и на правой панели в блоке Scale укажите 2.</p>
14
<p>4. Нажмите V, выделите последнюю копию компонента и на правой панели в блоке Stroke укажите толщину обводки 1 пиксель, в блоке Fill нажмите на минус и удалите из слоя текст или изображение, если вы его добавляли.</p>
14
<p>4. Нажмите V, выделите последнюю копию компонента и на правой панели в блоке Stroke укажите толщину обводки 1 пиксель, в блоке Fill нажмите на минус и удалите из слоя текст или изображение, если вы его добавляли.</p>
15
<p>1. Выделите всю получившуюся конструкцию из двух копий компонентов и нажмите , затем нажмите , чтобы получить вариант.</p>
15
<p>1. Выделите всю получившуюся конструкцию из двух копий компонентов и нажмите , затем нажмите , чтобы получить вариант.</p>
16
<p>2. В первом варианте внутри комбайна выделите фрейм из одной обводки, нажмите K и на правой панели в блоке Scale укажите 0,5.</p>
16
<p>2. В первом варианте внутри комбайна выделите фрейм из одной обводки, нажмите K и на правой панели в блоке Scale укажите 0,5.</p>
17
<p>3. Во втором варианте выделите тот же фрейм и в блоке Layer укажите непрозрачность 0%.</p>
17
<p>3. Во втором варианте выделите тот же фрейм и в блоке Layer укажите непрозрачность 0%.</p>
18
<p>4. На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.</p>
18
<p>4. На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.</p>
19
<p>5. В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation, укажите длительность 1800 ms.</p>
19
<p>5. В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation, укажите длительность 1800 ms.</p>
20
<p>6. Теперь наведите курсор на второй вариант и протяните стрелку к первому. В появившемся окне вместо On tap выберите After delay и укажите время 1000 ms. Ниже в том же окне вместо Smart animation выберите Instant.</p>
20
<p>6. Теперь наведите курсор на второй вариант и протяните стрелку к первому. В появившемся окне вместо On tap выберите After delay и укажите время 1000 ms. Ниже в том же окне вместо Smart animation выберите Instant.</p>
21
<p>7. Сделайте копию комбайна. В копии у первой анимации поменяйте задержку с 1 до 1000 ms, а у второй - с 1000 на 1 ms.</p>
21
<p>7. Сделайте копию комбайна. В копии у первой анимации поменяйте задержку с 1 до 1000 ms, а у второй - с 1000 на 1 ms.</p>
22
<p>8. Добавьте на макет фрейм размером с iPhone 14 и скопируйте в него два фрейма - один из основного комбайна, а второй из его копии. На холсте они должны стоять друг под другом.</p>
22
<p>8. Добавьте на макет фрейм размером с iPhone 14 и скопируйте в него два фрейма - один из основного комбайна, а второй из его копии. На холсте они должны стоять друг под другом.</p>
23
<p>9. Анимацию уже сейчас можно проверять. При необходимости в оригинальном компоненте поменяйте цвет обводки и заливки.</p>
23
<p>9. Анимацию уже сейчас можно проверять. При необходимости в оригинальном компоненте поменяйте цвет обводки и заливки.</p>
24
<p>Результат:</p>
24
<p>Результат:</p>
25
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
25
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>