Figma – Основы работы. Автор никак не связан с компанией Figma

Андрей Викторович Литвиненко

В книге описаны основы работы в программе Figma. Figma создана для создания схем, различных рисунков, использующих стандартные геометрические фигуры, для дизайна, также прототипов (макетов) для сайтов. Так как работать можно в браузере через интернет, то не важно какая версия Windows у вас стоит и поэтому можно работать на довольно старых компьютерах и ноутбуках.

Основы работы. Часть 1

Теперь закроем браузер. Яндекс, Опера, Mozilla Firefox или Google Chrome. Вот в чём работали, то и закрываем. И заново открываем. Набираем https://figma.com и нажать «Enter» на клавиатуре (если вы пользуетесь печатной версией этой книги, то набирайте такой адрес https://figma.com). Получаем окно такого типа.

Ничего здесь не удаляем.

Выбираем Drafts (проекты в переводе) и нажимаем «+» возле строки. Открывается новый проект. Вот в этом проекте мы будем делать свои первые шаги в познании возможностей данного сервиса.

Выбираем строку по стрелке и нажимаем на неё левой кнопкой мыши

Некоторое время ждём и получаем вот такое окно.

Закрываем окно, нажав на крестик в правом верхнем углу (по стрелке указано).

Вот теперь в заголовке окна стоит слово «Drafts». Это основное окно, в котором мы будем всё делать.

Итак, вверху чёрная полоса со значками — это основное меню, которое позволяет добавлять элементы в проект. Элементами могут быть прямоугольники, стрелки, изображение и текст и так далее. Слева вертикальная колонка — здесь будут отображаться элементы списком, а по центру они будут нарисованы. Справа вертикальная колонка будет показывать свойства каждого элемента. Посередине — рабочая область, где всё будем делать.

Элемент «Frame»

Представляем, что центральная часть — это наш стол, на котором мы будем всё делать. Но вы же не будете рисовать на столе, вам нужен лист бумаги. Вот теперь на наш стол кладём лист бумаги. То есть добавляем Frame (в переводе — рамка). Горячая клавиша для выбора фрейма — <F>.

Теперь передвигаем мышку в центральное окно. Курсор будет в виде значка «+». Зажимаем левую кнопку мыши и тянем вправо и вниз. Рисуем фрейм. Вот так это будет выглядеть во время рисования. На размеры пока не обращаем внимания.

Отпускаем мышку — фрейм станет белого цвета. Вот это и есть наш лист бумаги, на котором мы будем всё рисовать.

Обратите внимание, что в левом столбце появилось слово «Frame 1», а в правом куча разных и пока непонятных слов и цифр на английском языке. Не пугайтесь. Начнём разбираться. В программе Фигма все размеры указаны в пикселях (pixel). Есть много онлайн-калькуляторов для перевода пикселей в сантиметры (миллиметры). Но когда я ими пользовался для подготовки формата А4 (стандартный лист бумаги 210х297 мм.), они выдавали неправильный размер после сохранения в любом из форматов.

Вот размер А4 равен 210х297 мм. Но при печати надо учитывать, что ещё есть поля, которые не попадают в печать. Поэтому мы выбираем размер 205х290 мм. В пикселях надо указать размер 581x822. Запоминаем (записываем) формат А4 581х822 px (205х290 мм.).

В правой части окна есть размеры нашего фрейма.

W — это ширина (width), а H — высота (height).

Вот нам надо ввести W=581 и H=822 для получения размера формата А4.

Как вы видите, размер нашего фрейма сильно увеличился и не влезает в окно. Надо изменить масштаб.

В программе будут часто использоваться клавиши <Ctrl>, <Alt>, <Shift> и <Пробел>. Если будет указано какое-то сочетание с этими клавишами, то это обозначает, что надо нажать и удерживать эту клавишу и с ней нажимать другой символ или использовать мышку. Например, отмена последнего действия выполняется через <Ctrl> + <Z>. Нажимаем и держим <Ctrl> и нажимаем <Z>, затем отпускаем <Z>, а затем отпускаем <Ctrl>.

Для этого используется клавиша «Ctrl» и колёсико на мышке. Ставим курсор на серое поле, зажимаем клавишу «Ctrl» и крутим колёсико мышки. Уменьшаем до размера, чтобы вместилось на весь экран.

