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>10 сен 2021</li>
2
<ul><li>10 сен 2021</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>Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.</p>
8
<p>Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.</p>
9
<p>Если вы работаете над большим проектом, в документе становится сложно ориентироваться из-за большого количества фреймов, групп и компонентов, особенно когда они все развёрнуты.</p>
9
<p>Если вы работаете над большим проектом, в документе становится сложно ориентироваться из-за большого количества фреймов, групп и компонентов, особенно когда они все развёрнуты.</p>
10
<p>Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.</p>
10
<p>Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.</p>
11
Изображение: Skillbox Media<p>Выделите любой фрейм или фигуру, нажмите кнопку I, зажмите левую кнопку мыши и водите курсором по макету. Любой цвет под ним станет фоновым для выделенного элемента. Так вы сможете быстрее выбрать нужный оттенок для кнопки, текста или основного фона макета.</p>
11
Изображение: Skillbox Media<p>Выделите любой фрейм или фигуру, нажмите кнопку I, зажмите левую кнопку мыши и водите курсором по макету. Любой цвет под ним станет фоновым для выделенного элемента. Так вы сможете быстрее выбрать нужный оттенок для кнопки, текста или основного фона макета.</p>
12
Изображение: Skillbox Media<p>По умолчанию Figma создаёт новые фреймы с названием Frame 1 - оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм - легко, но если их 10 или 20, то придётся потратить на это много времени.</p>
12
Изображение: Skillbox Media<p>По умолчанию Figma создаёт новые фреймы с названием Frame 1 - оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм - легко, но если их 10 или 20, то придётся потратить на это много времени.</p>
13
<p>Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:</p>
13
<p>Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:</p>
14
Изображение: Skillbox Media<p>Настройки переименования объектов:</p>
14
Изображение: Skillbox Media<p>Настройки переименования объектов:</p>
15
<ul><li>Match - часть имени, которую вы хотите изменить. Если ничего здесь не указать, название объекта поменяется целиком.</li>
15
<ul><li>Match - часть имени, которую вы хотите изменить. Если ничего здесь не указать, название объекта поменяется целиком.</li>
16
<li>Rename to - новое имя для объектов.</li>
16
<li>Rename to - новое имя для объектов.</li>
17
<li>Кнопка Current name - добавить текущее название объекта.</li>
17
<li>Кнопка Current name - добавить текущее название объекта.</li>
18
<li>Кнопки Number - добавить порядковые номера по возрастанию Number ↑ или по убыванию Number ↓.</li>
18
<li>Кнопки Number - добавить порядковые номера по возрастанию Number ↑ или по убыванию Number ↓.</li>
19
<li>Start sequence from - указать, с какого числа начинать отсчёт. Параметр редактируется, если вы добавили в название порядковые номера.</li>
19
<li>Start sequence from - указать, с какого числа начинать отсчёт. Параметр редактируется, если вы добавили в название порядковые номера.</li>
20
</ul><p>Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.</p>
20
</ul><p>Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.</p>
21
<p><strong>Как пользоваться Tidy up</strong></p>
21
<p><strong>Как пользоваться Tidy up</strong></p>
22
<ul><li>Выделите все ваши объекты.</li>
22
<ul><li>Выделите все ваши объекты.</li>
23
<li>В появившейся синей рамке нажмите на иконку , чтобы все объекты встали ровно.</li>
23
<li>В появившейся синей рамке нажмите на иконку , чтобы все объекты встали ровно.</li>
24
<li>Если вы захотите изменить отступ, наведите курсор на вертикальный или горизонтальный промежуток между объектами, зажмите правую кнопку мыши и тяните.</li>
24
<li>Если вы захотите изменить отступ, наведите курсор на вертикальный или горизонтальный промежуток между объектами, зажмите правую кнопку мыши и тяните.</li>
25
<li>Чтобы поменять объекты местами, зажмите правой кнопкой мыши розовую точку в центре объекта и тащите его в то место, где он должен стоять.</li>
25
<li>Чтобы поменять объекты местами, зажмите правой кнопкой мыши розовую точку в центре объекта и тащите его в то место, где он должен стоять.</li>
26
</ul>Изображение: Skillbox Media<p>Если вы занимаетесь интерфейсом технически сложного приложения, скорее всего, вам понадобится прогресс-бар. В Figma есть множество способов его нарисовать, но самый простой - с помощью текста!</p>
26
</ul>Изображение: Skillbox Media<p>Если вы занимаетесь интерфейсом технически сложного приложения, скорее всего, вам понадобится прогресс-бар. В Figma есть множество способов его нарисовать, но самый простой - с помощью текста!</p>
27
<p><strong>Как создать горизонтальный прогресс-бар из текста</strong></p>
27
<p><strong>Как создать горизонтальный прогресс-бар из текста</strong></p>
28
<ul><li>Создайте узкий и длинный фрейм.</li>
28
<ul><li>Создайте узкий и длинный фрейм.</li>
29
<li>Добавьте в этот фрейм текстовый блок и напишите в нём текст.</li>
29
<li>Добавьте в этот фрейм текстовый блок и напишите в нём текст.</li>
30
<li>На панели слоёв нажмите на текстовый блок и в выпадающем меню выберите Frame section.</li>
30
<li>На панели слоёв нажмите на текстовый блок и в выпадающем меню выберите Frame section.</li>
31
<li>На панели инструментов нажмите на плюс напротив слов Auto Layout и измените высоту фрейма с текстом так, чтобы она совпадала с высотой основного фрейма.</li>
31
<li>На панели инструментов нажмите на плюс напротив слов Auto Layout и измените высоту фрейма с текстом так, чтобы она совпадала с высотой основного фрейма.</li>
32
<li>У текстового модуля укажите контрастный фон, а непрозрачность текста - 0%.</li>
32
<li>У текстового модуля укажите контрастный фон, а непрозрачность текста - 0%.</li>
33
<li>Сместите фрейм с текстом так, чтобы он полностью заполнил правую часть основного фрейма.</li>
33
<li>Сместите фрейм с текстом так, чтобы он полностью заполнил правую часть основного фрейма.</li>
34
<li>По желанию углы обоих фреймов можно скруглить.</li>
34
<li>По желанию углы обоих фреймов можно скруглить.</li>
35
</ul><p>Теперь у вас есть регулируемый прогресс-бар. Чтобы изменить длину полосы загрузки, просто добавляйте в него текст:</p>
35
</ul><p>Теперь у вас есть регулируемый прогресс-бар. Чтобы изменить длину полосы загрузки, просто добавляйте в него текст:</p>
36
Изображение: Skillbox Media<p>Если вместо горизонтального прогресс-бара вам нужен круглый, его сделать так же легко.</p>
36
Изображение: Skillbox Media<p>Если вместо горизонтального прогресс-бара вам нужен круглый, его сделать так же легко.</p>
37
<ul><li>Создайте на макете круг, залейте его белым цветом.</li>
37
<ul><li>Создайте на макете круг, залейте его белым цветом.</li>
38
<li>Скопируйте ваш круг и залейте его другим цветом - например, синим.</li>
38
<li>Скопируйте ваш круг и залейте его другим цветом - например, синим.</li>
39
<li>Наведите курсор на круг, и тогда увидите на его контуре точку - зажмите её правой кнопкой мыши и тяните курсор вверх.</li>
39
<li>Наведите курсор на круг, и тогда увидите на его контуре точку - зажмите её правой кнопкой мыши и тяните курсор вверх.</li>
40
<li>На получившейся фигуре зажмите правой кнопкой мыши точку в центре и тяните курсор влево или вправо.</li>
40
<li>На получившейся фигуре зажмите правой кнопкой мыши точку в центре и тяните курсор влево или вправо.</li>
41
<li>По желанию добавьте скругления, чтобы концы получившегося прогресс-бара не были квадратными.</li>
41
<li>По желанию добавьте скругления, чтобы концы получившегося прогресс-бара не были квадратными.</li>
42
</ul><p>Готово - получился круглый прогресс-бар. Чтобы изменить его длину, наведите курсор на фигуру, зажмите правой кнопкой мыши один из концов фигуры и тяните.</p>
42
</ul><p>Готово - получился круглый прогресс-бар. Чтобы изменить его длину, наведите курсор на фигуру, зажмите правой кнопкой мыши один из концов фигуры и тяните.</p>
43
Изображение: Skillbox Media<p>В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например - сферы и связки, похожие на кляксы.</p>
43
Изображение: Skillbox Media<p>В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например - сферы и связки, похожие на кляксы.</p>
44
<p><strong>Как сделать кляксу</strong></p>
44
<p><strong>Как сделать кляксу</strong></p>
45
<ul><li>Создайте два круга и небольшой прямоугольник. Поместите их на макет так, чтобы они были похожи на условную гантель.</li>
45
<ul><li>Создайте два круга и небольшой прямоугольник. Поместите их на макет так, чтобы они были похожи на условную гантель.</li>
46
<li>Выделите все фигуры и вверху нажмите на .</li>
46
<li>Выделите все фигуры и вверху нажмите на .</li>
47
<li>Выделите получившуюся фигуру и задайте у неё скругление.</li>
47
<li>Выделите получившуюся фигуру и задайте у неё скругление.</li>
48
</ul><p>Теперь вы можете двигать фигуры как угодно и они будут похожи на кляксы:</p>
48
</ul><p>Теперь вы можете двигать фигуры как угодно и они будут похожи на кляксы:</p>
49
Изображение: Skillbox Media<p><a>Самоучитель по Figma</a></p>
49
Изображение: Skillbox Media<p><a>Самоучитель по Figma</a></p>
50
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
50
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
51
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>
51
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>