Графический редактор FIGMA

Figma — графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов.
Она появилась в 2016 году как аналог Sketch и Adobe XD, но спустя пару лет стала одним из самых популярных инструментов у дизайнеров.

Облачное хранение файлов
Фреймы
Компоненты
Многопользовательский режим редактирования
Условная бесплатность

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

Удобный инструмент внутри Figma, который похож на артборды в Photoshop. По сути, фрейм — это отдельное полотно, внутри которого дизайнеры могут проектировать экраны приложений.
Чтобы вам не приходилось каждый раз выверять высоту и ширину фреймов, разработчики предусмотрели несколько стандартных размеров под разные устройства: все виды iPhone и самые популярные смартфоны с Android.

Компоненты
Эти элементы позволят вам стандартизировать абсолютно всё, что есть у вас в макете. С помощью компонентов можно задать общий стиль макета и в случае необходимости изменить его.
Например, вы закончили разработку 50 макетов, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. В Photoshop на эту задачу придётся потратить целый день, а в Figma, благодаря компонентам, — всего пару секунд.

Многопользовательский режим редактирования
До Figma нескольким дизайнерам сложно было работать над одним проектом и передавать макеты разработчикам. Локальные файлы передавать друг другу неудобно, а тот же Photoshop может отказаться открывать макет без нужных шрифтов.
В Figma всех этих проблем нет, так как все файлы находятся в облаке и команда может одновременно изменять в нём всё что угодно.
Чтобы открыть доступ к документу в Figma, достаточно просто сделать команду — для этого зайдите на главную страницу в Figma и нажмите Create Team.

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

Условная бесплатность
Figma можно пользоваться бесплатно, но с ограничениями для командной работы:
Ваши личные файлы можете редактировать только вы. При этом личных файлов может быть сколько угодно.
Для командной работы доступны только три файла и один проект.
История версий хранится 30 дней.

Как добавить изображение на макет
Перетащите изображение на макет с рабочего стола или из папки:

Скопируйте изображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V:

Также можно копировать изображения из интернета: нажмите правой кнопкой мыши на любую иллюстрацию в браузере, выберите «Копировать изображение», затем перейдите в Figma и нажмите Ctrl (⌘) + V:

Функцией Place Image можно автоматически поставить изображение сразу туда, где оно должно находиться:
Создайте несколько произвольных фреймов на макете.
Нажмите на иконку , выберите пункт File и нажмите на Place Image. Или зажмите клавиши Ctrl (⌘) + Shift + K.
В появившемся меню выберите любые изображения.
По очереди добавьте изображения на фреймы. На курсоре отображается миниатюра текущей иллюстрации.

С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:
Выберите ваш фрейм или фигуру.
На панели инструментов в блоке Fill нажмите на цвет и в появившемся меню в верхнем правом углу вместо Solid выберите Image.
В том же меню нажмите на чёрно-белую картинку и выберите любое изображение на компьютере.

Аналогично можно использовать изображение как заливку обводки. Только вместо блока Fill нужно заходить в блок Stroke.

Настройки изображения
В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.
Свойства заливки:
Fill — изображение полностью заполняет собой доступное пространство, в котором находится.

Fit — изображение заполняет пространство так, чтобы его было видно целиком.

Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.

Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.

Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится — для этого лучше идти в Photoshop.

Настройки цветокоррекции в Figma:
Exposure — экспозиция.
Contrast — контраст.
Saturation — насыщенность.
Temperature — температура.
Tint — оттенок.
Highlights — интенсивность света.
Shadows — интенсивность тени.

Маска слоя
С помощью маски слоя можно придать изображению нестандартную для Figma форму:
Создайте любую фигуру, выберите изображение на макете и расположите их друг на друге. Проследите, чтобы на панели слоёв изображение было выше фигуры.
Зажав Ctrl (⌘), выделите фигуру и изображение, затем на панели инструментов нажмите на иконку .
Чтобы изменить отображаемую часть изображения, просто выделите её на панели слоёв и измените размер на холсте.

Таким же образом изображением можно заполнить что угодно: от нескольких фигур до текста.

Полезные приёмы
Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.