Чтобы передвинуть объект, надо зажать клавишу пробел (курсор изменится на изображение ладони) и, нажав левую кнопку мыши, двигаем наш фрейм в нужно нам направлении.

Выставили фрейм примерно посередине так, чтобы его было видно весь.

Теперь показываем как можно выделить фрейм двумя способами.

Щёлкаем по пустому месту фрейма.

Или щёлкаем в левой колонке на заголовок фрейма.

Теперь начинаем смотреть на свойства фрейма в правом столбце. Рассказывать буду не обо всех свойствах, а только основные возможности.

Ориентация листа (фрейма) альбомная или портретная. Нажимайте по очереди кнопки, указанные стрелками.

И смотрите, как значения W и H меняются местами.

Теперь рассмотрим модуль «Fill» (в переводе — заполнение).

Нажимаем указанный пункт. Появится другое окно.

Сначала в нижней полосе выбираем цвет, а потом в большом квадрате выбираем оттенок цвета.

Сначала передвигаем точку, указанную красной стрелкой, а затем, указанную синей стрелкой. Закрываем окно с выбором цвета, щёлкнув на крестик.

Наш фрейм стал того цвета, который вы выбрали.

Следующий этап — рамка «Stroke». Одно из значений в переводе — обводка.

Нажимаем знак «+».

Если присмотреться, то видим, что у нашего фрейма появилась рамка. Стрелкой указан размер рамки. Если вы подведёте курсор именно на значок возле цифры, указанной по стрелке, то изображение курсора изменится на двойную стрелку, смотрящую в разные стороны, белого цвета. Зажимаем левую кнопку мыши и двигаем слегка вправо-влево и смотрим, как изменяется толщина рамки и цифры толщины. Делайте увеличение до 20 и больше и вы заметите, что рамка расширяется внутрь фрейма. Это обусловлено пунктом «Inside» справа от размеров рамки. Меняем размер на 1, просто заменив цифры. Выставляем вместо «Inside» пункт «Outside». Снова с помощью мышки изменяем размер примерно до 20 и выше и мы заметим, что рамка увеличивается снаружи от фрейма. Следующий этап — меняем «Outside» на «Center». C помощью мышки изменяем размер примерно до 20 и выше и мы заметим, что рамка увеличивается как снаружи, так и внутри фрейма. Размер рамки можно изменять и просто набрав цифры в соответствующем поле. Для того чтобы убрать рамку, надо нажать знак «-» (смотри на картинке).

Теперь начинаем разбирать пункт «Effects». Нажимаем знак «+».

Если присмотреться, то можно увидеть, что у рамки появилась еле видимая тень.

Нажимаем на значок солнышка возле слова «Drop shadow» (в переводе — отбросить тень).

Получим такое окно.

Меняем значения по стрелке на 10, чтобы визуально было лучше видно. Щёлкаем мышкой в поле и вводим значение с клавиатуры.

Теперь мы видим, как увеличился размер тени. Я специально не рассматриваю сейчас все функции и возможности каждого пункта свойств. Их будем изучать при рассмотрении других элементов. Нажимаем крестик на окне с заголовком «Drop shadow». Для того чтобы убрать такой эффект, надо нажать знак «-», как указан на скриншоте.

Тень исчезла. Пункт «Export» мы будем рассматривать, когда у нас появится больше элементов. Для дальнейшей работы уберём фон у нашего фрейма другим методом.

Щёлкаем в поле, указанное по стрелке.

Вводим значение «FFFFFF» и щёлкаем мышкой по серому полю. Цвет фрейма изменится на белый.

Ещё нам сразу надо переименовать наш проект.

Нажимаем «Untitled» и выбираем «Rename». Получим окно.

Вводим название «Основы работы» и получим вот такое окно.

Нажимаем по серому полю и получаем вот такое название.

Для проверки можно выполнить следующие действия. Закрываем браузер и снова запускаем. Вводим следующий адрес https://figma.com и нажать «Enter» на клавиатуре (если вы пользуетесь печатной версией этой книги, то набирайте такой адрес https://figma.com). Получим такое окно (если поверх этого окна будут другие, то закрывайте их с помощью крестика в правом верхнем углу ненужного окна).

Конец ознакомительного фрагмента.