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><ul><li>Добавьте на макет круг размером 100×100 пикселей. Затем нажмите на него правой кнопкой мыши и выберите Frame selection.</li>
11
</ul><ul><li>Добавьте на макет круг размером 100×100 пикселей. Затем нажмите на него правой кнопкой мыши и выберите Frame selection.</li>
12
<li>Перекрасьте круг в чёрный цвет. Наведите на него курсор, зажмите появившийся кружок и клавишу Shift. Затем ведите курсор по центральной оси круга, чтобы у вас получился полукруг.</li>
12
<li>Перекрасьте круг в чёрный цвет. Наведите на него курсор, зажмите появившийся кружок и клавишу Shift. Затем ведите курсор по центральной оси круга, чтобы у вас получился полукруг.</li>
13
<li>Сделайте копию полукруга и перекрасьте его в белый цвет. Затем обе половинки поставьте так, чтобы их плоские части упирались в верхнюю и нижнюю стороны фрейма.</li>
13
<li>Сделайте копию полукруга и перекрасьте его в белый цвет. Затем обе половинки поставьте так, чтобы их плоские части упирались в верхнюю и нижнюю стороны фрейма.</li>
14
<li>Выделите получившийся фрейм и в боковой панели настроек в блоке Frame поставьте галочку Clip content.</li>
14
<li>Выделите получившийся фрейм и в боковой панели настроек в блоке Frame поставьте галочку Clip content.</li>
15
<li>Кликните правой кнопкой мыши по фрейму и выберите Frame selection. У вас должен получиться дополнительный фрейм внутри.</li>
15
<li>Кликните правой кнопкой мыши по фрейму и выберите Frame selection. У вас должен получиться дополнительный фрейм внутри.</li>
16
</ul><p>Результат:</p>
16
</ul><p>Результат:</p>
17
<p><a>Самоучитель по Figma</a></p>
17
<p><a>Самоучитель по Figma</a></p>
18
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
18
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
19
<p><strong>Другие короткие инструкции по Figma</strong></p>
19
<p><strong>Другие короткие инструкции по Figma</strong></p>
20
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
20
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>