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 окт 2022</li>
2
<ul><li>21 окт 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 помогает добиваться очень интересных эффектов. Часто благодаря ей многие элементы интерфейса можно создать сразу в макете, а не открывать Photoshop и делать там дополнительные PNG-картинки. В этой инструкции рассказываем, как с помощью функции маски сделать плашку с прозрачным текстом.</p>
7
<p>Функция маски в Figma помогает добиваться очень интересных эффектов. Часто благодаря ей многие элементы интерфейса можно создать сразу в макете, а не открывать Photoshop и делать там дополнительные PNG-картинки. В этой инструкции рассказываем, как с помощью функции маски сделать плашку с прозрачным текстом.</p>
8
<ul><li>Сделайте текстовый слой и напишите на нём что-нибудь. Чтобы результат получился красивее, у шрифта советуем использовать начертание Bold или Black.</li>
8
<ul><li>Сделайте текстовый слой и напишите на нём что-нибудь. Чтобы результат получился красивее, у шрифта советуем использовать начертание Bold или Black.</li>
9
<li>Нажмите по слою правой кнопкой мыши и выберите Frame selection. При необходимости у получившегося фрейма можно включить<em>Auto layout</em>.</li>
9
<li>Нажмите по слою правой кнопкой мыши и выберите Frame selection. При необходимости у получившегося фрейма можно включить<em>Auto layout</em>.</li>
10
<li>На верхней панели инструментов нажмите , чтобы сделать из фрейма с текстом компонент. Это необязательно, но так вам будет удобнее изменить надпись позже.</li>
10
<li>На верхней панели инструментов нажмите , чтобы сделать из фрейма с текстом компонент. Это необязательно, но так вам будет удобнее изменить надпись позже.</li>
11
</ul><p>Если вы не хотите использовать на плашке градиент, то можете сделать её просто белой и пропустить этот шаг.</p>
11
</ul><p>Если вы не хотите использовать на плашке градиент, то можете сделать её просто белой и пропустить этот шаг.</p>
12
<ul><li>Создайте прямоугольник и скруглите у него углы.</li>
12
<ul><li>Создайте прямоугольник и скруглите у него углы.</li>
13
<li>В свойствах заливки прямоугольника вместо Solid укажите Angular. Над цветным полотном появится ещё одна цветная полоска - она отражает текущие цвета градиента и позволяет их редактировать.</li>
13
<li>В свойствах заливки прямоугольника вместо Solid укажите Angular. Над цветным полотном появится ещё одна цветная полоска - она отражает текущие цвета градиента и позволяет их редактировать.</li>
14
<li>На цветную полоску добавьте через один цвета #FFFFFF и #A7A7A7 - они должны стоять примерно на равном расстоянии друг от друга. Чтобы добавить цвет на градиент, нажмите на любое свободное место между цветами внутри полоски.</li>
14
<li>На цветную полоску добавьте через один цвета #FFFFFF и #A7A7A7 - они должны стоять примерно на равном расстоянии друг от друга. Чтобы добавить цвет на градиент, нажмите на любое свободное место между цветами внутри полоски.</li>
15
</ul><p>Вместо белого и серого можно использовать и другие цвета. Например, как<a>в голограмме</a>.</p>
15
</ul><p>Вместо белого и серого можно использовать и другие цвета. Например, как<a>в голограмме</a>.</p>
16
<p>Результат:</p>
16
<p>Результат:</p>
17
<p><a>Самоучитель по Figma</a></p>
17
<p><a>Самоучитель по Figma</a></p>
18
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
18
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
19
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
19
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>