Введение в Figma

Что такое Фигма

Figma — это очень крутая программа для создания веб-дизайна. В ней можно работать прямо из браузера!

Почему все так её любят:

• бесплатная (есть платная версия, но на старте достаточного бесплатной);
• работает даже в браузере;
• можно работать в команде (в реальном времени);

Фотошоп, XD, Sketch... все в прошлом.

Шаг 0. Регистрация

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

1. Открой сайт https://www.figma.com
2. Нажмите кнопку Get started for free
3. Можно войти через Google или через почту и пароль
4. Затем подтверди почту — и ты в игре!

Шаг 1. Создаём первый файл

После входа ты попадёшь в домашний экран (1) — где будут храниться все твои будущие файлы. Пока пусто, но скоро это изменится.

1. Жми “Design” (2) (Создать новый дизайн-файл) — это и будет твой первый настоящий файл.
2. Он откроется в новой вкладке. Перед тобой — серое пространство и скорее всего ничего не понятно.
3. Так давай разбираться. Пустое пространство — это рабочий холст, на котором мы будем творить.

Шаг 2. Интерфейс Figma

1. Слева — панель слоёв: Тут будет отображаться всё, что ты добавляешь на экран. У тебя, пока что пусто, но скоро заполнишь.

2. Справа — свойства выбранного объекта: Цвета, размеры, скругления, отступы, вся красота.

3. Снизу — инструменты:

• Move tools — инструменты перемещения
• Frame (Фрейм/рамка) — отдельный холст
• Фигуры (прямоугольник, круг и т.д.)
• Pen и Pencil — Ручка и карандаш для рисования
• Text — текст
• Comment — комментарии
• Actions — быстрый доступ к элементам и плагинам
• Режимы рисования, дизайна и разработки

Шаг 3. Добавляем фрейм

Фрейм (Frame) — это как страница в тетради. На ней ты рисуешь.

1. Выбор фрейма. Нажми на иконку рамки или клавишу F. Справа появятся готовые размеры: Phone (смартфон), Desktop (компьютер, ноутбук), Tablet (планшет), Presentation (слайды для презентаций), Social media (социальные сети) и несколько других.

Выбери, например, Desktop > Desktop (1440×1024). И, ура!, твой первый фрейм (холст) появится на экране!

2. Настройки фрейма. Можно передвигать его, увеличивать, переименовать. Это и будет твоё первое рабочее пространство.

Шаг 4. Добавь фигуру

Выбери в нижнем меню или нажми "R" на клавиатуре — и. нарисуй прямоугольник. Можно тянуть его, менять размер, цвет, скругление углов. Это пока просто баловство — но ты уже начинаешь понимать, как всё устроено.

Нарисуйте разные фигуры. Всё просто. Главное — не бойся экспериментировать. Тут невозможно ничего «сломать».

Шаг 5. Сохраняем и закрываем

Figma сохраняет всё автоматически. Просто закрой вкладку, нажав на крестик около названия файла сверху — и файл останется у тебя в облаке. Главное убедись, что подключен к интернету!

При следующем открытии Фигмы ты увидишь свой прошлый файл на главном экране и сможешь открыть (кликнув) для продолжения работы в нём.

А ещё можно (спойлер: нужно!) создавать обложки для своих файлов!

Советы от наставника:

Ничего страшного, если что-то не понятно — Figma огромная, и ты ещё всё успеешь изучить. Пробуй. Крути. Кликакай. Смотри, что будет.

Не переживай за красоту. Сейчас твоя цель — освоиться. Скоро здесь будут полноценные макеты. А пока — просто обживайся.

• Хочешь ускорить освоение — нажми Shift + ? в любой момент, и увидишь все горячие клавиши.

Задание:

1. Зарегистрируйся в Figma – Бесплатно.
2. Создай новый design file
3. Добавь один фрейм (например, Desktop)
4. "Поиграйся" внутри простыми фигурами: прямоугольник, текст, круг, звезда, линFigmaии
5. Научись переименовывать фреймы. Например в "Урок 2"

Это важно! Потому что дальше все задания ты будешь выполнять в Figma.