Как сделать визитку в Figma

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

1. Изменить название проекта

   Лучше сразу переименовать файл, чтобы потом не запутаться в проектах. Стандартное имя новых файлов в Figma — Untitled (то есть «Без названия»). Поменять его можно, кликнув на слово Untitled в верхнем черном меню.
   
   

2. Выбрать инструмент Rectangle

   Нужно задать прямоугольную форму визитки с помощью инструмента Shape tools (Формы). В левом верхнем углу найдите иконку, которая выглядит как квадрат. В выпадающем меню будет несколько форм, но нам нужен Rectangle (Прямоугольник).
   
   Еще можно использовать горячие клавиши, они подписаны в меню напротив каждого элемента. У прямоугольника горячая клавиша «R» (потому что это первая буква в слове Rectangle).
   
   

3. Задать форму визитки

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

4. Скорректировать размер визитки

   Стандартный размер визитки — 90 х 50 см или 1063 х 590 пикселей, поэтому нужно подогнать нашу фигуру под эти параметры. Размер объекта в Figma можно изменить, если потянуть за угол или за одну из сторон фигуры. Также параметры можно изменить в панели инструментов справа и вручную ввести высоту и ширину визитки — 1063 х 590 пикселей.
   
   

5. Выбрать цвет фона

   Цвет фигуры тоже меняется в правой панели настроек — во вкладке Fill (Заполнение). Для первой визитки давайте выберем классическое сочетание белого фона и черного текста:
   
   

6. Добавить текст

   Имя, должность и другую текстовую информацию мы добавим с помощью инструмента Text (Текст) в верхней панели инструментов. Также для выбора этого инструмента можно нажать горячую клавишу «T», которую легко запомнить по первой букве в слове «Text».
   
   Внутри прямоугольника создаем фрейм для текста. В нем появится курсор, и можно будет набирать слова на клавиатуре или просто вставлять данные с помощью Ctrl + V. В меню справа появятся настройки блока Text, в которых можно выбрать шрифт, начертание (обычное, жирное или курсив) и кегль, то есть размер букв.
   
   

7. Выровнять текст

   С помощью инструмента Text добавляем на визитку все нужные данные:
   — название компании;
   — должность;
   — номер телефона;
   — адрес электронной почты;
   — профиль в Telegram.
   
   Figma подскажет, как выровнять все элементы между собой и сохранить пропорции. Размер интервалов обозначается красными стрелками.
   
   

8. Логотип

   Картинки в Figma добавляются несколькими способами, и все они простые:
   — перетащить изображение из папки на компьютере в рабочую область;
   — скопировать изображение из папки и вставить и с помощью Ctrl + V;
   — скопировать картинку прямо из браузера и вставить с помощью Ctrl + V.
   
   Менять размер изображения можно так же, как размер фигур, — растягивать его курсором или задавать параметры в настройках справа.
   
   

9. Добавить иконки

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

10. Экспорт

    Готовую визитку сохраняем через настройки справа. В разделе Export нужно выбрать формат:
    
    — PNG;
    — JPG;
    — SVG;
    — PDF.
    
    Потом нажимаем на кнопку Export <Название файла>, и визитка сохранится на компьютере в выбранном формате.