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>8 сен 2023</li>
2
<ul><li>8 сен 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>Перед чтением инструкции скачайте и установите плагин<a>SkewDat</a>.</p>
11
</ul><p>Перед чтением инструкции скачайте и установите плагин<a>SkewDat</a>.</p>
12
<p>1. Для удобства создайте большой фрейм чёрного цвета - внутри него будут все ваши компоненты для будущей анимации.</p>
12
<p>1. Для удобства создайте большой фрейм чёрного цвета - внутри него будут все ваши компоненты для будущей анимации.</p>
13
<p>2. Создайте круг размером примерно 450×450 пикселей. На боковой панели настроек в блоке Fill удалите его заливку. В блоке Stroke добавьте обводку белого цвета, вместо Inside выберите Center и укажите толщину 13 пикселей.</p>
13
<p>2. Создайте круг размером примерно 450×450 пикселей. На боковой панели настроек в блоке Fill удалите его заливку. В блоке Stroke добавьте обводку белого цвета, вместо Inside выберите Center и укажите толщину 13 пикселей.</p>
14
<p>3. В блоке Stroke нажмите на иконку. В появившемся окне вместо Solid выберите Dash, в поле Dash введите 1, в Gap - 20, в Dash Cap выберите круглые края. В итоге у вас должна получиться фигура с круглыми точками - если круги не получились, попробуйте поменять значения Dash и Gap.</p>
14
<p>3. В блоке Stroke нажмите на иконку. В появившемся окне вместо Solid выберите Dash, в поле Dash введите 1, в Gap - 20, в Dash Cap выберите круглые края. В итоге у вас должна получиться фигура с круглыми точками - если круги не получились, попробуйте поменять значения Dash и Gap.</p>
15
<p>4. Выделите получившуюся фигуру и нажмите . Затем сделайте копию компонента, кликните по ней правой кнопкой мыши и выберите Frame Selection.</p>
15
<p>4. Выделите получившуюся фигуру и нажмите . Затем сделайте копию компонента, кликните по ней правой кнопкой мыши и выберите Frame Selection.</p>
16
<p>5. Выделите фрейм и сделайте из него ещё один компонент . Затем нажмите , чтобы получить его вариант. Внутри варианта поверните фрейм с кругом на 90 градусов. Важно поворачивать не сам вариант, а его внутреннюю часть - если сделать не так, то анимация будет работать плохо.</p>
16
<p>5. Выделите фрейм и сделайте из него ещё один компонент . Затем нажмите , чтобы получить его вариант. Внутри варианта поверните фрейм с кругом на 90 градусов. Важно поворачивать не сам вариант, а его внутреннюю часть - если сделать не так, то анимация будет работать плохо.</p>
17
<p>6. Сделайте то же самое ещё два раза - создавайте варианты и крутите фреймы с кругом на 90 градусов. В итоге у вас получится основа для анимации вращения.</p>
17
<p>6. Сделайте то же самое ещё два раза - создавайте варианты и крутите фреймы с кругом на 90 градусов. В итоге у вас получится основа для анимации вращения.</p>
18
<p>1. На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.</p>
18
<p>1. На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.</p>
19
<p>2. В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation, а вместо Ease In - Linear. Укажите длительность 5000 ms.</p>
19
<p>2. В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation, а вместо Ease In - Linear. Укажите длительность 5000 ms.</p>
20
<p>3. Сделайте то же самое с остальными компонентами. От последнего компонента стрелку нужно вести к первому.</p>
20
<p>3. Сделайте то же самое с остальными компонентами. От последнего компонента стрелку нужно вести к первому.</p>
21
<p>4. Сделайте компонент с размерами любого iPhone, покрасьте его фон в чёрный цвет и поместите в него копию первого компонента из комбайна. При необходимости нажмите на клавиатуре K и уменьшите круг, чтобы он влез во фрейм.</p>
21
<p>4. Сделайте компонент с размерами любого iPhone, покрасьте его фон в чёрный цвет и поместите в него копию первого компонента из комбайна. При необходимости нажмите на клавиатуре K и уменьшите круг, чтобы он влез во фрейм.</p>
22
<p>5. Кликните на копию компонента правой кнопкой мыши и перейдите в Plugins → SkewDat. В появившемся окне исказите фрейм по горизонтали на 45 градусов и нажмите Apply.</p>
22
<p>5. Кликните на копию компонента правой кнопкой мыши и перейдите в Plugins → SkewDat. В появившемся окне исказите фрейм по горизонтали на 45 градусов и нажмите Apply.</p>
23
<p>6. Поверните получившийся фрейм так, чтобы ваш овал был точно посередине фрейма. У нас получилось 22 градуса.</p>
23
<p>6. Поверните получившийся фрейм так, чтобы ваш овал был точно посередине фрейма. У нас получилось 22 градуса.</p>
24
<p>7. Сделайте две копии искажённого компонента, уменьшите их и поставьте немного выше друг над другом. У вас должна получиться полусфера.</p>
24
<p>7. Сделайте две копии искажённого компонента, уменьшите их и поставьте немного выше друг над другом. У вас должна получиться полусфера.</p>
25
<p>8. Выделите уменьшенные копии компонентов, нажмите Shift + H и Shift + V, чтобы отразить их по вертикали и горизонтали. Затем поставьте их под основной компонент, чтобы у вас получилась сфера.</p>
25
<p>8. Выделите уменьшенные копии компонентов, нажмите Shift + H и Shift + V, чтобы отразить их по вертикали и горизонтали. Затем поставьте их под основной компонент, чтобы у вас получилась сфера.</p>
26
<p>9. Нажмите Play и проверьте результат.</p>
26
<p>9. Нажмите Play и проверьте результат.</p>
27
<p>Результат:</p>
27
<p>Результат:</p>
28
<p>Внутри самого первого компонента можно поменять форму, например на квадрат, - при этом ничего переделывать не придётся:</p>
28
<p>Внутри самого первого компонента можно поменять форму, например на квадрат, - при этом ничего переделывать не придётся:</p>
29
<p><a>Самоучитель по Figma</a></p>
29
<p><a>Самоучитель по Figma</a></p>
30
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
30
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
31
<p><a>Как в Figma сделать все что угодно</a><a></a></p>
31
<p><a>Как в Figma сделать все что угодно</a><a></a></p>
32
<p>В Figma есть много визуальных инструментов, которые помогают дизайнерам быстро воплощать свои идеи и внедрять их в коммерческие проекты.</p>
32
<p>В Figma есть много визуальных инструментов, которые помогают дизайнерам быстро воплощать свои идеи и внедрять их в коммерческие проекты.</p>
33
<p><strong>Попробуйте поработать в Blender</strong></p>
33
<p><strong>Попробуйте поработать в Blender</strong></p>
34
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
34
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>