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>25 ноя 2022</li>
2
<ul><li>25 ноя 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
<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>советуем скопировать наш</a>.</p>
11
</ul><p>Для этой инструкции вам понадобится файл с готовым лендингом - в нём должно быть как минимум два экрана. Для простоты<a>советуем скопировать наш</a>.</p>
12
<p>Если вы будете делать свой лендинг, то при вёрстке важно учесть несколько моментов:</p>
12
<p>Если вы будете делать свой лендинг, то при вёрстке важно учесть несколько моментов:</p>
13
<ul><li>Для анимации картинки её нужно добавить в отдельный фрейм.</li>
13
<ul><li>Для анимации картинки её нужно добавить в отдельный фрейм.</li>
14
<li>У второго экрана должен быть непрозрачный фон, чтобы анимация сработала правильно.</li>
14
<li>У второго экрана должен быть непрозрачный фон, чтобы анимация сработала правильно.</li>
15
</ul><p>Все дальнейшие действия мы будем делать в нашем файле.</p>
15
</ul><p>Все дальнейшие действия мы будем делать в нашем файле.</p>
16
<p>Стандартными средствами Figma нельзя настроить анимацию так, чтобы она активировалась во время скролла. Поэтому мы будем активировать параллакс с помощью клика. Если вы хотите показать анимацию разработчикам или клиенту, обязательно уточните, каким именно образом она должна активироваться, иначе вас могут понять не так.</p>
16
<p>Стандартными средствами Figma нельзя настроить анимацию так, чтобы она активировалась во время скролла. Поэтому мы будем активировать параллакс с помощью клика. Если вы хотите показать анимацию разработчикам или клиенту, обязательно уточните, каким именно образом она должна активироваться, иначе вас могут понять не так.</p>
17
<ul><li>Сделайте копию основного фрейма.</li>
17
<ul><li>Сделайте копию основного фрейма.</li>
18
<li>Выделите фоновое изображение и сместите его немного вверх.</li>
18
<li>Выделите фоновое изображение и сместите его немного вверх.</li>
19
<li>Выделите заголовок Explore Norway и указатель See more - их тоже нужно сместить немного вверх, но немного меньше, чем картинку. Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.</li>
19
<li>Выделите заголовок Explore Norway и указатель See more - их тоже нужно сместить немного вверх, но немного меньше, чем картинку. Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.</li>
20
<li>Выделите логотип и иконку с "бургер-меню" на макете. Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.</li>
20
<li>Выделите логотип и иконку с "бургер-меню" на макете. Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.</li>
21
<li>Выделите свою копию лендинга и на правой панели настроек откройте Prototype. Затем наведите курсор на макет, зажмите появившийся кружок и перетащите его на оригинальный лендинг. Должна появиться стрелка.</li>
21
<li>Выделите свою копию лендинга и на правой панели настроек откройте Prototype. Затем наведите курсор на макет, зажмите появившийся кружок и перетащите его на оригинальный лендинг. Должна появиться стрелка.</li>
22
<li>В появившемся окне в блоке Interactions details вместо On click укажите After delay и установите задержку 100 ms. В блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 800 ms.</li>
22
<li>В появившемся окне в блоке Interactions details вместо On click укажите After delay и установите задержку 100 ms. В блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 800 ms.</li>
23
</ul><ul><li>Сделайте ещё одну копию основного фрейма.</li>
23
</ul><ul><li>Сделайте ещё одну копию основного фрейма.</li>
24
<li>В новой копии выделите фоновое изображение и сместите его немного вверх. То же самое сделайте с заголовком Explore Norway и указателем See more - но их нужно сместить чуть меньше, чем картинку.</li>
24
<li>В новой копии выделите фоновое изображение и сместите его немного вверх. То же самое сделайте с заголовком Explore Norway и указателем See more - но их нужно сместить чуть меньше, чем картинку.</li>
25
<li>Выделите заголовок, указатель, логотип и иконку с "бургер-меню". Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.</li>
25
<li>Выделите заголовок, указатель, логотип и иконку с "бургер-меню". Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.</li>
26
<li>Выделите фрейм со вторым экраном и переместите его наверх, чтобы он полностью закрыл собой стартовый экран. В нашем файле этот фрейм можно найти на панели слоёв - он называется contents.</li>
26
<li>Выделите фрейм со вторым экраном и переместите его наверх, чтобы он полностью закрыл собой стартовый экран. В нашем файле этот фрейм можно найти на панели слоёв - он называется contents.</li>
27
<li>В основном фрейме с лендингом выделите фрейм с указателем и на правой панели настроек откройте Prototype. Затем наведите курсор на указатель, зажмите появившийся кружок и перетащите его на вторую копию, где вы только что меняли экран. Должна появиться стрелка.</li>
27
<li>В основном фрейме с лендингом выделите фрейм с указателем и на правой панели настроек откройте Prototype. Затем наведите курсор на указатель, зажмите появившийся кружок и перетащите его на вторую копию, где вы только что меняли экран. Должна появиться стрелка.</li>
28
<li>В появившемся окне в блоке Interactions details укажите On click. В блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 800 ms.</li>
28
<li>В появившемся окне в блоке Interactions details укажите On click. В блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 800 ms.</li>
29
<li>Сделайте то же самое в обратную сторону - в копии фрейма со вторым экраном выделите любой текстовый объект и добавьте от него такую же анимацию к оригинальному фрейму. Это поможет вам показать, как должен работать параллакс, если читатель скроллит страницу вверх.</li>
29
<li>Сделайте то же самое в обратную сторону - в копии фрейма со вторым экраном выделите любой текстовый объект и добавьте от него такую же анимацию к оригинальному фрейму. Это поможет вам показать, как должен работать параллакс, если читатель скроллит страницу вверх.</li>
30
</ul><p>Результат:</p>
30
</ul><p>Результат:</p>
31
<p><a>Самоучитель по Figma</a></p>
31
<p><a>Самоучитель по Figma</a></p>
32
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
32
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
33
<p><strong>Другие короткие инструкции по Figma</strong></p>
33
<p><strong>Другие короткие инструкции по Figma</strong></p>
34
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
34
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>