Скопировать SVG-иконку с любого сайта в Figma можно через браузер:
Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите «Посмотреть код». Справа откроется панель с HTML-кодом сайта.
В окне с кодом на панели сверху нажмите на иконку и выберите нужную иконку на сайте.
В HTML-коде выделится тег , прямо над ним будет
Зайдите в Figma и нажмите Ctrl (⌘) + V — иконка встанет на макет.

Быстро вырезать объект поможет плагин Remove BG, который автоматически удаляет фон.
Как установить плагин Remove BG:
Зайдите на страницу плагина и установите его, нажав Install.
Зарегистрируйтесь на сайте remove.bg.
На сайте нажмите на иконку профиля и зайдите в панель управления. В панели нажмите на «Ключ API», затем ― на кнопку «Показать» и скопируйте полученный код.
Зайдите в Figma, нажмите на иконку , перейдите, затем в Remove BG, нажмите на Set API key. В появившееся окно вставьте ключ, который вы взяли с сайта, и нажмите OK.
Добавьте на макет любую иллюстрацию, нажмите на неё правой кнопкой мыши, перейдите в Plugins → Remove BG → Run. Фон из иллюстрации удалится.

Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.

Часто Figma ассоциируется только с проектированием интерфейсов. Однако в ней можно рисовать полноценные иллюстрации и векторные иконки.

Для начала нарисуйте простой квадрат:
1. На панели инструментов нажмите на иконку и кликните в любую часть макета.
2. Кликните ещё раз в любую другую часть макета, и у вас появится линия.
3. Таким же образом сделайте ещё три линии, чтобы у вас получился квадрат. Последняя линия должна соединиться с первой. Чтобы линии получились ровными, делайте их с зажатой клавишей Shift.

Cоздав первую точку, вы вошли в режим векторного редактора, и панель инструментов изменилась:

Добавьте на квадрат дополнительные точки, чтобы получился многоугольник:
1. На панели инструментов нажмите на иконку , наведите курсор на одну из линий — посередине вы увидите точку.
2. Зажмите эту точку правой кнопкой мыши и тяните её от центра фигуры.
3. Повторите то же самое с остальными сторонами фигуры.

Сгладьте углы получившегося прямоугольника:
1. На панели инструментов нажмите на иконку и дважды кликните на любую из точек фигуры.
2. Зажмите любой из краёв появившихся линий — их называют усами. Тяните ус в сторону изгиба угла, чтобы он не пересекал линию дуги. Иначе ваша линия может получиться «мятой».

3. Повторите то же самое с остальными точками. Если получившееся скругление вам не нравится, нажмите правой кнопкой мыши на нужную вам точку.

Как и у стандартных фигур в Figma, у вектора можно изменить цвет заливки и параметры обводки:

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

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

Основа мяча
1. Создайте круг и растяните его по длине и высоте мяча, чтобы получился овал.
2. В режиме векторного редактора подгоните форму овала под мяч, чтобы они были похожи.

https://youtu.be/TU67jX_JHsE

Поперечный шов
1. Создайте круг и растяните его по основному шву, который пересекает его.
2. В режиме векторного редактора подгоните форму овала под шов.
3. Удалите фон, добавьте на вектор обводку и перенесите его на овал в форме мяча.

Дополнительный шов
1. Создайте квадрат и подгоните его размеры под форму дополнительного шва.
2. Удалите у фигуры фон, добавьте обводку и скруглите углы . В качестве эталона для скругления возьмите угол шва, который виден лучше всего. В нашем референсе — это левый нижний.
3. В режиме векторного редактора располагайте точки фигуры по направлению шва, а усами регулируйте скругление так, чтобы вектор повторял форму шва.
4. Этот шов не сплошной, а строчной. Укажите в настройках обводки пунктирный стиль. Чтобы это сделать, в блоке Stroke на панели инструментов нажмите и в появившемся меню в пункте Stroke Style укажите стиль Dash. Отрегулируйте настройки Dash (количество точек) и Gap (шаг), чтобы пунктир примерно напоминал шов настоящего мяча.

Блик
1. Скопируйте основной овал, выделите его и укажите цвет заливки: белый.
2. Поместите белый овал на мяч и подгоните его под размер блика — он будет примерно на треть меньше основного овала.
3. Поместите блик на мяч. Скорее всего, он будет великоват, поэтому уменьшите его и подправьте ломаные углы с помощью усов.

