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>7 апр 2023</li>
2
<ul><li>7 апр 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
<p>В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:</p>
9
<p>В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:</p>
10
<ul><li><a>Кнопки, прокрутка и поп-апы</a></li>
10
<ul><li><a>Кнопки, прокрутка и поп-апы</a></li>
11
<li><a>Анимация</a></li>
11
<li><a>Анимация</a></li>
12
</ul><p>В этой инструкции мы будем использовать результат одной из предыдущих работ -<a>объёмный "бублик"</a>. Но вы можете взять любую другую основу.</p>
12
</ul><p>В этой инструкции мы будем использовать результат одной из предыдущих работ -<a>объёмный "бублик"</a>. Но вы можете взять любую другую основу.</p>
13
<ul><li>На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.</li>
13
<ul><li>На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.</li>
14
<li>В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation, вместо Ease in укажите Linear, а время - 3000 ms. То же самое сделайте со вторым компонентом - он должен быть связан с третьим.</li>
14
<li>В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation, вместо Ease in укажите Linear, а время - 3000 ms. То же самое сделайте со вторым компонентом - он должен быть связан с третьим.</li>
15
<li>Выделите третий компонент и соедините его с первым. Все настройки анимации в Prototype у него такие же, но вместо Smart animation нужно указать Instant.</li>
15
<li>Выделите третий компонент и соедините его с первым. Все настройки анимации в Prototype у него такие же, но вместо Smart animation нужно указать Instant.</li>
16
<li>Сделайте копию всего комбайна. Внутри этой копии у первого компонента сместите текстовый слой так, чтобы в начале была не первая фраза, а последняя. То же самое сделайте с третьим - в начале должна быть не первая, а последняя фраза. Если вы использовали собственный макет, то уже можете копировать первую копию компонентов из каждого комбайна на свой фрейм - анимация будет работать.</li>
16
<li>Сделайте копию всего комбайна. Внутри этой копии у первого компонента сместите текстовый слой так, чтобы в начале была не первая фраза, а последняя. То же самое сделайте с третьим - в начале должна быть не первая, а последняя фраза. Если вы использовали собственный макет, то уже можете копировать первую копию компонентов из каждого комбайна на свой фрейм - анимация будет работать.</li>
17
</ul><p>Если вы используете наш объёмный "бублик", то перед запуском анимации его нужно немного доработать.</p>
17
</ul><p>Если вы используете наш объёмный "бублик", то перед запуском анимации его нужно немного доработать.</p>
18
<ul><li>Перенесите две копии первого компонента из первого комбайна и одну - из второго. Поставьте их во фрейме через один.</li>
18
<ul><li>Перенесите две копии первого компонента из первого комбайна и одну - из второго. Поставьте их во фрейме через один.</li>
19
<li>Внутри слоя с "бубликом" выберите нижний, у которого непрозрачность заливки 100%, и скопируйте его на самый верх. Также скопируйте всю группу с эффектами - где текстура шума и цветные пятна. Оба слоя должны быть в самом верху.</li>
19
<li>Внутри слоя с "бубликом" выберите нижний, у которого непрозрачность заливки 100%, и скопируйте его на самый верх. Также скопируйте всю группу с эффектами - где текстура шума и цветные пятна. Оба слоя должны быть в самом верху.</li>
20
<li>Убедитесь, что копия слоя с чёрным "бубликом" стоит ниже копии слоя с эффектами. Затем выделите чёрный бублик и нажмите , чтобы сделать слой-маску. Сгруппируйте получившуюся конструкцию.</li>
20
<li>Убедитесь, что копия слоя с чёрным "бубликом" стоит ниже копии слоя с эффектами. Затем выделите чёрный бублик и нажмите , чтобы сделать слой-маску. Сгруппируйте получившуюся конструкцию.</li>
21
<li>Приведите в порядок слои с бегущей строкой - они должны быть над оригинальным слоем с эффектами и под оригинальным "бубликом". Слой посередине можно для красоты поставить над "бубликом".</li>
21
<li>Приведите в порядок слои с бегущей строкой - они должны быть над оригинальным слоем с эффектами и под оригинальным "бубликом". Слой посередине можно для красоты поставить над "бубликом".</li>
22
<li>Нажмите Play и проверьте результат.</li>
22
<li>Нажмите Play и проверьте результат.</li>
23
</ul><p>Результат:</p>
23
</ul><p>Результат:</p>
24
<p><strong>Другие короткие инструкции по Figma</strong></p>
24
<p><strong>Другие короткие инструкции по Figma</strong></p>
25
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
25
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>