Дизайн
#Руководства

Как упростить работу в Figma

Четыре совета в гифках, которые помогут ускорить работу над макетами.

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

1. Шаблонизируйте цвета и шрифты

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

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

  1. Выделите любой объект на макете.
  2. Перейдите в пункт Fill («Заливка») и нажмите на квадратную иконку из кружков.
  3. В появившемся меню нажмите на плюсик.
  4. Назовите стиль и сохраните.
  5. Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke — он находится под Fill.
Изображение: Skillbox

Со стилями текста принцип тот же, что и с цветами:

  1. Выделите любой текст на макете.
  2. Перейдите в пункт Text и нажмите на квадратную иконку из кружков.
  3. В появившемся меню нажмите на плюсик.
  4. Назовите стиль и сохраните.
  5. Чтобы использовать стиль, в пункте Text нажмите на иконку из кружков и выберите нужный шаблон.
Изображение: Skillbox

Стиль в любой момент можно отредактировать:

  1. Выберите элемент, стиль которого нужно изменить.
  2. Наведите на него курсор и нажмите на иконку, похожую на эквалайзер, — откроется редактор цвета или шрифта.

После обновления стиля автоматически обновятся все элементы, где этот стиль используется:

Изображение: Skillbox

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

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

2. Используйте компоненты

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

Создайте компонент, выбрав любой фрейм и на верхней панели, затем нажмите на иконку с ромбиком:

Изображение: Skillbox

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

Изображение: Skillbox

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

Изображение: Skillbox

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

3. Пользуйтесь ограничителями

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

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

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

1. Создайте фрейм размером с iPhone 5 SE — 320×568 пикселей:

Изображение: Skillbox

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

Изображение: Skillbox

3. Укажите на панели Сonstraints выравнивание Left and right и Top:

Изображение: Skillbox

Готово — теперь шапка будет растягиваться за макетом, как бы вы ни меняли его размер:

Изображение: Skillbox

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

Изображение: Skillbox

Таким образом, вы сможете проверить, как выглядит сайт или приложение на любом экране, и заранее скорректировать то, что выглядит плохо.

4. Запомните горячие клавиши

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

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

  • Ctrl (⌘) + N — создать новый файл;
  • Ctrl (⌘) + W — закрыть файл;
  • Ctrl (⌘) + Alt + K — создать компонент;
  • Ctrl (⌘) + G — объединить объекты в группу;
  • Ctrl (⌘) + Alt + G — объединить объекты во фрейм;
  • I — пипетка для выбора цвета;
  • Минус (−) и плюс (+) — уменьшить и увеличить масштаб;
  • Ctrl (⌘) + B, I, U — сделать текст жирным, курсивным, подчёркнутым;
  • Alt + H — выровнять по центру по горизонтали;
  • Alt + V — выровнять по центру по вертикали.

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

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

Изображение: Skillbox

Самоучитель по Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Курс

Профессия Графический дизайнер

Вы узнаете, как создавать айдентику бренда в вебе и для печати. Научитесь работать в Illustrator, Photoshop, InDesign и Figma. Добавите в портфолио плакаты, логотипы, дизайн мерча и другие сильные проекты. Начнёте карьеру в студии или на фрилансе.

Узнать про курс

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать
Обучение: Профессия Графический дизайнер Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована