Вступ. Векторний графічний редактор як інструмент для дизайну

3 квітня 2025
Клас

1. Інструктаж з безпеки життєдіяльності (БЖД) при роботі за комп’ютером

Перед початком роботи з Figma важливо дотримуватися правил безпеки при роботі за комп’ютером:

  • Сидіти прямо, спина повинна бути притиснута до спинки стільця.
  • Відстань до монітора має бути не менше 50 см.
  • Освітлення повинно бути достатнім, але не створювати відблисків на екрані.
  • Робити перерву кожні 20-30 хвилин для розминки та відпочинку очей.

2. Що таке векторна графіка?

Векторна графіка – це спосіб представлення зображень за допомогою математичних формул. Основні елементи:

  • Лінії та криві (контури), що визначають форму об’єктів.
  • Опорні точки та вузли, які змінюють форму об’єкта.
  • Заливка та обведення, що дозволяють змінювати зовнішній вигляд об’єкта.

Відмінності векторної та растрової графіки:

Векторна графікаРастрова графіка
Складається з ліній та кривихСкладається з пікселів
Масштабується без втрати якостіВтрачає якість при збільшенні
Використовується для логотипів, іконок, шрифтівВикористовується для фотографій

3. Огляд інтерфейсу Figma

Зображення
figma

Figma – це онлайн-інструмент для роботи з векторною графікою та дизайном. Основні компоненти інтерфейсу:

  • Toolbar (панель інструментів) – містить кнопки для малювання та редагування об’єктів.
Зображення
Toolbar
  • Layers (шари) – містить список всіх елементів у файлі.
Зображення
Layers
  • Inspector (панель властивостей) – дозволяє змінювати параметри обраного об’єкта.
Зображення
Inspector
  • Canvas (робоче поле) – місце, де створюються макети та зображення.
Зображення

4. Робота з файлами у Figma

Figma працює у хмарному середовищі, тому всі файли автоматично зберігаються. Основні можливості:

  • Створення нового проєкту – через кнопку "New File" на головній сторінці.
Зображення
new file
  • Збереження – файли зберігаються автоматично, але їх можна експортувати в різних форматах (PNG, SVG, PDF).
Зображення
export
  • Спільна робота – можна додавати учасників для редагування.
Зображення
Спільний доступ до проєкту

Завдання

Практичне завдання 1: Реєстрація у Figma та створення першого проєкту

  1. Перейдіть на сайт https://figma.com.
  2. Натисніть "Sign up" і зареєструйтеся за допомогою Google або електронної пошти.
  3. Увійдіть у систему та натисніть "New File" для створення нового проєкту.
  4. Ознайомтеся з інтерфейсом: знайдіть панелі "Toolbar", "Layers", "Inspector".

Практичне завдання 2: Створення простих фігур у Figma

  1. Відкрийте створений раніше файл.
  2. На панелі інструментів виберіть Rectangle (Прямокутник) та намалюйте його на робочому полі.
  3. Повторіть крок для Ellipse (Овал) та Line (Лінія).
  4. Використовуючи панель "Inspector", змініть:
    • Колір заливки
    • Товщину обведення
    • Прозорість
  5. Збережіть роботу та поділіться посиланням з вчителем.
Предмет