Figma с нуля. Введение и Интерфейс
Figma с нуля. Введение и Интерфейс
Добро пожаловать на курс по Figma с нуля. Это первая часть, где мы разберёмся, что такое Figma и как здесь всё устроено.
Представление
Привет. Меня зовут Карибаев Ислам, а это Байгараев Биболсын мы студенты КУ им Ш.Уалиханова образовательной программы Информационные системы, группа иск-231 уск. Мы подготовили для вас простой курс из 3 частей, после которого вы сможете сами собирать интерфейсы и собирать кликабельный прототип.
Зачем нужна Figma
Figma это инструмент для создания интерфейсов. Сайты, мобильные приложения, прототипы, презентации, графические элементы.
Главная особенность: все работает прямо в браузере. Проект сохраняется автоматически. Можно работать в команде, одновременно. Это как Google Docs, только для дизайна.
Регистрация в Figma
Чтобы начать, заходим на figma.com. Нажимаем Sign up. Можно войти через Google. Это самый быстрый вариант. Выбираем бесплатный тариф Starter. Для обучения его полностью хватает. Переходим в главный экран. Это ваш рабочий стол.
Создание первого файла
Создаем наш первый проект. Нажимаем New Design File. Появляется чистое пространство. Здесь рождается дизайн будущего. Слева пустой список слоёв, в центре канвас, справа панель настроек.
Интерфейс подробно
Слева панель Layers. Это структура проекта. Каждый объект находится на своём слое. Тут можно группировать, прятать, блокировать.
Показать кнопки глаз и замка.
Ниже вкладка Assets. Позже здесь появятся ваши компоненты. По центру канвас. Белое пространство. Можно перемещаться зажав колесико мыши или Space для режима руки. Справа панель Properties. Здесь всё управление выбранным объектом. Верхняя панель инструментов. С неё начинается создание дизайна.
Скроллом приближаемся и отдаляемся. Если потерял объект, используем Shift + 2, чтобы сфокусироваться на выбранном.
Первое действие на холсте
Сделаем наш первый элемент. Нажимаем Rectangle или клавиша R. Рисуем прямоугольник. В правой панели меняем цвет, радиусы скругления, добавляем контур. Нажимаем T и пишем текст. Мини-совет титром: Alt для копии объекта
Любой элемент можно передвигать стрелками или мышью. В Layers слой с текстом находится над прямоугольником, поэтому текст виден. Чтобы привести порядок в проекте с самого начала, лучше сразу давать понятные названия слоям.
Группировка и дубликаты
Выделяем оба элемента и объединяем в группу. Ctrl + G. Теперь это единый объект. Зажимаем Alt и перетаскиваем, чтобы сделать копию. Это самый быстрый метод повторения.
Резюме и переход ко второй части
Отлично. Мы познакомились с интерфейсом и сделали наш первый простой элемент. В следующем видео мы уже начнем делать полноценные экраны, познакомимся с фреймами и компонентами. Не забывайте сохранять порядок в слоях. Поверьте, это спасёт вам много нервов в будущем.