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 авг 2025</li>
2
<ul><li>8 авг 2025</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
<p>Адаптировать интерфейс под работу с геймпадом - нестандартная и очень редкая задача. Но если это необходимо, плагин Prototyper сильно ускорит эту работу - сам объединит нужные компоненты в прототип и сразу привяжет все кнопки.</p>
9
<p>Адаптировать интерфейс под работу с геймпадом - нестандартная и очень редкая задача. Но если это необходимо, плагин Prototyper сильно ускорит эту работу - сам объединит нужные компоненты в прототип и сразу привяжет все кнопки.</p>
10
<p><strong>Как пользоваться</strong></p>
10
<p><strong>Как пользоваться</strong></p>
11
<p>1. Скачайте плагин<a>по ссылке</a>.</p>
11
<p>1. Скачайте плагин<a>по ссылке</a>.</p>
12
<p>2. Выделите все объекты внутри фрейма, для которых вы хотите сделать прототип, - они должны быть компонентами с двумя вариантами: выделение активно и неактивно. Нажмите Ctrl (⌘) + P и выберите Prototyper.</p>
12
<p>2. Выделите все объекты внутри фрейма, для которых вы хотите сделать прототип, - они должны быть компонентами с двумя вариантами: выделение активно и неактивно. Нажмите Ctrl (⌘) + P и выберите Prototyper.</p>
13
<p>3. В появившемся окне во вкладке Link укажите, как именно пользователь будет переключаться в меню: через стики, триггеры или крестовину. Также здесь можно выбрать тип контроллера: PlayStation, Xbox или Nintendo Switch.</p>
13
<p>3. В появившемся окне во вкладке Link укажите, как именно пользователь будет переключаться в меню: через стики, триггеры или крестовину. Также здесь можно выбрать тип контроллера: PlayStation, Xbox или Nintendo Switch.</p>
14
<p>4. В окне плагина в пункте Swap Variant укажите, какое именно свойство должно меняться. Например, в нашем случае это выглядит так: Active, no → yes. Также при необходимости вы можете настроить тип и параметры анимации.</p>
14
<p>4. В окне плагина в пункте Swap Variant укажите, какое именно свойство должно меняться. Например, в нашем случае это выглядит так: Active, no → yes. Также при необходимости вы можете настроить тип и параметры анимации.</p>
15
<p>5. Нажмите кнопку Generate и проверьте результат.</p>
15
<p>5. Нажмите кнопку Generate и проверьте результат.</p>
16
<p>Позволяет применять переходы сразу к нескольким фреймам и компонентам. Поможет, если вам нужно сделать небольшой и простой прототип, чтобы быстро показать и утвердить идею.</p>
16
<p>Позволяет применять переходы сразу к нескольким фреймам и компонентам. Поможет, если вам нужно сделать небольшой и простой прототип, чтобы быстро показать и утвердить идею.</p>
17
<p>Плагин всегда указывает тип анимации Instance. Если вы хотите её настроить, то придётся делать это вручную.</p>
17
<p>Плагин всегда указывает тип анимации Instance. Если вы хотите её настроить, то придётся делать это вручную.</p>
18
<p><strong>Как пользоваться</strong></p>
18
<p><strong>Как пользоваться</strong></p>
19
<p>1. Скачайте плагин<a>по ссылке</a>.</p>
19
<p>1. Скачайте плагин<a>по ссылке</a>.</p>
20
<p>2. Выделите фреймы, между которыми вы хотите сделать переходы.</p>
20
<p>2. Выделите фреймы, между которыми вы хотите сделать переходы.</p>
21
<p>3. Нажмите Ctrl (⌘) + P и выберите Prototype This.</p>
21
<p>3. Нажмите Ctrl (⌘) + P и выберите Prototype This.</p>
22
<p>4. В появившемся окне нажмите Prototype This и проверьте результат.</p>
22
<p>4. В появившемся окне нажмите Prototype This и проверьте результат.</p>
23
<p>Плагин похож на Prototype This, но с пресетами анимации. Пользователь выбирает фреймы и выбирает тип перехода в небольшой коллекции плагина. Также вы можете сделать и свой пресет анимации - чтобы тратить меньше времени на однотипные переходы.</p>
23
<p>Плагин похож на Prototype This, но с пресетами анимации. Пользователь выбирает фреймы и выбирает тип перехода в небольшой коллекции плагина. Также вы можете сделать и свой пресет анимации - чтобы тратить меньше времени на однотипные переходы.</p>
24
<p><strong>Как пользоваться</strong></p>
24
<p><strong>Как пользоваться</strong></p>
25
<p>1. Скачайте плагин<a>по ссылке</a>.</p>
25
<p>1. Скачайте плагин<a>по ссылке</a>.</p>
26
<p>2. Выделите фреймы, между которыми вы хотите сделать переходы. Если у вас есть кнопки, то в качестве стартового фрейма нужно выбирать их.</p>
26
<p>2. Выделите фреймы, между которыми вы хотите сделать переходы. Если у вас есть кнопки, то в качестве стартового фрейма нужно выбирать их.</p>
27
<p>3. Нажмите Ctrl (⌘) + P и выберите Protofly.</p>
27
<p>3. Нажмите Ctrl (⌘) + P и выберите Protofly.</p>
28
<p>4. В появившемся окне выберите тип перехода и проверьте результат.</p>
28
<p>4. В появившемся окне выберите тип перехода и проверьте результат.</p>
29
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>
29
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>