Левая белая полоска
Чтобы её сделать, воспользуйтесь хитростью с наложением слоёв:
1. Создайте круг и с помощью одной из его сторон повторите внешний левый край полоски.
2. Создайте ещё один круг и с его помощью повторите внутренний правый край полоски. Важно, чтобы этот круг в палитре слоёв находился ниже предыдущего.
3. В режиме векторного редактора подправьте оба круга, чтобы они точно повторяли изгибы полоски. Для удобства укажите непрозрачность кругов на 50%, чтобы видеть и сами фигуры, и контуры мяча.
4. Выделите обе фигуры, нажмите на панели инструментов на иконку и в выпадающем списке выберите . В результате видимой останется только та часть, в которой ваши круги не пересекаются, — она и образует белую полосу.

5. Сделайте копию основной формы мяча и подложите её под полоску. Если она выходит за края фигуры, выделите и полоску, и форму мяча, затем на панели инструментов нажмите на иконку и в выпадающем списке выберите . В результате останется видимой только та часть, где ваши круги пересекаются.

6. Поместите получившуюся фигуру на мяч. Если она залезает на шов, его можно немного уменьшить.

Правая белая полоса
Правую полосу можно сделать так же, как и левую, либо нарисовать её самостоятельно с помощью инструмента :

Белый шов
1. Белый шов повторяет форму основного. Возьмите поперечный шов, с зажатой клавишей Ctrl (⌘) выделите все точки снизу и удалите их. У вас должна получиться короткая линия длиной с поперечный шов.
2. Поместите линию на референс и, если нужно, сделайте её длиннее или короче в режиме векторного редактора.
3. Поместите вектор на нижний край шва и с помощью пера обведите и остальной контур шва.
4. С помощью пера повторите контуры всех стежков.

В результате у вас получится примерно такой мяч:

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

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

Как включить сетку
Модульную сетку можно включить только у фрейма. Если ваш макет свёрстан в группе, её можно быстро превратить в фрейм:
Выделите свою группу на панели слоёв.
Нажмите на неё правой кнопкой мыши и выберите Frame Selection или нажмите Alt + Ctrl (⌘) + G на клавиатуре. Теперь на макет можно наложить модульную сетку.
Чтобы включить сетку, выделите фрейм и на панели настроек нажмите на плюсик в блоке Layout Grid.

Форматы сеток
Grid — простая пиксельная сетка в клетку. По умолчанию Figma включает именно её с шагом в десять пикселей:

Columns — колонки. Делит макет вертикально:

Rows — строки. Делит макет горизонтально:

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

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

Свойства
Каждую сетку можно отдельно настроить:
Color — цвет и непрозрачность сетки. По умолчанию Figma делает её красной, но, если этот цвет недостаточно контрастирует с макетом, его можно изменить.

Size — размер пиксельной сетки. Работает только в формате Grid.

Count — количество колонок или строк.

Gutter — отступы между колонками или строками.

Margin — отступ от сетки до края фрейма.

Type — тип сетки. Можно настроить только у Columns и Rows:
Stretch ― сетка будет автоматически подстраиваться под ширину фрейма. Этот тип используют чаще всего, так как работать с ним проще.
Center ― сетка выравнивается по центру. С этим свойством у сетки активируется параметр Width (ширина).
Left и Right ― сетка выравнивается по левому или правому краю. Активируется параметр Width (ширина) и Offset (смещение относительно края).

Стиль из сетки
Из сетки можно сделать шаблон стиля и использовать в других макетах. Это поможет выдержать единообразие всех страниц сайта или экранов приложений:
Создайте сетку под ваш макет — настройте шаг в пиксельной сетке, укажите количество колонок и отступы между ними.
Нажмите на иконку , а в появившемся меню — на плюс. Назовите свою сетку и нажмите Save.
Чтобы использовать стиль, выберите любой фрейм, нажмите на иконку и в появившемся меню выберите свою сетку.

Направляющие
Они помогут выровнять макет, если вам не хочется создавать для него модульную сетку. Как пользоваться направляющими:
Нажмите на иконку , перейдите в пункт View и нажмите Rulers.
Чтобы добавить направляющую, поставьте курсор над появившейся линейкой слева или сверху, зажмите правую кнопку и тяните её туда, где она должна встать.
Чтобы поменять положение линейки, поставьте курсор над ней, зажмите правую кнопку мыши и тяните её туда, где она должна встать.

