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>14 фев 2025</li>
2
<ul><li>14 фев 2025</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>Модульную сетку можно включить только у фрейма. Если ваш макет свёрстан в группе, её можно быстро превратить во фрейм:</p>
8
<p>Модульную сетку можно включить только у фрейма. Если ваш макет свёрстан в группе, её можно быстро превратить во фрейм:</p>
9
<ul><li>Выделите свою группу на панели слоёв.</li>
9
<ul><li>Выделите свою группу на панели слоёв.</li>
10
<li>Нажмите на неё правой кнопкой мыши и выберите Frame Selection или нажмите Alt + Ctrl (⌘) + G на клавиатуре. Теперь на макет можно наложить модульную сетку.</li>
10
<li>Нажмите на неё правой кнопкой мыши и выберите Frame Selection или нажмите Alt + Ctrl (⌘) + G на клавиатуре. Теперь на макет можно наложить модульную сетку.</li>
11
</ul><p>Чтобы включить сетку, выделите фрейм и на панели настроек нажмите на плюсик в блоке Layout Grid.</p>
11
</ul><p>Чтобы включить сетку, выделите фрейм и на панели настроек нажмите на плюсик в блоке Layout Grid.</p>
12
<p><strong>Grid</strong> - простая пиксельная сетка в клетку. По умолчанию Figma включает именно её с шагом в десять пикселей:</p>
12
<p><strong>Grid</strong> - простая пиксельная сетка в клетку. По умолчанию Figma включает именно её с шагом в десять пикселей:</p>
13
<em>Скриншот: Skillbox Media</em><p><strong>Columns</strong> - колонки. Делит макет вертикально:</p>
13
<em>Скриншот: Skillbox Media</em><p><strong>Columns</strong> - колонки. Делит макет вертикально:</p>
14
<em>Скриншот: Skillbox Media</em><p><strong>Rows</strong> - строки. Делит макет горизонтально:</p>
14
<em>Скриншот: Skillbox Media</em><p><strong>Rows</strong> - строки. Делит макет горизонтально:</p>
15
<em>Скриншот: Skillbox Media</em><p>Rows почти никогда не используют для вёрстки сайтов, так как добиться одинаковой высоты строки для разных экранов устройств невозможно:</p>
15
<em>Скриншот: Skillbox Media</em><p>Rows почти никогда не используют для вёрстки сайтов, так как добиться одинаковой высоты строки для разных экранов устройств невозможно:</p>
16
<p>Чтобы изменить формат сетки, нажмите на иконку в блоке Layout Grid и в верхнем углу появившегося меню укажите нужный формат.</p>
16
<p>Чтобы изменить формат сетки, нажмите на иконку в блоке Layout Grid и в верхнем углу появившегося меню укажите нужный формат.</p>
17
<p>Сетки можно комбинировать между собой. Чтобы это сделать, выделите ваш фрейм с макетом и нажмите несколько раз на плюсик напротив слов Layout Grid:</p>
17
<p>Сетки можно комбинировать между собой. Чтобы это сделать, выделите ваш фрейм с макетом и нажмите несколько раз на плюсик напротив слов Layout Grid:</p>
18
<p>Каждую сетку можно отдельно настроить:</p>
18
<p>Каждую сетку можно отдельно настроить:</p>
19
<p><strong>Color</strong> - цвет и непрозрачность сетки. По умолчанию Figma делает её красной, но если этот цвет недостаточно контрастирует с макетом, его можно изменить.</p>
19
<p><strong>Color</strong> - цвет и непрозрачность сетки. По умолчанию Figma делает её красной, но если этот цвет недостаточно контрастирует с макетом, его можно изменить.</p>
20
<p><strong>Size</strong> - размер пиксельной сетки. Работает только в формате Grid.</p>
20
<p><strong>Size</strong> - размер пиксельной сетки. Работает только в формате Grid.</p>
21
<p><strong>Count</strong> - количество колонок или строк.</p>
21
<p><strong>Count</strong> - количество колонок или строк.</p>
22
<p><strong>Gutter</strong> - отступы между колонками или строками.</p>
22
<p><strong>Gutter</strong> - отступы между колонками или строками.</p>
23
<p><strong>Margin</strong> - отступ от сетки до края фрейма.</p>
23
<p><strong>Margin</strong> - отступ от сетки до края фрейма.</p>
24
<p>У Columns и Rows также есть настройка Type:</p>
24
<p>У Columns и Rows также есть настройка Type:</p>
25
<p><strong>Stretch</strong>― сетка будет автоматически подстраиваться под ширину фрейма. Этот тип используют чаще всего, так как работать с ним проще.</p>
25
<p><strong>Stretch</strong>― сетка будет автоматически подстраиваться под ширину фрейма. Этот тип используют чаще всего, так как работать с ним проще.</p>
26
<p><strong>Center</strong>― сетка выравнивается по центру. С этим свойством у сетки активируется параметр Width (ширина).</p>
26
<p><strong>Center</strong>― сетка выравнивается по центру. С этим свойством у сетки активируется параметр Width (ширина).</p>
27
<p><strong>Left</strong>и <strong>Right</strong>― сетка выравнивается по левому или правому краю. Активируется параметр Width (ширина) и Offset (смещение относительно края).</p>
27
<p><strong>Left</strong>и <strong>Right</strong>― сетка выравнивается по левому или правому краю. Активируется параметр Width (ширина) и Offset (смещение относительно края).</p>
28
<p>Из сетки можно сделать шаблон стиля и использовать в других макетах. Это поможет выдержать единообразие всех страниц сайта или экранов приложений:</p>
28
<p>Из сетки можно сделать шаблон стиля и использовать в других макетах. Это поможет выдержать единообразие всех страниц сайта или экранов приложений:</p>
29
<p>1. Создайте сетку под ваш макет: настройте шаг в пиксельной сетке, укажите количество колонок и отступы между ними.</p>
29
<p>1. Создайте сетку под ваш макет: настройте шаг в пиксельной сетке, укажите количество колонок и отступы между ними.</p>
30
<p>2. Нажмите на иконку , а в появившемся меню - на плюс. Назовите свою сетку и нажмите Save.</p>
30
<p>2. Нажмите на иконку , а в появившемся меню - на плюс. Назовите свою сетку и нажмите Save.</p>
31
<p>3. Чтобы использовать стиль, выберите любой фрейм, нажмите на иконку и в появившемся меню выберите свою сетку.</p>
31
<p>3. Чтобы использовать стиль, выберите любой фрейм, нажмите на иконку и в появившемся меню выберите свою сетку.</p>
32
<p>Они помогут выровнять макет, если вам не хочется создавать для него модульную сетку. Как пользоваться направляющими:</p>
32
<p>Они помогут выровнять макет, если вам не хочется создавать для него модульную сетку. Как пользоваться направляющими:</p>
33
<p>1. Нажмите на иконку , перейдите в пункт View и нажмите Rulers.</p>
33
<p>1. Нажмите на иконку , перейдите в пункт View и нажмите Rulers.</p>
34
<p>2. Чтобы добавить направляющую, поставьте курсор над появившейся линейкой слева или сверху, зажмите правую кнопку и тяните её туда, где она должна встать.</p>
34
<p>2. Чтобы добавить направляющую, поставьте курсор над появившейся линейкой слева или сверху, зажмите правую кнопку и тяните её туда, где она должна встать.</p>
35
<p>3. Чтобы поменять положение линейки, поставьте курсор над ней, зажмите правую кнопку мыши и тяните её туда, где она должна встать.</p>
35
<p>3. Чтобы поменять положение линейки, поставьте курсор над ней, зажмите правую кнопку мыши и тяните её туда, где она должна встать.</p>
36
<p>У направляющих есть интересная особенность: если они оказались внутри фрейма, то за его границы они выходить не будут. Это помогает держать макет опрятным и понятным:</p>
36
<p>У направляющих есть интересная особенность: если они оказались внутри фрейма, то за его границы они выходить не будут. Это помогает держать макет опрятным и понятным:</p>
37
<em>Скриншот: Skillbox Media</em><p><a>Самоучитель по Figma</a></p>
37
<em>Скриншот: Skillbox Media</em><p><a>Самоучитель по Figma</a></p>
38
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
38
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
39
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>
39
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>