2 added
2 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>6 дек 2024</li>
2
<ul><li>6 дек 2024</li>
3
<li>0</li>
3
<li>0</li>
4
-
</ul><p>Рассказываем, что такое Auto Layout и как с помощью него можно аккуратно и быстро сверстать кнопку, модуль и ��траницу.</p>
4
+
</ul><p>Рассказываем, что такое Auto Layout и как с помощью него можно аккуратно и быстро сверстать кнопку, модуль и страницу.</p>
5
<p>Иллюстрация: Полина Честнова для Skillbox Media</p>
5
<p>Иллюстрация: Полина Честнова для Skillbox Media</p>
6
<p>Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.</p>
6
<p>Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.</p>
7
<p>Дизайнер во время вёрстки следит за структурой макета: все отступы нужно подчинить общей системе, а соседние модули - выровнять друг с другом. Изменение одного модуля может повлиять на весь макет, и всё придётся подгонять вручную заново.</p>
7
<p>Дизайнер во время вёрстки следит за структурой макета: все отступы нужно подчинить общей системе, а соседние модули - выровнять друг с другом. Изменение одного модуля может повлиять на весь макет, и всё придётся подгонять вручную заново.</p>
8
<p>Инструмент Auto Layout в Pixso, как и в Figma, позволяет указывать отступы и выравнивать соседние модули автоматически. Рассмотрим, как пользоваться Auto Layout, на примере кнопки, модуля и страницы.</p>
8
<p>Инструмент Auto Layout в Pixso, как и в Figma, позволяет указывать отступы и выравнивать соседние модули автоматически. Рассмотрим, как пользоваться Auto Layout, на примере кнопки, модуля и страницы.</p>
9
<p><a>Figma</a>|<strong>Pixso</strong></p>
9
<p><a>Figma</a>|<strong>Pixso</strong></p>
10
<p>Auto Layout в Pixso работает как переключаемый режим. Чтобы активировать его, нужно выбрать любой фрейм и на боковой панели настроек в блоке Auto Layout нажать "+". В этом же меню откроются все нужные настройки.</p>
10
<p>Auto Layout в Pixso работает как переключаемый режим. Чтобы активировать его, нужно выбрать любой фрейм и на боковой панели настроек в блоке Auto Layout нажать "+". В этом же меню откроются все нужные настройки.</p>
11
<p>H и W в блоке Frame - регулируют ширину и высоту блока. Вы можете сделать так, чтобы блок сам подстраивался под содержимое, указать минимальный и максимальный размер.</p>
11
<p>H и W в блоке Frame - регулируют ширину и высоту блока. Вы можете сделать так, чтобы блок сам подстраивался под содержимое, указать минимальный и максимальный размер.</p>
12
<p>Стрелки указывают, как будут выстраиваться элементы внутри фрейма с Auto Layout. означает вертикальное выравнивание, а - горизонтальное. Стрелка означает, что если при горизонтальном выравнивании какие-то модули не будут влезать в строку, они автоматически перенесутся на следующую.</p>
12
<p>Стрелки указывают, как будут выстраиваться элементы внутри фрейма с Auto Layout. означает вертикальное выравнивание, а - горизонтальное. Стрелка означает, что если при горизонтальном выравнивании какие-то модули не будут влезать в строку, они автоматически перенесутся на следующую.</p>
13
<p> - этот параметр задаёт отступы между элементами.</p>
13
<p> - этот параметр задаёт отступы между элементами.</p>
14
<p>и - эти параметры задают внешние поля сверху и снизу соответственно.</p>
14
<p>и - эти параметры задают внешние поля сверху и снизу соответственно.</p>
15
<p> - переключает настройки внешних полей так, чтобы вы могли настроить каждое отдельно.</p>
15
<p> - переключает настройки внешних полей так, чтобы вы могли настроить каждое отдельно.</p>
16
<p> - дополнительные настройки. Здесь вы можете указать вынос обводки блоков и перекрытие при отрицательных отступах.</p>
16
<p> - дополнительные настройки. Здесь вы можете указать вынос обводки блоков и перекрытие при отрицательных отступах.</p>
17
<p>В большой таблице - настройки выравнивания содержимого. Если дважды кликнуть на синюю иконку, модули будут выравниваться по ширине или высоте основного фрейма так, чтобы полностью его заполнить.</p>
17
<p>В большой таблице - настройки выравнивания содержимого. Если дважды кликнуть на синюю иконку, модули будут выравниваться по ширине или высоте основного фрейма так, чтобы полностью его заполнить.</p>
18
<p>Чтобы поменять блоки местами, выделите один из них и перетяните на то место, где он должен стоять, - выбранный блок сам выровняется в соответствии с настройками фрейма с Auto Layout, как и соседние.</p>
18
<p>Чтобы поменять блоки местами, выделите один из них и перетяните на то место, где он должен стоять, - выбранный блок сам выровняется в соответствии с настройками фрейма с Auto Layout, как и соседние.</p>
19
<p>В отличие от обычного фрейма, кнопка с Auto Layout будет сама адаптироваться под длину текста, и вам не придётся её каждый раз переделывать.</p>
19
<p>В отличие от обычного фрейма, кнопка с Auto Layout будет сама адаптироваться под длину текста, и вам не придётся её каждый раз переделывать.</p>
20
<p><strong>Как сделать адаптивную кнопку:</strong></p>
20
<p><strong>Как сделать адаптивную кнопку:</strong></p>
21
<p>1. Напишите любой текст.</p>
21
<p>1. Напишите любой текст.</p>
22
<p>2. Нажмите на текст правой кнопкой мыши и выберите Frame Selection.</p>
22
<p>2. Нажмите на текст правой кнопкой мыши и выберите Frame Selection.</p>
23
<p>3. Выделите получившийся фрейм, на панели настроек добавьте ему фон в блоке Fill и нажмите на "+" в блоке Auto Layout.</p>
23
<p>3. Выделите получившийся фрейм, на панели настроек добавьте ему фон в блоке Fill и нажмите на "+" в блоке Auto Layout.</p>
24
<p>4. В появившихся настройках укажите вертикальные и горизонтальные отступы.</p>
24
<p>4. В появившихся настройках укажите вертикальные и горизонтальные отступы.</p>
25
<p>Кнопка сама адаптируется под длину текста благодаря свойству Hug в параметрах ширины и высоты - оно всегда активируется по умолчанию, но его можно поменять.</p>
25
<p>Кнопка сама адаптируется под длину текста благодаря свойству Hug в параметрах ширины и высоты - оно всегда активируется по умолчанию, но его можно поменять.</p>
26
<p>Если в параметре ширины или высоты указать свойство Fixed, то модуль кнопки получит фиксированный размер и не будет следовать за изменением текста.</p>
26
<p>Если в параметре ширины или высоты указать свойство Fixed, то модуль кнопки получит фиксированный размер и не будет следовать за изменением текста.</p>
27
<p>1. Создайте белый фрейм.</p>
27
<p>1. Создайте белый фрейм.</p>
28
<p>2. Добавьте в него любые объекты каким угодно образом.</p>
28
<p>2. Добавьте в него любые объекты каким угодно образом.</p>
29
<p>3. Выделите получившийся фрейм, на панели настроек добавьте ему фон в блоке Fill и нажмите на "+" в блоке Auto Layout. Все блоки автоматически выровняются.</p>
29
<p>3. Выделите получившийся фрейм, на панели настроек добавьте ему фон в блоке Fill и нажмите на "+" в блоке Auto Layout. Все блоки автоматически выровняются.</p>
30
<p>4. Установите отступ между модулями 24 пикселя, укажите вертикальное выравнивание , в большой таблице - выравнивание по верхнему левому краю и установите все внешние поля на 48 пикселей:</p>
30
<p>4. Установите отступ между модулями 24 пикселя, укажите вертикальное выравнивание , в большой таблице - выравнивание по верхнему левому краю и установите все внешние поля на 48 пикселей:</p>
31
<p>При необходимости вы можете использовать сразу два блока с Auto Layout на одной странице. Для этого их нужно отдельно сгруппировать и настроить так же, как вы только что сделали с модулем выше.</p>
31
<p>При необходимости вы можете использовать сразу два блока с Auto Layout на одной странице. Для этого их нужно отдельно сгруппировать и настроить так же, как вы только что сделали с модулем выше.</p>
32
<p>Если вы хотите добавить в Auto Layout декоративный элемент, который бы не влиял на общее выравнивание, вы можете задать ему абсолютное позиционирование. Для этого перенесите объект во фрейм c Auto Layout и в верхней панели настроек справа нажмите .</p>
32
<p>Если вы хотите добавить в Auto Layout декоративный элемент, который бы не влиял на общее выравнивание, вы можете задать ему абсолютное позиционирование. Для этого перенесите объект во фрейм c Auto Layout и в верхней панели настроек справа нажмите .</p>
33
<p>Страница собирается так же, как и модуль. Разница только в том, что каждый внутренний модуль нужно сгруппировать отдельно.</p>
33
<p>Страница собирается так же, как и модуль. Разница только в том, что каждый внутренний модуль нужно сгруппировать отдельно.</p>
34
<p>1. Создайте фрейм, выделите его и нажмите на "+" рядом с Auto Layout на панели настроек.</p>
34
<p>1. Создайте фрейм, выделите его и нажмите на "+" рядом с Auto Layout на панели настроек.</p>
35
<p>2. Выделите левой кнопкой мыши ваши модули и поместите их в получившийся фрейм с Auto Layout.</p>
35
<p>2. Выделите левой кнопкой мыши ваши модули и поместите их в получившийся фрейм с Auto Layout.</p>
36
<p>3. Укажите горизонтальные и внешние отступы основного фрейма.</p>
36
<p>3. Укажите горизонтальные и внешние отступы основного фрейма.</p>
37
<p>Модули сами подстроятся под текущие настройки Auto Layout:</p>
37
<p>Модули сами подстроятся под текущие настройки Auto Layout:</p>
38
<p><strong>Другие материалы об инструментах дизайнера</strong></p>
38
<p><strong>Другие материалы об инструментах дизайнера</strong></p>
39
-
<a>Научитесь: Профессия Графический дизайнер PRO Узнать больше</a>
39
+
<a>Научитесь: Профессия Графический дизайнер PRO + ИИ Узнать больше</a>