У направляющих есть интересная особенность — если они оказались внутри фрейма, то за его границы они выходить не будут. Это помогает держать макет опрятным и понятным:

Базовых эффектов в Figma всего два — тени и размытие.

Иллюстрация: Meery Mary для Skillbox Media

Тени
Drop Shadow — внешняя тень, подходит для отделения объекта от фона. Inner Shadow — внутренняя, подходит для создания объёмных объектов:

Чтобы добавить тень, в разделе Effects нажмите на плюсик. По умолчанию Figma добавит обычную тень, но если нажать на надпись Drop Shadow, в выпадающем меню его можно изменить на Inner Shadow.
Базовые настройки у теней одинаковые, но работают они немного по-разному:
Blur — размытие краёв тени.
Spread — размер тени.
X и Y — смещение относительно центра объекта. X — влево и вправо, а Y — вверх и вниз.
Также у тени можно настроить её цвет и непрозрачность.
Смещение и размер у внешней тени могут быть какими угодно, так как явных границ у неё нет. У внутренней тени те же параметры ограничены самим объектом.

Также у тени можно изменить цвет и режим наложения. Работает это как в Photoshop — в зависимости от режима и цвета тень будет подстраиваться под фон:

Размытие
В Figma есть два вида размытия: Layer blur и Background blur. Настроить у них можно только уровень размытия, но работает он в этих режимах по-разному.
Чтобы добавить размытие, в разделе Effects нажмите на плюсик. Затем нажмите на надпись Drop Shadow и в выпадающем меню выберите Layer blur или Background blur.
Layer blur просто размывает слой целиком в зависимости от выбранного значения в настройках .

Background blur работает немного хитрее. Если просто указать у него уровень размытия, то ничего не произойдёт. Но если в пункте Fill снизить непрозрачность заливки, то фон под слоем с Background blur будет размыт:

Не путайте непрозрачность слоя (Layer) и заливки (Fill). Если вы снизите непрозрачность слоя, то эффект Background blur работать не будет.

Сочетание эффектов
В разделе Effects можно добавить сколько угодно разных эффектов: например, несколько теней и несколько размытий. Благодаря этому можно добиться интересных результатов. Для примера рассмотрим, как сделать эффект матового стекла.
Добавьте на макет фотографию и поверх неё наложите любую фигуру: круг, квадрат, треугольник.
В настройках эффектов фигуры добавьте тень со следующими настройками: X и Y — 12, Blur — 25, Spread — 2, непрозрачность тени — 25%.
В настройках эффектов фигуры добавьте Background blur с размытием 25.
Снизьте непрозрачность заливки фигуры до 10%.
По желанию можно добавить обводку с непрозрачностью 50%.
Если делать тень чёрной, а цвет фигуры белым, то эффект получится недостаточно реалистичным. Лучше использовать основной цвет фона, чтобы сымитировать падающий на ваше стекло свет.

Подробнее о том, как можно сочетать разные эффекты в Figma, читайте в нашей инструкции по морфизмам в интерфейсах:
Морфизмы в дизайне: какие бывают, зачем нужны и как их создавать

Выбор шрифтов и базовые настройки
Шрифты отображаются на панели инструментов справа в блоке Text. В нём есть несколько полей, которые помогут вам с настройками типографики:
Сам шрифт — отображается как его полное название. По умолчанию Figma предлагает пользователю использовать Roboto, но вы можете выбрать любой из доступных.
Начертание — находится под названием шрифта. Количество начертаний и их названия зависят от разработчика шрифта, но обычно это light, regular и bold.
Кегль, или размер шрифта, — находится напротив начертания.
Разрядка | | — расстояние между буквами.
Интерлиньяж — расстояние между строками.
Абзацный отступ .
Выравнивание.Горизонтальное — по центру , по левому или правому флагу . Вертикальное — вверх , вниз или по центру .

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

Если нажать на иконку , вы откроете дополнительные настройки шрифта. В них вы можете добавить зачёркивание, линию под текстом, капитель и настроить список.

