Привіт!

Інструкція по роботі
з Figma
Верхня панель навігації

V - Move - переміщення об’єктів

Клікаєте на об’єкт і можна переміщувати

його по робочій області
K - Scale - масштабування об’єктів

Тягнучи за край об’єкта, його можно

пропорційно масштабувати
**Обережно масштабування може призвести до
сотих у розмірах елементів - затискайте додатково
ALt (option)
Верхня панель навігації

F - Frame - контейнер - за його допомогою

ми створюємо основу для макету/сторінки
екрану комп’ютера або смартфона

**У фрейми огортаємо всі векторні зображення та

іконки, щоб не було десятих у розмірах

Shift+S - Section - об’єднання декількох

Slice - S - виділення будь-якої області /
елементів на робочій поверхні у секцію -
прямокутною для експорту у форматі
зручно при великих проектах, коли
картинки png / альтернатива скріншоту
працюють декілька дизанерів
**залишається в шарах і виглядає як пунктир,
потрібно видаляти після завершення
Верхня панель навігації

R - Rectangle - прямокутник - фігура за

допомогої якої ми малюємо всі елементи

L - Line - лінія - створення ліній прямих

будь-якої довжини та товщини

Shift+L - Arrow - стрілка - створення стрілок

прямих будь-якої довжини та товщини

O - Ellipse - коло - створення кіл будь-якого

розміру та окружності - пропорційних та

сплюснутих

Polygon - трикутник/многокутник
Ctrl+Shift+K - додати фото/картинку на

Star - зірка робочу поверхню

Верхня панель навігації
P - Pen - перо - інструмент для створення
кривих та об’єднання їх у фігурирізних
форм

Shift+P - Pencil - олівець - інструмент для

створення не рівних лінії

T - Text - текст - інтрумент для додавання

текту
Верхня панель навігації

Resourses - Shift+I - вкладка для ресурсів -

компонентів, плагінів, віджетів

Plugins - плагіни - допоміжні інструменти

для покращення і прискорення роботи у
Фігма

**в пошуку можна знходити по ключевим словам

потрібні плагіни - набори іконок, картинок,
градієнтів, вирізати фон у фото, додавати анімацію і
т.д

***більше про плагіни можна дізнатися через пошук у

Google
Верхня панель навігації
Hand Tool- H - “рука” переміщення по
макету - хапаєте будь-яке місце на макеті
та перетаскуєт поле огляду

*переміщатися по макету можна затиснувши колесо

миші або затиснувши пробіл та ліву клавішу миші

Add comment - C - інструмент для

додавання коментарів на спільний та
чужий проект
 Розгорнуті
налаштування масштабу
Верхня правий кут
Поділитися
посиланням на макет Наблизити
Віддалити
Масштаб
всього фрейму
Масштаб 50 %
Масштаб Масштаб 100%
робочої панелі Масштаб 200 %
Роздатність
Піксельна сітка пікселів
Прив’зка до
піксельної сітки
Ваша іконка Запуск режиму Показати/сховати
колонки сітки
перегляду Показати/
сховати лінійку Показати/сховати
режим ліній/
Показати/сховати курсори контурів
інших учасників на макеті Показати/сховати
Переключення в коментарі
режим розробника
Панель шарів
Frame - на панелі шарів автоматично
підписаний як Frame і позначається знаком #
**Якщо елемент всередині фрейму, то від поміщається
нижче назви і трохи правіше ,якщо поза межами, то
лежить в шарах або вище або нижче на одній осі

Rectangle - на на панелі шарів автоматично

підписаний як Rectangle і позначається
знаком квадрату

Text - на панелі шарів автоматично

підписаний як Text і позначається буквою Т
**Всі назви у панелі шарів можна міняти, щоб простіше
орієнтуватися у макеті - просто тапнути на них 2 рази
Панель шарів
Vector - всі елементи створенні за
допомогою P (Pencil Tool) позначаються як
вектор. Іллюстрація може збирати багато
векторних елементів
**Всі векторні іллюстрації варто обгортати у Фрейм

Group - група елементів - можна об’єднати

будь-які 2 та більше елементів у групу за
допомогою Ctrl+G (Cmd+G) та розгрупувати
за допомогою Ctrl+Shift+G (Cmd+Shift+G)

позначається пунктирним квадратом

**Всі групи можна згортати та розгортати в шарах -
наискаючи стрілочку зліва від назви групи
Панель налаштувань Центрування - за допомогою цієї панелі
можна центрувати еементи відносно одне
одного та відносно Фрейму - по середині/
Design - перша вкладка панелі по верхній грані/по нижній грані/по правій
грані/по лівій грані/ рівномірно між ним
налаштувань, де є всі
індивідуальні налаштування під Розташування/розміри - Х та Y
кожен елемент дизайну відповідають за розташування елементу на
макеті або всередині групи чи фрейму;

W - це ширина об’єтку H - це висота об’єкту

Прозорість шару - Замочок з права дозволяє закріпити зміни

зміна прозорості відносно одна одної при масштабуванні

обраного об’єкту Кут - це градус нахилу елементу

Заокруглення кутів елементів - можна

Fill заливка - зміна кольору змінити всі одразу ,або один з 4х

Stroke обводка - додавання

обводки елементу та налаштування
його розміру
Effects ефекти - додавання тіні/
підсвітки/розмиття елементам з
налаштуванням інтенсивності

Export завантаження -
налаштування формату завантаження
на комп’ютер в різних форматах та
розмірах
Панель налаштувань
Prototype - друга вкладка
панелі налаштувань, де є всі
налаштування для створення
прототипування/лінкування/
анімації - переходу між
екранами та елементами
Flow starting point - початкова точка
анімації; їх може бути багато, якщо
анімація починається з різниї екранів
Interactions - саме налаштування
анімації - щоб розгорнути подробиці
треба тапнути на блакитну лінію
з’єднання 2 елементів анімації
 На обраному об’єкті
Права клавіша Копіювати елемент

миші Вставити замість

На вільному місці макету
Вставити тут ,де курсор миші
Сховати/показати панелі
Сховати/показати коментарі
Активувати чат
Пошук по макету
Список плагінів
Список віждетів
елемента, який обрано
Вставити в те місце де
стоїть курсор миші
Копіювати/вставити
як...
Перемістити на сторінку
(якщо у файлі декілька сторінок)
Перемістити в шарах поверх
всіх
Опустити в шарах нижче всіх
Згрупувати
Обгорнути у фрейм
(іллюстрацію)
Перевести у криві (текст)
Перевести у обводку (текст)
Створити маску
Створити автолояут
Свторити компонент
Перелік плагінів
Перелік віджетів
Показати/сховати елемент
поставити/прибрати замочок/
блок на елементі
Повернути горизонтально
Повернути вертикально