обзор самых востребованных
дизайн-профессий в 2024 году

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

Как сделать визитку в Figma
23 января, 2024
8 мин

Визитка — это подходящий проект для начала работы в Figma. При ее создании вы научитесь работать с простыми фигурами, поймете, как добавлять картинки в рабочую область и редактировать текст. Делимся инструкцией для новичков по созданию простой визитки.

Как запустить Figma

Начнем с того, что Figma даже не нужно устанавливать. Можно открыть веб-версию в браузере и работать в ней. В левом верхнем углу у вас будет три вкладки:

  • Recents (Недавние);
  • Drafts (Черновики);
  • Community (Сообщество).

Чтобы создать новый файл, нужно нажать на + Design file:

Создание нового файла в Figma
Создание нового файла

Инструкция: как сверстать визитку

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

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

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

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

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

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

    инструменты Figma верхний бар

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

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

    прямоугольник для визитки в Figma

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

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

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

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

    настройки Figma изменение цвета визитки

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

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

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

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

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

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

    интервалы и выравнивание в визитке в Figma

  8. Логотип

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

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

    добавление на визитку логотипа или изображения в Figma

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

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

  10. Экспорт

    Готовую визитку сохраняем через настройки справа. В разделе Export нужно выбрать формат:

    PNG;
    JPG;
    SVG;
    PDF.

    Потом нажимаем на кнопку Export <Название файла>, и визитка сохранится на компьютере в выбранном формате.

    экспорт изображений в Figma настройки форматов

Примеры интересной верстки визиток

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

кейс на Behance белые визитки на зеленом фоне
Источник
кейс на Behance черные визитки с голограммой
Источник
кейс на Behance зеленые визитки с растительным орнаментом
Источник

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте также

Подпишитесь сейчас на нашу рассылку

Мы присылаем отличные материалы и никогда не спамим. Отписаться можно в любой момент