Шрифты в Figma можно применять к одному или нескольким текстовым объектам, отдельным словам или буквам:
Чтобы применить шрифт сразу к нескольким текстовым блокам, выделите их на холсте и настройте — выбранные блоки сразу изменятся.
Чтобы применить шрифт к конкретной фразе, просто выделите её внутри текстового блока и настройте так, как вам нужно.

Использование локальных шрифтов
По умолчанию в Figma доступны все шрифты из бесплатной библиотеки Google Fonts. Если вам их недостаточно, в редактор можно добавить и локальные шрифты.
В приложении для Windows и macOS локальные шрифты становятся доступны сразу после установки их на компьютер. Если вы используете Figma в браузере, то для этого отдельно нужно установить Figma Font Helper с официального сайта.
Чтобы проверить, сработал ли Figma Font Helper, зайдите в настройки аккаунта и прокрутите их до блока Fonts. Если Figma Font Helper установлен, вы увидите примерно такую надпись:

Управление отсутствующими шрифтами
Если коллега отправил вам файл без необходимых шрифтов, Figma предупредит об этом вот таким уведомлением:

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

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

Умное копирование в Figma: зачем нужно и как пользоваться
Новые функции графического редактора, которые помогут сэкономить время.

Вставка с заменой
Что, если вам нужно заменить 20 серых «заглушек» на одинаковые модули? Копипастить 20 раз — долго и нудно. Поэтому разработчики Figma добавили функцию вставки с заменой, которая меняет выбранные объекты на скопированный.
Как пользоваться вставкой с заменой
Скопируйте любой объект на макете.
Выделите объекты на макете, которые хотите заменить на скопированный.
Нажмите сочетание клавиш Ctrl (⌘) + Shift + V.

Множественная вставка
В любом мобильном приложении есть кнопка меню, которая должна быть практически на всех макетах. 15 раз копировать одно и то же — долго. Но чтобы сэкономить время, воспользуйтесь функцией множественной вставки.
Как пользоваться множественной вставкой
Скопируйте любой объект на макете.
Выделите несколько фреймов и нажмите Ctrl (⌘) + V, чтобы вставить объект в каждый из выделенных фреймов.

Скопировать характеристики
В Figma доступна функция копирования свойств. Она очень полезна — например, при вёрстке карточек в приложении: вы сможете применить одинаковые тени, обводку и цвет фона сразу ко всем выделенным объектам.
Как копировать характеристики
Чтобы скопировать характеристики, выделите «эталонный» объект и нажмите Ctrl (⌘) + Alt (⌥) + C.
Чтобы вставить характеристики, выделите любой объект и нажмите Ctrl (⌘) + Alt (⌥) + V.

Скопировать точно под курсор
Обычно при вставке скопированного объекта Figma сама выбирает, где именно он должен оказаться. Если вы хотите держать этот процесс под личным контролем, пользуйтесь функцией вставки точно под курсор.
Скопируйте нужный объект, нажмите правой кнопкой мыши в любом месте макета и выберите Paste Here — копия объекта окажется точно под вашим курсором

Кстати, если выбрать Copy as SVG, то в буфер обмена попадёт готовый код SVG-изображения, который можно использовать в HTML.

Скопировать как PNG
В любой момент вам может понадобиться скопировать макет в Photoshop или отправить его в чат арт-директору. Через обычный экспорт делать это долго. Чтобы не тратить время на лишние действия, пользуйтесь функцией «Скопировать как…».
Выделите нужный объект, нажмите на него правой кнопкой мыши, в выпадающем меню перейдите в Copy/Paste as и выберите Copy as PNG.

Список использованных источников:

Как работать с изображениями в Figma https://skillbox.ru/media/design/figma-images/

Как рисовать векторные изображения в Figma https://skillbox.ru/media/design/figma-vector/

Как работать с модульной сеткой в Figma https://skillbox.ru/media/design/kak-rabotat-s-modulnoy-setkoy-v-figma/

Что такое Figma: возможности и принципы работы https://skillbox.ru/media/design/chto_takoe_figma/

Тени и размытие в Figma: как настроить https://skillbox.ru/media/design/figma-effects-basics/

Шрифты в Figma: как настроить и использовать https://skillbox.ru/media/design/shrifty_v_figma_osobennosti_primenenie_i_vybor/