Работа с Figma. Часть 1.I.
Нужно зарегистрироваться в Figma.Откроется поле
“Recents” - проекты, которые вы когда либо посещали/редактировали/просматривали.
Draft - это твои проекты.
Скопировать высылаемый проект:
- Открыть проект по ссылке, которую прислали.
- Найти наверху название проекта.
- Кликнуть на стрелочку у названия, которая смотрит вниз.
- Из выпадающего списка выбрать “Дублировать”.
После того, как проект скопирован -
доступ есть только у вас.Основные моменты работы с Figma.Если картинки у проекта не чётки, то нужно подождать, пока проект прогружается. Возможно, у вас недостаточно сильный по сигналу Интернет.
Меню сверху.
- Back to Files - возвратиться к странице с проектами.
- Стрелка помогает захватывать и перемещать нужные нам изображения.
- Решетка. В выпадающем списке 2 функции:
а) Frame - это размер окна, которое откроется как первый лист для работы.Форматы есть для телефонов, для компьютеров, стандартные форматы листов (A3, A2, A4 и др.)
б) Slice (скорее всего не понадобится).
- Квадрат - рисует прямоугольники.
- Перо - рисует “узкие” фигуры, с углами.
- Карандаш - рисует округлые фигуры, закругляет рисуемые линии.
- Т - можно написать текст. Чтобы можно было начать писать в открывшемся окне - нужно кликнуть 2 раза. Чтобы вернуться к возможности перемещения - кликнуть 1 раз на любом месте.
- Рука - это не нужная вещь. Она дает возможность перемещаться по проекту.
- Иконка сообщения - добавление комментариев поверх проекта.
Работа с Frame - окнами и меню Design:
- Когда открыт Frame, можно:
- Дать возможность выходить накладываемому поверх изображению - справа сверху в меню “Design” есть показатель “Clip content”. Нужно кликнуть по окошку рядом и добавить синюю галочку.
- Не давать возможность выходить накладываемому поверх изображению. Найти “Clip content”, кликнуть по окошку рядом и убрать синюю галочку.
II. Изменение размера, скругления возможно с помощью меню Design, категория Frame, показатели X, Y, W, H, угол, полукруг.
III. Выставление сетки.Чтобы выставить сетку на проект, нужно зайти в меню Design, категория Layout grid, нажать на +, далее на квадратик из точек. Сверху из появившегося окна необходимо выбрать формат: “Grid” (квадрат), “Columns” (колонки), “Rows” (строки).
Ниже есть значения:
- Count (количество, значение до 12).
- Color (цвет).
- Type (тип: top, bottom center, stretch).
- Height (высота относительно листа).
- Gutter (ширина относительно листа)
- Offset.
IV. Layer (прозрачность).Выражается в процентах. 100% - нет прозрачности, 0% - полностью прозрачен.
V. Fill (заливка).При нажатии на цвет, сверху есть варианты заливки: Radial, Solid, Linear, Angular, Diamond, Image.
VI. Stroke (рамка).Чтобы увеличить ширину рамки и, например, сделать её жирнее, нужно около полос изменить цифру на большее значение.
VII. Selection frame (цвета, которые использовались внутри frame).VIII. Effects (эффекты):- Inner shadow (внутренняя тень);
- Drop shadow (тень);
- Layer blur (размытие);
- Background blur (внешнее размытие).
IX. Text (всё, что связано с редактированием текста-размер, шрифт, подчеркивание). Дополнительные опцие можно открыть, нажав на три точки справа.
X. Картинки. Как их заменить?
- Нажать на выбранную картинку на панеле.
- В правом меню Design, откроется категория Fill.
- Нужно нажать на появившееся строку с изображением.
- Откроется окно с картинкой и надписью “Choose image”.
- Выбрать файл, сохраненный на компьютере.
Картинки. Как уместить изображение?- В окне Fill нажать на строку с изображением.
- Сверху в этом же окне выбрать не “Fill”, а “Fit”, тогда изображение помещается без изменения размера.
- Если нужно обрезать изображение, то выбираем не “Fill”, а “Crop”.
Вернуться шаг назад - нажать на быстрые клавиши “ctrl+z”.
Если появились вопросы, писать в тг: @laura_instagram