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>28 мар 2025</li>
2
<ul><li>28 мар 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, как сделать прототип интерфейса в Figma, чтобы показать его клиенту, разработчику или арт-директору.</p>
4
</ul><p>Рассказываем, как сделать прототип интерфейса в Figma, чтобы показать его клиенту, разработчику или арт-директору.</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>На панели настроек справа в самом верху есть вкладки Design и Prototype. Все настройки прототипов находятся в Prototype.</p>
9
<p>На панели настроек справа в самом верху есть вкладки Design и Prototype. Все настройки прототипов находятся в Prototype.</p>
10
<p>Кликните по любому пустому пространству на макете и перейдите во вкладку Prototype. Вы увидите настройки предпросмотра.</p>
10
<p>Кликните по любому пустому пространству на макете и перейдите во вкладку Prototype. Вы увидите настройки предпросмотра.</p>
11
<p>Вы можете поменять устройство, его цвет, ориентацию и цвет фона. Главное здесь - устройство, так как от него будет зависеть плавность анимации прокрутки. В No device она резкая, а в любом телефоне - плавная:</p>
11
<p>Вы можете поменять устройство, его цвет, ориентацию и цвет фона. Главное здесь - устройство, так как от него будет зависеть плавность анимации прокрутки. В No device она резкая, а в любом телефоне - плавная:</p>
12
<em>Изображение: Skillbox Media</em><p>Чтобы открыть настройки конкретного экрана, нужно просто нажать на любой фрейм, который вы хотите превратить в прототип. Об этом мы поэтапно расскажем ниже.</p>
12
<em>Изображение: Skillbox Media</em><p>Чтобы открыть настройки конкретного экрана, нужно просто нажать на любой фрейм, который вы хотите превратить в прототип. Об этом мы поэтапно расскажем ниже.</p>
13
<p>1. Сверстайте два фрейма - один с кнопкой, а другой с длинной лентой.</p>
13
<p>1. Сверстайте два фрейма - один с кнопкой, а другой с длинной лентой.</p>
14
<p>2. Перейдите во вкладку Prototype.</p>
14
<p>2. Перейдите во вкладку Prototype.</p>
15
<p>3. Выделите кнопку на макете. На одной из его сторон появится кружок - зажмите его и тяните к другому фрейму.</p>
15
<p>3. Выделите кнопку на макете. На одной из его сторон появится кружок - зажмите его и тяните к другому фрейму.</p>
16
<p>3. Чтобы сделать кнопку "Назад", выберите любой элемент на макете с лентой и на вкладке Prototype нажмите на плюсик напротив слова Interactions. В поле Trigger укажите On tap, а в Action - Back.</p>
16
<p>3. Чтобы сделать кнопку "Назад", выберите любой элемент на макете с лентой и на вкладке Prototype нажмите на плюсик напротив слова Interactions. В поле Trigger укажите On tap, а в Action - Back.</p>
17
<p>4. Чтобы запустить прототип, нажмите кнопку в правом верхнем углу.</p>
17
<p>4. Чтобы запустить прототип, нажмите кнопку в правом верхнем углу.</p>
18
<p>1. Выделите фрейм, в котором нужна прокрутка. Чтобы она работала, высота фрейма с лентой должна быть больше экрана устройства.</p>
18
<p>1. Выделите фрейм, в котором нужна прокрутка. Чтобы она работала, высота фрейма с лентой должна быть больше экрана устройства.</p>
19
<p>2. На вкладке Prototype в пункте Overflow scrolling выберите нужный формат прокрутки: горизонтальный, вертикальный или общий.</p>
19
<p>2. На вкладке Prototype в пункте Overflow scrolling выберите нужный формат прокрутки: горизонтальный, вертикальный или общий.</p>
20
<p>3. Чтобы зафиксировать верхнюю и нижнюю панель приложения, перейдите на вкладку Design и в блоке Constraints нажмите галочку напротив Fix position when scrolling.</p>
20
<p>3. Чтобы зафиксировать верхнюю и нижнюю панель приложения, перейдите на вкладку Design и в блоке Constraints нажмите галочку напротив Fix position when scrolling.</p>
21
<p>4. Чтобы запустить прототип, нажмите на кнопку в правом верхнем углу.</p>
21
<p>4. Чтобы запустить прототип, нажмите на кнопку в правом верхнем углу.</p>
22
<p>1. Выделите объект, по нажатию на который должен появиться поп-ап. На одной из его сторон появится кружок - зажмите его и тяните к другому фрейму, который будет выполнять функцию поп-апа.</p>
22
<p>1. Выделите объект, по нажатию на который должен появиться поп-ап. На одной из его сторон появится кружок - зажмите его и тяните к другому фрейму, который будет выполнять функцию поп-апа.</p>
23
<p>2. В появившемся окне в поле Action вместо Navigate to выберите Open overlay. В поле Position можно указать, в какой части экрана появится поп-ап, - укажите Manual и поставьте его в нужное место. Также поставьте галочку Close when clicking outside ("Закрыть, если кликнуть снаружи").</p>
23
<p>2. В появившемся окне в поле Action вместо Navigate to выберите Open overlay. В поле Position можно указать, в какой части экрана появится поп-ап, - укажите Manual и поставьте его в нужное место. Также поставьте галочку Close when clicking outside ("Закрыть, если кликнуть снаружи").</p>
24
<p>3. По желанию сделайте поп-ап сменяющимся. Выберите ваш поп-ап и протяните от него линию к другому поп-апу. В появившемся окне в поле Action укажите Swap overlay.</p>
24
<p>3. По желанию сделайте поп-ап сменяющимся. Выберите ваш поп-ап и протяните от него линию к другому поп-апу. В появившемся окне в поле Action укажите Swap overlay.</p>
25
<p>4. Чтобы запустить прототип, нажмите на кнопку в правом верхнем углу.</p>
25
<p>4. Чтобы запустить прототип, нажмите на кнопку в правом верхнем углу.</p>
26
<p>1. В основном фрейме с экраном приложения выделите объект, по нажатию на который нужно прокрутить страницу. На одной из его сторон появится кружок - зажмите его и тяните к другому фрейму внутри основного.</p>
26
<p>1. В основном фрейме с экраном приложения выделите объект, по нажатию на который нужно прокрутить страницу. На одной из его сторон появится кружок - зажмите его и тяните к другому фрейму внутри основного.</p>
27
<p>2. В появившемся окне в поле Offset увеличьте значение X, чтобы прокрутка не работала "впритык".</p>
27
<p>2. В появившемся окне в поле Offset увеличьте значение X, чтобы прокрутка не работала "впритык".</p>
28
<p>3. По желанию добавьте анимацию. Для этого в поле Animation вместо Instant выберите Animate и укажите длительность.</p>
28
<p>3. По желанию добавьте анимацию. Для этого в поле Animation вместо Instant выберите Animate и укажите длительность.</p>
29
<p>4. Чтобы запустить прототип, нажмите на кнопку в правом верхнем углу.</p>
29
<p>4. Чтобы запустить прототип, нажмите на кнопку в правом верхнем углу.</p>
30
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>
30
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>