Как зарегистрироваться в Figma и создать первый проект: пошаговый гайд

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

Для первого упражнения понадобятся компьютер, подключение к интернету и почта для регистрации. Платную подписку для создания простого учебного макета оформлять не нужно. У бесплатного плана есть ограничения для командной работы; сравнивать тарифы имеет смысл, когда появится такая задача.

Перед стартом придумайте небольшую задачу. Например: «Хочу собрать первый экран страницы консультации». С такой целью легче выбирать инструменты и не потеряться среди возможностей редактора.

Начнём с аккаунта:

1. Откройте официальный сайт Figma.
2. Нажмите Sign up — регистрацию.
3. Выберите Continue with Google, если хотите использовать Google-аккаунт. Другой вариант — электронная почта и отдельный пароль.
4. При регистрации через почту откройте письмо от Figma и подтвердите адрес.
5. Если сервис предложит вводные вопросы о вашей работе, укажите подходящие ответы.

Готово! После регистрации откроется файловый браузер — место, откуда вы будете переходить к своим макетам. Порядок регистрации через почту и Google описан в официальной инструкции.

Цвет кнопок и вводные экраны могут меняться. Ориентируйтесь на название действия: нам нужно создать аккаунт и перейти к файлам.

Теперь откроем место для будущего макета:

1. В файловом браузере перейдите в Drafts — черновики.
2. Нажмите + Create и выберите Design.
3. Дождитесь открытия редактора.
4. Переименуйте файл через его название: вместо Untitled укажите, например, «Мой первый лендинг».

Есть и короткий маршрут: после входа в аккаунт откройте figma.new. Это официальный адрес для создания файла Figma Design. Оба способа приведены в справке о новых файлах.

Перед вами появится большой холст. Здесь можно размещать разные варианты экранов и отдельные элементы.

Чтобы не путаться дальше, сразу давайте понятные названия. «Лендинг — консультация» через неделю найти проще, чем «Untitled 7».

Файл открыт, теперь зададим границы первого экрана.

Если совсем просто, представьте лист бумаги на большом столе. Стол — холст, а лист — фрейм, внутри которого вы собираете страницу.

Создать его можно так:

1. Нажмите F или выберите инструмент Frame на панели инструментов.
2. В правой панели раскройте категорию Desktop для компьютера или Phone для телефона.
3. Выберите подходящий пресет. Если нужного размера нет, нарисуйте фрейм мышью и задайте W — ширину и H — высоту в панели свойств.
4. Переименуйте фрейм, например, в «Главная — Desktop».

Способы создания и категории пресетов перечислены в справке о фреймах.

Для упражнения можно задать размер 1440 × 1024. Это удобная отправная точка для знакомства с редактором, а не обязательный размер каждого сайта. Под мобильный вариант создайте отдельный фрейм и продумайте расположение элементов на узком экране.

Поздравляем, основа есть! Переходим к содержимому.

Не будем сразу рисовать весь сайт. Для знакомства хватит заголовка, короткого пояснения и кнопки.

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

Добавляем заголовок и пояснение

Выберите инструмент Text клавишей T и нажмите внутри фрейма. Напишите: «Разберём вашу рекламу и найдём точки роста».

Ниже добавьте отдельный текстовый слой: «Обсудим цели, посмотрим настройки и подготовим план следующих действий». Начните с доступного в редакторе шрифта, чтобы не отвлекаться на установку дополнительных.

Рисуем кнопку

Выберите Rectangle на панели фигур или нажмите R. Нарисуйте прямоугольник и добавьте поверх него текст «Обсудить проект».

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

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

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

Часто спрашивают: обязательно ли скачивать Figma на компьютер? Для первого макета достаточно браузера. Дальше выбирайте по своему рабочему процессу.

Про шрифты. Figma font installer — отдельный вспомогательный компонент, а не плагин из Community. Для первого упражнения можно обойтись шрифтами, доступными в самом редакторе. Порядок подключения локальных шрифтов приведён в официальной справке.

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

Освойте несколько клавиш

Для начала запомните небольшой набор:

Если клавиша не включает инструмент, проверьте, не стоит ли курсор внутри текста. Сначала завершите редактирование, затем повторите действие.

Используйте Community с понятной задачей

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

У ресурсов бывают разные условия использования, есть бесплатные и платные варианты. Для доступного бесплатного файла команда Open in Figma позволяет добавить копию в черновики. Процесс описан в справке Community.

Следите за структурой

Называйте важные слои по смыслу: «Заголовок», «Описание», «Кнопка». Проверяйте, что они находятся внутри нужного фрейма. Это простая привычка, которая поможет и при самостоятельной работе, и при передаче макета коллеге.

Перед тем как переходить к следующему экрану, пройдитесь по списку:

• Файл имеет понятное название.
• Фрейм создан, его размеры соответствуют выбранному упражнению.
• Текст и фигуры находятся внутри нужного фрейма.
• Заголовок объясняет предложение без дополнительного рассказа.
• Кнопка называет понятное действие.
• После работы с нестабильным интернетом изменения синхронизировались.

Если всё на месте, первый этап пройден. Дальше можно изучать выравнивание, повторяющиеся элементы и Auto layout — постепенно, на задачах своего макета.