Как начать работать в программе фигма с нуля — инструкция для чайников

Как работать в программе или веб приложении фигмы

Фигма хороша для новичков тем, что её не обязательно скачивать и устанавливать на свой компьютер. Вы можете работать в веб приложении на сайте figma.com через обычный браузер, например Google Chrome. Всё что вам нужно — просто зарегистрироваться на этом сайте, и можно приступать!

Но кроме веб-приложения у фигмы есть и десктопная версия, то есть обычная программа, которую нужно установить на свой ПК. Бесплатно скачать установочный файл можно на официальном сайте на странице figma.com/downloads — просто выбирайте свою операционную систему и устанавливайте фигму на свой компьютер как любую другую программу.

Как работать в фигме с телефона

К сожалению, никак. У фигмы есть мобильное приложение Figma Mirror — его вы легко можете найти в Appstore или Google Play, но это приложение предназначено только для просмотра уже готовых файлов и прототипов. Так что для полноценной работы вам не обойтись без компьютера или ноутбука.

Инструкция по работе в фигме для начинающих с нуля

Для лучшего понимания материала я советую смотреть этот урок в видео-формате (в начале статьи). Там я показываю всё пошагово и более подробно.

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

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

Как работать с инструментами в фигме — фреймами, текстом, фигурами, пером

Первым делом вам нужно создать фрейм. Его можно сравнить с листом, на котором будет располагаться ваш дизайн. Если нажать на иконку фрейма или вызвать этот инструмент горячей клавишей F, справа появятся варианты размеров для разных устройств и форматов. Для примера возьмем формат MacBook Air — он хорошо подходит для дизайна сайтов.

Чтобы управлять масштабом (увеличивать или уменьшать его), просто зажмите Ctrl (на Windows) или Cmd (на Mac OS) и покрутите вверх-вниз колесиком мыши. Также масштаб можно задавать в процентах в правой верхней части, рядом с вкладками Design и Prototype.

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

Создать текст в фигме можно инструментом с иконкой Т (или такой же горячей клавишей). Каждый текстовый элемент стоит создавать отдельным слоем. Шрифт, его размер, жирность и другие параметры можно редактировать на панели Typography.

Для рисования фигур (прямоугольников, эллипсов, многоугольников, звезд) также есть специальные инструменты. С помощью них можно создавать фоны для блоков, кнопки, иконки и даже полноценные иллюстрации.

Вставить картинку или фотографию в фигме можно просто перетащив её на рабочее пространство или с помощью инструмента Image/Video, который находится в той же группе, где и фигуры. Для примера возьмем иллюстрацию с улыбающимся чайником 🙂

Инструмент перо (Pen tool) также очень полезен для дизайнера, так как он позволяет рисовать линии и фигуры произвольных форм. Этот инструмент обычно дается новичкам тяжело, поэтому советую посмотреть инструкцию по его применению в видео версии урока, которая находится в самом начале статьи.

Как сохранить свою работу в фигме

Сохранять рабочие файлы в фигме нет необходимости — они автоматически сохраняются в облаке, и вы сможете вернуться к их редактированию в любой момент (при наличии интернет-соединения).

Но если вы хотите сохранить копию в виде PNG, JPG, SVG или PDF-файла себе на компьютер, можно выделить фрейм и воспользоваться функцией Export в нижней части правой панели программы:

Дальнейшие инструкции по работе в программе фигма

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

Также приглашаем всех желающих пройти наш бесплатный курс по графическому и веб-дизайну в фигме для чайников — он отлично подходит новичкам, начинающим свое обучение с нуля. Для получения этого курса просто напишите слово “Обучение” мне в телеграм AgeenkoSchool и я вышлю ссылки на видеоуроки.