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>21 апр 2023</li>
2
<ul><li>21 апр 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 - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем о свойстве Sticky для элементов прототипа, с помощью которого можно сделать залипающие блоки на странице: например, меню или заголовок.</p>
7
<p>Figma - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем о свойстве Sticky для элементов прототипа, с помощью которого можно сделать залипающие блоки на странице: например, меню или заголовок.</p>
8
<p>Для этой инструкции вам понадобится файл с готовым лендингом - в нём должна быть длинная лента, чтобы вы могли сразу увидеть эффект Sticky. Для простоты<a>советуем скопировать наш</a>.</p>
8
<p>Для этой инструкции вам понадобится файл с готовым лендингом - в нём должна быть длинная лента, чтобы вы могли сразу увидеть эффект Sticky. Для простоты<a>советуем скопировать наш</a>.</p>
9
<p>Все дальнейшие действия мы будем делать в нашем файле.</p>
9
<p>Все дальнейшие действия мы будем делать в нашем файле.</p>
10
<ul><li>Выделите фреймы с меню - в нашем файле на панели слоёв они называются Status Bar и Navigation Bar.</li>
10
<ul><li>Выделите фреймы с меню - в нашем файле на панели слоёв они называются Status Bar и Navigation Bar.</li>
11
<li>На правой панели настроек откройте Prototype и в блоке Scroll behavior в пункте Position вместо Scroll with parent выберите Fixed.</li>
11
<li>На правой панели настроек откройте Prototype и в блоке Scroll behavior в пункте Position вместо Scroll with parent выберите Fixed.</li>
12
<li>Выделите фреймы с заголовками - в нашем файле на панели слоёв они называются Nike и Adidas.</li>
12
<li>Выделите фреймы с заголовками - в нашем файле на панели слоёв они называются Nike и Adidas.</li>
13
<li>На правой панели настроек откройте Prototype и в блоке Scroll behavior в пункте Position вместо Scroll with parent выберите Sticky.</li>
13
<li>На правой панели настроек откройте Prototype и в блоке Scroll behavior в пункте Position вместо Scroll with parent выберите Sticky.</li>
14
<li>Нажмите кнопку Play и проверьте результат.</li>
14
<li>Нажмите кнопку Play и проверьте результат.</li>
15
</ul><p>Если вы работали в нашем файле, то у вас всё должно получиться с первого раза. Но если у вас своя вёрстка, то, возможно, вы столкнулись с багами. Ниже рассказываем, как от них избавиться.</p>
15
</ul><p>Если вы работали в нашем файле, то у вас всё должно получиться с первого раза. Но если у вас своя вёрстка, то, возможно, вы столкнулись с багами. Ниже рассказываем, как от них избавиться.</p>
16
<p>При работе со Sticky Figma ориентируется на порядок слоёв. Поэтому они должны стоять в правильном порядке:</p>
16
<p>При работе со Sticky Figma ориентируется на порядок слоёв. Поэтому они должны стоять в правильном порядке:</p>
17
<ul><li>Слои со Sticky должны быть в самом верху на панели слоёв, если вы не хотите, чтобы блоки внутри страницы их перекрывали.</li>
17
<ul><li>Слои со Sticky должны быть в самом верху на панели слоёв, если вы не хотите, чтобы блоки внутри страницы их перекрывали.</li>
18
<li>Слои должны располагаться в обратном порядке - первый на макете → последний в слоях. Если это не так, то Sticky не будет работать корректно.</li>
18
<li>Слои должны располагаться в обратном порядке - первый на макете → последний в слоях. Если это не так, то Sticky не будет работать корректно.</li>
19
</ul><p>Все sticky-элементы "упираются" в край экрана и не учитывают окружающие их блоки. Например, в нашем файле есть фиксированный Status Bar и "остров" от iPhone - если Sticky равен или меньше высоты этих элементов, то его просто скроет:</p>
19
</ul><p>Все sticky-элементы "упираются" в край экрана и не учитывают окружающие их блоки. Например, в нашем файле есть фиксированный Status Bar и "остров" от iPhone - если Sticky равен или меньше высоты этих элементов, то его просто скроет:</p>
20
<p><a>Самоучитель по Figma</a></p>
20
<p><a>Самоучитель по Figma</a></p>
21
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
21
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
22
<p><strong>Другие короткие инструкции по Figma</strong></p>
22
<p><strong>Другие короткие инструкции по Figma</strong></p>
23
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
23
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>