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