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>28 окт 2022</li>
2
<ul><li>28 окт 2022</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>В итоге у вас получится четыре переключателя: включённый, выключенный и два промежуточных состояния - серое и зелёное:</p>
9
<p>В итоге у вас получится четыре переключателя: включённый, выключенный и два промежуточных состояния - серое и зелёное:</p>
10
<ul><li>Выделите вариант выключенным переключателем и на правой панели настроек откройте Prototype. Затем наведите курсор на компонент, зажмите появившийся кружок и перетащите его на следующий слой - серое переходное состояние. Должна появиться стрелка.</li>
10
<ul><li>Выделите вариант выключенным переключателем и на правой панели настроек откройте Prototype. Затем наведите курсор на компонент, зажмите появившийся кружок и перетащите его на следующий слой - серое переходное состояние. Должна появиться стрелка.</li>
11
<li>В появившемся окне в блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 100 ms.</li>
11
<li>В появившемся окне в блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 100 ms.</li>
12
<li>Сделайте то же самое с другой парой компонентов - с серым фоном и белым вытянутым кружком и с зелёным фоном и зелёным кругом. В блоке Interaction details вместо On click укажите After delay и поменяйте задержку на 1 ms.</li>
12
<li>Сделайте то же самое с другой парой компонентов - с серым фоном и белым вытянутым кружком и с зелёным фоном и зелёным кругом. В блоке Interaction details вместо On click укажите After delay и поменяйте задержку на 1 ms.</li>
13
<li>Сделайте то же самое в обратном порядке - начните делать прототип с зелёного переключателя и закончите серым.</li>
13
<li>Сделайте то же самое в обратном порядке - начните делать прототип с зелёного переключателя и закончите серым.</li>
14
<li>Сделайте фрейм любого размера, скопируйте на него оригинальный компонент с переключателем, нажмите кнопку Play в верхнем левом углу и проверьте результат.</li>
14
<li>Сделайте фрейм любого размера, скопируйте на него оригинальный компонент с переключателем, нажмите кнопку Play в верхнем левом углу и проверьте результат.</li>
15
</ul><p>Результат:</p>
15
</ul><p>Результат:</p>
16
<p><a>Самоучитель по Figma</a></p>
16
<p><a>Самоучитель по Figma</a></p>
17
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
17
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
18
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
18
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>