Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>11 апр 2025</li>

3 <li>0</li>

4 </ul>Показываем, как использовать самые важные фичи, которые сильно ускоряют проектирование макетов.

5 Иллюстрация: Катя Павловская для Skillbox

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

7 Figma - графический редактор, который помогает проектировать интерфейсы, сайты, макеты изданий. Рассказываем, как ускорить работу в нём с помощью стилей, компонентов, ограничителей и горячих клавиш.

8 Стили помогут быстро применять все используемые шрифты и цвета - и не вспоминать каждый раз, какого цвета у вас должны быть кнопки, какой шрифт и кегль у заголовков.

9 Как создать стиль цвета:

10 1.Выделите любой объект на макете.

11 2.Перейдите в пункт Fill ("Заливка") и нажмите на .

12 3.В появившемся меню нажмите на плюсик.

13 4.Назовите стиль, добавьте к нему описание и сохраните.

14 5.Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke - он находится под Fill.

15 6.Чтобы изменить стиль, нажмите на , выберите его в списке и в появившемся окне поменяйте цвет. Это же окно можно открыть, выделив несколько объектов и нажав на название цвета в блоке Selection Colors на правой панели.

16 Со шрифтами принцип тот же, что и с цветами:

17 1.Выделите любой текст на макете.

18 2. Перейдите в пункт Text и нажмите на .

19 3.В появившемся меню нажмите на плюсик.

20 4.Назовите стиль и сохраните.

21 5.Чтобы использовать стиль, в пункте Text нажмите на и выберите нужный шаблон.

22 6.Изменить стиль текста можно так же, как и стиль цвета.

23 Стили могут выручить на встрече с арт-директором или клиентом. Например, неподходящие цвета можно изменить в два клика без переделки всего макета.

24 По желанию вместо стилей можно использовать переменные. В плане изменения внешнего вида они не отличаются от стилей, но, если у вас есть <a>платная подписка</a>, вы сможете манипулировать ими при создании компонентов.

25 Называйте стили осмысленно, чтобы потом не запутаться в своей палитре. Например, название Blue-text может означать что угодно: цвет заголовков, текста внутри плашки или кнопки. А название Link-color звучит конкретнее - указывает на цвет ссылок.

26 Работая над интерфейсами или сайтами, дизайнеры часто используют стандартные элементы: кнопки, плашки, поля ввода, ссылки. Чтобы бесконечно не копировать одно и то же, создайте из стандартных элементов компоненты.

27 1.Выберите любой объект и на правой панели вверху нажмите . Выбранный объект превратится в компонент.

28 2.Вы можете скопировать его напрямую либо через панель слоёв и вкладку Assets.

29 3.Как и стили, компоненты можно изменить сразу во всём макете. Для этого выберите основной компонент и измените в нём что-нибудь - все копии компонента на макете изменятся в соответствии с оригиналом:

30 Если весь ваш макет будет состоять только из компонентов, вам будет сложно в нём что-то изменить. Поэтому на старте старайтесь их использовать только с кнопками, плашками, полями ввода, текстом - чтобы у вас была возможность в любой момент поэкспериментировать с вёрсткой и не бороться с ограничениями.

31 Сайты должны быть удобными на любом устройстве: на телефоне, планшете, ноутбуке и на компьютере с огромным монитором. Дизайнер учитывает каждый экран при проектировании интерфейса сайта или приложения.

32 Чтобы каждый раз не перевёрстывать весь макет под разные экраны, в Figma предусмотрены ограничители - Constraints. Они фиксируют элемент в определённой точке макета, и при изменении ширины или высоты макета он не меняет положения.

33 Соберём с помощью ограничителей шапку для сайта.

34 1.Создайте фрейм любого размера. Например, iPhone 5 SE.

35 2.Внутри этого фрейма создайте ещё один, растяните его на всю ширину экрана и поставьте в самом верху.

36 3.На правой панели нажмите на иконку . В появившемся меню укажите выравнивание Left and right и Top. Теперь шапка будет всегда находиться наверху фрейма и растягиваться вместе с ним.

37 В шапку можно добавить кнопки и ссылки. С помощью ограничителей вы сможете научить их также адаптироваться к любой ширине экрана.

38 Горячие клавиши - самый сильный буст продуктивности в любой программе. Гораздо быстрее нажать две кнопки, а не тянуться курсором в меню и выбирать то, что вам нужно.

39 Для начала запомните базовые горячие клавиши:

40 Ctrl (⌘)+N - создать новый файл.

41 Ctrl (⌘)+W - закрыть файл.

42 Ctrl (⌘)+Alt+K - создать компонент.

43 Ctrl (⌘)+G - объединить объекты в группу.

44 Ctrl (⌘)+Alt+G - объединить объекты во фрейм.

45 I - пипетка для выбора цвета.

46 Минус-и плюс+ - уменьшить и увеличить масштаб.

47 Ctrl (⌘)+B, I, U - сделать текст жирным, курсивным, подчёркнутым.

48 Alt+H - выровнять по центру по горизонтали.

49 Alt+V - выровнять по центру по вертикали.

50 Лучший способ запомнить все горячие клавиши - принципиально использовать только их. Если вы забыли какое-то из сочетаний, откройте меню, посмотрите хоткей и воспользуйтесь клавиатурой. Так вы быстрее выучите все сочетания, которыми пользуетесь очень часто.

51 Также у Figma есть справочник по горячим клавишам, который можно совсем не закрывать, пока вы их осваиваете. Чтобы его вызвать, нажмитеCtrl (⌘) + Shift + /:

52 Изображение: Skillbox Media<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>