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>4 мар 2022</li>
2
<ul><li>4 мар 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, как использовать математику в Figma, сделать из картинки заливку и включить пиксельное отображение вектора.</p>
4
</ul><p>Рассказываем, как использовать математику в Figma, сделать из картинки заливку и включить пиксельное отображение вектора.</p>
5
<p>Иллюстрация: Meery Mary для Skillbox Media</p>
5
<p>Иллюстрация: Meery Mary для 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>Если вы не смогли сразу настроить интерлиньяж текстовой строки и решили оставить его стандартным, просто удалите своё значение из поля ввода. Figma автоматически вернёт значение по умолчанию, и вам не придётся подбирать его заново.</p>
9
<p>Если вы не смогли сразу настроить интерлиньяж текстовой строки и решили оставить его стандартным, просто удалите своё значение из поля ввода. Figma автоматически вернёт значение по умолчанию, и вам не придётся подбирать его заново.</p>
10
<p>Самостоятельно сместить какой-либо объект на один пиксель или на 1% - не всегда просто. Чтобы не вычислять значение нужного размера или расположения в уме, сделайте это прямо в полях ввода - например, наберите "144+1%". Графический редактор сам всё посчитает, и свойства объекта тут же изменятся.</p>
10
<p>Самостоятельно сместить какой-либо объект на один пиксель или на 1% - не всегда просто. Чтобы не вычислять значение нужного размера или расположения в уме, сделайте это прямо в полях ввода - например, наберите "144+1%". Графический редактор сам всё посчитает, и свойства объекта тут же изменятся.</p>
11
<p>Таким образом можно изменить размер объекта, его расположение и непрозрачность. Математический расчёт работает во всех полях, где нужно вводить числа.</p>
11
<p>Таким образом можно изменить размер объекта, его расположение и непрозрачность. Математический расчёт работает во всех полях, где нужно вводить числа.</p>
12
<p>Если в Figma вы рисуете векторное изображение, которое потом хотите использовать как растровое, его внешний вид важно заранее проверить. Чтобы лишний раз не выгружать картинку и не редактировать её наугад, воспользуйтесь пиксельным режимом. В нём Figma будет отображать все объекты в растровом формате, и вы сможете заранее понять, как будут выглядеть мелкие детали вашего изображения.</p>
12
<p>Если в Figma вы рисуете векторное изображение, которое потом хотите использовать как растровое, его внешний вид важно заранее проверить. Чтобы лишний раз не выгружать картинку и не редактировать её наугад, воспользуйтесь пиксельным режимом. В нём Figma будет отображать все объекты в растровом формате, и вы сможете заранее понять, как будут выглядеть мелкие детали вашего изображения.</p>
13
<p>Чтобы включить пиксельный режим просмотра, нажмите сочетание клавиш Ctrl + Alt + Y (на macOS - Ctrl + Y). Либо нажмите на иконку , затем View и выберите Pixel Preview.</p>
13
<p>Чтобы включить пиксельный режим просмотра, нажмите сочетание клавиш Ctrl + Alt + Y (на macOS - Ctrl + Y). Либо нажмите на иконку , затем View и выберите Pixel Preview.</p>
14
<p>Если вы не использовали стили при проектировании приложения, а клиент попросил поменять оттенок красного, то не нужно сразу бросаться и перекрашивать каждый макет. Просто выделите их, и на панели настроек появится список используемых цветов, которые можно поменять.</p>
14
<p>Если вы не использовали стили при проектировании приложения, а клиент попросил поменять оттенок красного, то не нужно сразу бросаться и перекрашивать каждый макет. Просто выделите их, и на панели настроек появится список используемых цветов, которые можно поменять.</p>
15
<p>Кстати, в этом же меню из любого цвета можно сделать стиль.</p>
15
<p>Кстати, в этом же меню из любого цвета можно сделать стиль.</p>
16
<p>Обычно в Figma стили делают из простых цветов либо градиентов. То же самое можно сделать с обычными картинками и использовать их как заливку любых фреймов, фигур или даже текста.</p>
16
<p>Обычно в Figma стили делают из простых цветов либо градиентов. То же самое можно сделать с обычными картинками и использовать их как заливку любых фреймов, фигур или даже текста.</p>
17
<p><strong>Как добавить изображение в стили</strong></p>
17
<p><strong>Как добавить изображение в стили</strong></p>
18
<ul><li>Добавьте на макет любое изображение и выделите его.</li>
18
<ul><li>Добавьте на макет любое изображение и выделите его.</li>
19
<li>Перейдите в пункт Fill ("Заливка") и нажмите на иконку .</li>
19
<li>Перейдите в пункт Fill ("Заливка") и нажмите на иконку .</li>
20
<li>В появившемся меню нажмите на плюсик.</li>
20
<li>В появившемся меню нажмите на плюсик.</li>
21
<li>Назовите стиль и сохраните.</li>
21
<li>Назовите стиль и сохраните.</li>
22
<li>Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke - он находится под Fill.</li>
22
<li>Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke - он находится под Fill.</li>
23
</ul><p><a>Самоучитель по Figma</a></p>
23
</ul><p><a>Самоучитель по Figma</a></p>
24
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
24
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
25
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>
25
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>