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

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

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

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

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

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

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

И смотрите, как значения 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). Получим такое окно (если поверх этого окна будут другие, то закрывайте их с помощью крестика в правом верхнем углу ненужного окна).