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>6 янв 2023</li>
2
<ul><li>6 янв 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 - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования и плагина Fizzy сделать анимированный снежный шар.</p>
7
<p>Figma - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования и плагина Fizzy сделать анимированный снежный шар.</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>Также вам понадобится плагин Fizzy. Скачать его можно<a>по ссылке</a>.</p>
11
</ul><p>Также вам понадобится плагин Fizzy. Скачать его можно<a>по ссылке</a>.</p>
12
<ul><li>Создайте круг с размером примерно 548×548 пикселей. Затем в боковой панели настроек в блоке Effects нажмите плюсик и вместо Drop shadow выберите Inner shadow.</li>
12
<ul><li>Создайте круг с размером примерно 548×548 пикселей. Затем в боковой панели настроек в блоке Effects нажмите плюсик и вместо Drop shadow выберите Inner shadow.</li>
13
<li>Нажмите иконку . В появившемся меню укажите X - 24, Y - 26, Blur - 0, Spread - 15. Цвет заливки - #FFFFFF с непрозрачностью 25%. Затем в блоке Fill укажите непрозрачность 1%.</li>
13
<li>Нажмите иконку . В появившемся меню укажите X - 24, Y - 26, Blur - 0, Spread - 15. Цвет заливки - #FFFFFF с непрозрачностью 25%. Затем в блоке Fill укажите непрозрачность 1%.</li>
14
<li>Кликните на этот круг правой кнопкой мыши и выберите Frame selection. Выделите появившийся фрейм и в боковой панели настроек в блоке Frame укажите скругление углов 600 и поставьте галочку около Clip content.</li>
14
<li>Кликните на этот круг правой кнопкой мыши и выберите Frame selection. Выделите появившийся фрейм и в боковой панели настроек в блоке Frame укажите скругление углов 600 и поставьте галочку около Clip content.</li>
15
<li>У того же фрейма в боковой панели в блоке Stroke нажмите плюсик и укажите цвет - #FFFFFF с непрозрачностью 25%, вместо Inside укажите Outside, толщина - 10 пикселей.</li>
15
<li>У того же фрейма в боковой панели в блоке Stroke нажмите плюсик и укажите цвет - #FFFFFF с непрозрачностью 25%, вместо Inside укажите Outside, толщина - 10 пикселей.</li>
16
</ul><p>Нарисуйте из примитивов простую композицию, которая будет внутри вашего снежного шара - это может быть снеговик или изба среди ёлок. Если вам не хочется это делать, можно найти нужную картинку в интернете, но важно, чтобы у неё был прозрачный фон, иначе падающий снег сделать не получится.</p>
16
</ul><p>Нарисуйте из примитивов простую композицию, которая будет внутри вашего снежного шара - это может быть снеговик или изба среди ёлок. Если вам не хочется это делать, можно найти нужную картинку в интернете, но важно, чтобы у неё был прозрачный фон, иначе падающий снег сделать не получится.</p>
17
<ul><li>Сделайте квадрат, который полностью перекроет ваш снежный шар.</li>
17
<ul><li>Сделайте квадрат, который полностью перекроет ваш снежный шар.</li>
18
<li>Уберите квадрат от шара, чтобы он вам не мешал. Затем нажмите на квадрат правой кнопкой мыши, выберите Plugins и нажмите Fizzy.</li>
18
<li>Уберите квадрат от шара, чтобы он вам не мешал. Затем нажмите на квадрат правой кнопкой мыши, выберите Plugins и нажмите Fizzy.</li>
19
<li>В появившемся окне укажите Quantity 100, Min 10, Max 15 и оставьте только один цвет. У вас должна получиться композиция из маленьких кружков - это и будет ваш снег. Если вам не нравится результат, попробуйте поиграть с настройками в Fizzy.</li>
19
<li>В появившемся окне укажите Quantity 100, Min 10, Max 15 и оставьте только один цвет. У вас должна получиться композиция из маленьких кружков - это и будет ваш снег. Если вам не нравится результат, попробуйте поиграть с настройками в Fizzy.</li>
20
<li>Выделите получившуюся композицию, нажмите по ней правой кнопкой мыши и выберите Frame selection. Затем в боковой панели в блоке Selection colors вместо цвета из Fizzy укажите #FFFFFF. На верхней панели нажмите , чтобы сделать компонент.</li>
20
<li>Выделите получившуюся композицию, нажмите по ней правой кнопкой мыши и выберите Frame selection. Затем в боковой панели в блоке Selection colors вместо цвета из Fizzy укажите #FFFFFF. На верхней панели нажмите , чтобы сделать компонент.</li>
21
<li>Внутри компонента выберите все белые кружки, которые образуют снег, и сгруппируйте их. Затем скопируйте группу 3-4 раза и поставьте копии по горизонтали одну за другой. Важно, чтобы в видимой части фрейма оказалась нижняя часть получившейся конструкции.</li>
21
<li>Внутри компонента выберите все белые кружки, которые образуют снег, и сгруппируйте их. Затем скопируйте группу 3-4 раза и поставьте копии по горизонтали одну за другой. Важно, чтобы в видимой части фрейма оказалась нижняя часть получившейся конструкции.</li>
22
<li>Нажмите , чтобы сделать вариант компонента. Внутри него передвиньте конструкцию со снегом так, чтобы в видимой части фрейма была верхняя часть.</li>
22
<li>Нажмите , чтобы сделать вариант компонента. Внутри него передвиньте конструкцию со снегом так, чтобы в видимой части фрейма была верхняя часть.</li>
23
<li>В боковой панели настроек нажмите Prototype. Затем наведите курсор на первый компонент, зажмите появившийся кружок и перетащите его на следующий слой - второй вариант текста. Должна появиться стрелка.</li>
23
<li>В боковой панели настроек нажмите Prototype. Затем наведите курсор на первый компонент, зажмите появившийся кружок и перетащите его на следующий слой - второй вариант текста. Должна появиться стрелка.</li>
24
<li>В появившемся окне в блоке Animation вместо On click укажите After delay и поменяйте продолжительность на 1 ms. Вместо Instance укажите Smart Animation, вместо Ease in - Liner. Продолжительность - 10 000 ms.</li>
24
<li>В появившемся окне в блоке Animation вместо On click укажите After delay и поменяйте продолжительность на 1 ms. Вместо Instance укажите Smart Animation, вместо Ease in - Liner. Продолжительность - 10 000 ms.</li>
25
<li>Сделайте то же самое с другим компонентом. В блоке Animation вместо On click укажите After delay и поменяйте продолжительность на 1 ms. Тип анимации оставьте Instance.</li>
25
<li>Сделайте то же самое с другим компонентом. В блоке Animation вместо On click укажите After delay и поменяйте продолжительность на 1 ms. Тип анимации оставьте Instance.</li>
26
<li>Скопируйте компонент со снегом во фрейм шара. Затем поместите получившуюся конструкцию в другой фрейм - например, с размером iPhone 14.</li>
26
<li>Скопируйте компонент со снегом во фрейм шара. Затем поместите получившуюся конструкцию в другой фрейм - например, с размером iPhone 14.</li>
27
<li>Нажмите кнопку Play в верхнем левом углу и проверьте результат.</li>
27
<li>Нажмите кнопку Play в верхнем левом углу и проверьте результат.</li>
28
</ul><p>Результат:</p>
28
</ul><p>Результат:</p>
29
<p><a>Самоучитель по Figma</a></p>
29
<p><a>Самоучитель по Figma</a></p>
30
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
30
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
31
<p><strong>Другие короткие инструкции по Figma</strong></p>
31
<p><strong>Другие короткие инструкции по Figma</strong></p>
32
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
32
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>