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>9 дек 2022</li>
2
<ul><li>9 дек 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><ul><li>Добавьте на макет фрейм с размером iPhone 14, а внутри него разместите текстовый слой. Рекомендуем делать его как можно больше, чтобы эффект фонарика выглядел лучше. Например, можно повернуть текст на 90 градусов - тогда вы сможете легко сделать кегль текста больше.</li>
11
</ul><ul><li>Добавьте на макет фрейм с размером iPhone 14, а внутри него разместите текстовый слой. Рекомендуем делать его как можно больше, чтобы эффект фонарика выглядел лучше. Например, можно повернуть текст на 90 градусов - тогда вы сможете легко сделать кегль текста больше.</li>
12
<li>Добавьте на макет копию вашего первого варианта из компонента - с прозрачным квадратом. Затем сделайте ещё одну копию того же компонента, выделите их и сгруппируйте во фрейм - Ctrl (⌘) + Alt (⌥) + G.</li>
12
<li>Добавьте на макет копию вашего первого варианта из компонента - с прозрачным квадратом. Затем сделайте ещё одну копию того же компонента, выделите их и сгруппируйте во фрейм - Ctrl (⌘) + Alt (⌥) + G.</li>
13
<li>В боковой панели настроек в блоке Auto Layout нажмите +, чтобы квадраты сами выравнивались. Убедитесь, что все отступы в настройках равны нулю.</li>
13
<li>В боковой панели настроек в блоке Auto Layout нажмите +, чтобы квадраты сами выравнивались. Убедитесь, что все отступы в настройках равны нулю.</li>
14
<li>В компоненте выделите любой компонент, нажмите Ctrl (⌘) + С и затем Ctrl (⌘) + V - компонент скопируется в столбец и сам встанет ровно. Делайте новые копии компонента до тех пор, пока они не заполнят всю высоту фрейма.</li>
14
<li>В компоненте выделите любой компонент, нажмите Ctrl (⌘) + С и затем Ctrl (⌘) + V - компонент скопируется в столбец и сам встанет ровно. Делайте новые копии компонента до тех пор, пока они не заполнят всю высоту фрейма.</li>
15
<li>Скопируйте получившийся фрейм с компонентами несколько раз - чтобы они заняли и ширину экрана.</li>
15
<li>Скопируйте получившийся фрейм с компонентами несколько раз - чтобы они заняли и ширину экрана.</li>
16
<li>В панели слоёв проверьте, чтобы текстовый слой располагался выше ваших фреймов с компонентами. Иначе эффект не сработает.</li>
16
<li>В панели слоёв проверьте, чтобы текстовый слой располагался выше ваших фреймов с компонентами. Иначе эффект не сработает.</li>
17
<li>Нажмите кнопку Play и проверьте результат.</li>
17
<li>Нажмите кнопку Play и проверьте результат.</li>
18
</ul><p>Результат:</p>
18
</ul><p>Результат:</p>
19
<p><a>Самоучитель по Figma</a></p>
19
<p><a>Самоучитель по Figma</a></p>
20
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
20
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
21
<p><strong>Другие короткие инструкции по Figma</strong></p>
21
<p><strong>Другие короткие инструкции по Figma</strong></p>
22
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
22
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>