Figma – Основы работы. Автор никак не связан с компанией Figma. Андрей Викторович Литвиненко
Чтение книги онлайн.
Читать онлайн книгу Figma – Основы работы. Автор никак не связан с компанией Figma - Андрей Викторович Литвиненко страница 2
В правом нижнем углу в окне предлагаю пройти быстрый курс обучения по использованию Figma на английском языке. Нажимаем кнопку с отказом «No thanks». Получим окно программы.
Для обучения надо удалить окно. Для этого щёлкаем мышкой в левой части программы по названию Desktop-1 и нажимаем на клавиатуре клавишу «Delete» (или «Del»). Получим чистое окно.
Как вы видите в заголовке – Team project /Untitled. То есть командная работа. Нам нужна другая работа. Персональная. Для этого мы нажимаем в правый верхний угол на значок и в выпадающем списке выбираем этот пункт «Back to files».
Получим вот такое окно.
Нажимаем левой кнопкой мыши на строку «Drafts» в левой колонке.
Эти шаблоны не трогаем. Возможно, если вы будете позже использовать Фигму, они очень пригодятся для каких-либо работ.
Эти шаблоны не трогаем. Возможно, если вы будете позже использовать Фигму, они очень пригодятся для каких-либо работ.
Основы работы. Часть 1
Теперь закроем браузер. Яндекс, Опера, Mozilla Firefox или Google Chrome. Вот в чём работали, то и закрываем. И заново открываем. Набираем https://figma.com и нажать «Enter» на клавиатуре (если вы пользуетесь печатной версией этой книги, то набирайте такой адрес https://figma.com). Получаем окно такого типа.
Ничего здесь не удаляем.
Выбираем Drafts (проекты в переводе) и нажимаем «+» возле строки. Открывается новый проект. Вот в этом проекте мы будем делать свои первые шаги в познании возможностей данного сервиса.
Выбираем строку по стрелке и нажимаем на неё левой кнопкой мыши
Некоторое время ждём и получаем вот такое окно.
Закрываем окно, нажав на крестик в правом верхнем углу (по стрелке указано).
Вот теперь в заголовке окна стоит слово «Drafts». Это основное окно, в котором мы будем всё делать.
Итак, вверху чёрная полоса со значками – это основное меню, которое позволяет добавлять элементы в проект. Элементами могут быть прямоугольники, стрелки, изображение и текст и так далее. Слева вертикальная колонка – здесь будут отображаться элементы списком, а по центру они будут нарисованы. Справа вертикальная колонка будет показывать свойства каждого элемента. Посередине – рабочая область, где всё будем делать.
Элемент «Frame»
Представляем, что центральная часть – это наш стол, на котором мы будем всё делать. Но вы же не будете рисовать на столе, вам нужен лист бумаги. Вот теперь на наш стол кладём лист бумаги. То есть добавляем Frame (в переводе – рамка). Горячая клавиша для выбора фрейма – <F>.
Теперь передвигаем мышку в центральное окно. Курсор будет в виде значка «+». Зажимаем левую кнопку мыши и тянем вправо и вниз. Рисуем фрейм. Вот так это будет выглядеть во время рисования. На размеры пока не обращаем внимания.