0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>Figma - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования сделать "часы" из градиента.</p>
1
<p>Figma - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования сделать "часы" из градиента.</p>
2
<p>В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:</p>
2
<p>В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:</p>
3
<ul><li><a>Кнопки, прокрутка и поп-апы</a></li>
3
<ul><li><a>Кнопки, прокрутка и поп-апы</a></li>
4
<li><a>Анимация</a></li>
4
<li><a>Анимация</a></li>
5
</ul><p>1. Добавьте на макет фрейм с размерами iPhone 14. В него поместите квадрат и растяните его до того же размера.</p>
5
</ul><p>1. Добавьте на макет фрейм с размерами iPhone 14. В него поместите квадрат и растяните его до того же размера.</p>
6
<p>2. Вынесите квадрат из фрейма на холст. Затем в боковой панели настроек в блоке Fill нажмите на образец цвета, в появившемся окне вместо Solid выберите Angular.</p>
6
<p>2. Вынесите квадрат из фрейма на холст. Затем в боковой панели настроек в блоке Fill нажмите на образец цвета, в появившемся окне вместо Solid выберите Angular.</p>
7
<p>3. Укажите нужные цвета, которые образуют ваши часы: например, #D2FF5A и #000000. Для удобства измените овал на холсте, чтобы получился круг вместо овала. На распределение цветов это не повлияет.</p>
7
<p>3. Укажите нужные цвета, которые образуют ваши часы: например, #D2FF5A и #000000. Для удобства измените овал на холсте, чтобы получился круг вместо овала. На распределение цветов это не повлияет.</p>
8
<p>4. Выделите квадрат и нажмите , чтобы сделать компонент. Затем нажмите и сделайте вариант этого компонента.</p>
8
<p>4. Выделите квадрат и нажмите , чтобы сделать компонент. Затем нажмите и сделайте вариант этого компонента.</p>
9
<p>5. Внутри копии компонента перейдите в настройки градиента и поверните его по часовой стрелке на 90 градусов. Лучше это делать с зажатой клавишей Shift, чтобы результат получился точным. Так нужно сделать ещё два раза, чтобы у вас было четыре варианта в комбайне.</p>
9
<p>5. Внутри копии компонента перейдите в настройки градиента и поверните его по часовой стрелке на 90 градусов. Лучше это делать с зажатой клавишей Shift, чтобы результат получился точным. Так нужно сделать ещё два раза, чтобы у вас было четыре варианта в комбайне.</p>
10
<p>6. На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.</p>
10
<p>6. На правой панели настроек откройте Prototype. Затем наведите курсор на первый вариант, зажмите появившийся кружок и перетащите его на второй. Должна появиться стрелка.</p>
11
<p>7. В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation и укажите длительность 300 ms.</p>
11
<p>7. В появившемся окне вместо On tap выберите After delay и укажите время 1 ms. Ниже в том же окне вместо Instant выберите Smart animation и укажите длительность 300 ms.</p>
12
<p>8. Сделайте то же самое с остальными компонентами. От последнего компонента стрелку нужно вести к первому.</p>
12
<p>8. Сделайте то же самое с остальными компонентами. От последнего компонента стрелку нужно вести к первому.</p>
13
<p>9. Скопируйте первый компонент во фрейм, который вы сделали в самом начале. По желанию можно добавить текст с цветом вашего градиента, режимом наложения Overlay и непрозрачностью 50%.</p>
13
<p>9. Скопируйте первый компонент во фрейм, который вы сделали в самом начале. По желанию можно добавить текст с цветом вашего градиента, режимом наложения Overlay и непрозрачностью 50%.</p>
14
<p>Результат:</p>
14
<p>Результат:</p>
15
<p><a>Самоучитель по Figma</a></p>
15
<p><a>Самоучитель по Figma</a></p>
16
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
16
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
17
<p><strong>Другие короткие инструкции по Figma</strong></p>
17
<p><strong>Другие короткие инструкции по Figma</strong></p>
18
18