НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ БІОРЕСУРСІВ ТА

ПРИРОДОКОРИСТУВАННЯ УКРАЇНИ
Кафедра комп’ютерних наук

ТЕХНІЧНА ДОКУМЕНТАЦІЯ.
Онлайн-додаток Figma.

Виконала:
студентка групи:_КН-23002б_
_____Яна ВДОВЕНКО_____
(власне ім’я, ПРІЗВИЩЕ)
Перевірив(ла):
_____Таїсія САЯПІНА_____
(власне ім’я, ПРІЗВИЩЕ)

КИЇВ 2024
Зміст
ЗМІСТ

Вступ.................................................................................................................................3
Розділ 1. Загальна характеристика................................................................................4
1.1 Призначення............................................................................................................4
1.2 Користувачі продукту............................................................................................6
1.3 Завдання, які вони прагнуть вирішити за допомогою продукту.......................6
1.4 Рівні користувачів і як відрізняється доступний для них функціонал..............7
Розділ 2. Функціональні можливості............................................................................7
Висновки........................................................................................................................13
Список використаних джерел......................................................................................14

2 734192779.docx Яна ВДОВЕНКО

Зміст
ВСТУП
Figma – це веб-додаток для дизайну інтерфейсів, який дозволяє створювати
макети, прототипи, іконки та багато іншого. Це один із найпопулярніших
інструментів в індустрії дизайну та розробки інтерфейсів.
Figma дозволяє дизайнерам працювати в реальному часі, обмінюватися
макетами та коментарями, спрощує процес спільної роботи та робить його більш
ефективним.
Однією з основних переваг Figma є те, що вона працює у браузері – немає
необхідності завантажувати та встановлювати програму на комп'ютер. Це зручно,
якщо потрібно працювати з різних пристроїв або співпрацювати з дизайнерами з
різних місць.
Крім того, Figma має багато корисних функцій, таких як можливість
створювати інтерактивні прототипи, редагувати векторні графіки,
використовувати бібліотеки та багато іншого. Ці функції роблять Figma
незамінним інструментом для дизайнерів та розробників інтерфейсів.
Figma допомагає дизайнерам створювати красиві та інтуїтивно зрозумілі
інтерфейси, а також полегшує їхню спільну роботу над проєктами. Якщо ви
працюєте в області дизайну інтерфейсів (UI/UX), то Figma – один із інструментів,
які вам слід вивчити.
Figma змінює спосіб, яким ми дивимося на процес дизайну інтерфейсів.
Завдяки його інноваційним можливостям, творчий процес стає більш динамічним
та доступним. Незалежно від того, чи ви працюєте самотужки або в команді,
Figma пропонує низку інструментів, які допоможуть вам реалізувати ваші ідеї.
Однією з ключових переваг Figma є його здатність працювати в реальному
часі. Це означає, що ви можете спільно працювати над проєктом з колегами,
бачити їхні зміни в макетах миттєво та швидко реагувати на них. Такий спільний
процес дозволяє уникнути зайвих затримок і покращує загальну продуктивність
команди.
Крім того, інтеграція Figma з різними іншими інструментами спрощує
роботу над проєктами. Ви можете легко імпортувати векторні графіки з програм
Adobe, таких як Illustrator або Photoshop, а також експортувати свої макети для
подальшої роботи в інших інструментах.
Завдяки можливості створення інтерактивних прототипів в Figma, ви
можете швидко перевіряти функціонал та взаємодію елементів інтерфейсу ще на
етапі дизайну. Це дозволяє вам уникнути помилок та забезпечити високу якість
кінцевого продукту.
У світі, де швидкість і ефективність грають важливу роль, Figma стає
незамінним інструментом для дизайнерів та розробників інтерфейсів. Вивчення
Figma відкриває безліч можливостей для творчості та спільної роботи, роблячи
процес дизайну інтерфейсів більш приємним та продуктивним.

3 734192779.docx Яна ВДОВЕНКО

Зміст
РОЗДІЛ 1. ЗАГАЛЬНА ХАРАКТЕРИСТИКА.

1.1 Призначення.

Figma - це інтерактивний веб-сервіс та додаток для дизайну, що надає

можливості створення і спільної роботи над макетами, прототипами та іншими
дизайн-ресурсами. Його призначення включає:
1. Макети веб-сайтів
Ви можете створювати макети для різних веб-сайтів за допомогою
інструментарію Figma.

Мал. 1.1. Макети веб-сайтів.

2. Макети мобільних додатків
Ви також можете створювати макети для мобільних додатків для iOS та
Android.

Мал. 1.2. Додатки.

4 734192779.docx Яна ВДОВЕНКО

Зміст
3. Дизайн іконок
Figma дозволяє створювати векторні іконки різних розмірів та форм, які
можна використовувати у вашому дизайні.
4. Прототипи
Figma дозволяє створювати інтерактивні прототипи, завдяки яким можна
переглядати та тестувати дизайн перед його реалізацією.
5. Дизайн інтерфейсів для настільних програм
Ви можете створювати дизайни для інтерфейсів настільних програм для
Windows, MacOS та Linux.
6. Створення банерів
У Figma ви можете створювати банери для використання на веб-сайтах та
соціальних мережах.
7. Дизайн логотипів
Прості та ефективні логотипи для вашого бренду чи компанії
8. Створення презентацій
Ви можете використовувати Figma для створення презентацій, які
допоможуть продемонструвати дизайн колегам або клієнтам.
9. Редагування фотографій
Хоча Figma не є програмою для редагування фотографій, ви можете
використовувати її для швидкої зміни розмірів та вирівнювання елементів у
ваших дизайнах.
10. Розробка UX/UI дизайну
Figma надає інструменти для створення красивого і зручного інтерфейсу
користувача, який легко розуміти і використовувати.

Мал. 1.3. UX/UI дизайну.

У онлайн-додатку Figma неможливо працювати без Інтернет-з'єднання; не

завжди коректно імпортує файли Sketch; не підтримує кольоровий простір A3, що
є ширшим діапазоном охвату за підтримуваний — sRGB.

5 734192779.docx Яна ВДОВЕНКО

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

1.2 Користувачі продукту.

Користувачі продукту Figma — це люди, які використовують онлайн-

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

1.3 Завдання, які вони прагнуть вирішити за допомогою продукту.

Користувачі Figma використовують цей продукт для вирішення різних

завдань у сфері дизайну та розробки програмного забезпечення. Деякі з основних
завдань, які вони прагнуть вирішити за допомогою Figma, включають:
1. Створення макетів інтерфейсу користувача (UI): Користувачі можуть
створювати макети для веб-сайтів, мобільних додатків, програмного забезпечення
та інших продуктів, щоб визначити розташування елементів і їх вигляд.
2. Прототипування інтерфейсів користувача (UI prototyping): Figma дозволяє
створювати інтерактивні прототипи, що допомагають випробувати
функціональність та взаємодію елементів інтерфейсу перед початком розробки.
3. Спільна робота над проектами (Collaborative design): Figma надає
можливість спільно працювати над проектами у реальному часі, що дозволяє
дизайнерам, розробникам і менеджерам продукту працювати разом над
створенням та вдосконаленням дизайну.
4. Рецензування та коментування (Review and feedback): Користувачі
можуть додавати коментарі, зауваження та відгуки безпосередньо до макетів та
прототипів, спрощуючи процес зворотного зв'язку.
5. Експорт готового дизайну (Exporting designs): Після завершення роботи
користувачі можуть експортувати готові дизайни у форматах, які підходять для
подальшої розробки або представлення.

6 734192779.docx Яна ВДОВЕНКО

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

1.4 Рівні користувачів і як відрізняється доступний для них функціонал.

Доступно в планах Організація та Підприємство

Будь-який член організації може опублікувати

приватний плагін для організації

Лише адміністратори організації можуть

публікувати публічні плагіни в профілі
організації.

Табл. 1.1. Рівні користувачів.

Організації часто мають внутрішні інструменти та системи з

конфіденційною інформацією чи даними, якими не можна поділитися за межами
організації.
Приватні плагіни дозволяють членам організації використовувати
спеціальні плагіни організації без необхідності ділитися ними з рештою
спільноти.

Будь-який член організації може

створити приватний плагін і поділитися
ним.

Лише адміністратори команди можуть

публікувати плагіни в профілі спільноти
команди.

Лише адміністратори організації

можуть ділитися плагінами публікації в
профілі спільноти організації.

7 734192779.docx Яна ВДОВЕНКО

Зміст
Табл. 1.2. Доступний функціонал.

8 734192779.docx Яна ВДОВЕНКО

Зміст
РОЗДІЛ 2. ФУНКЦІОНАЛЬНІ МОЖЛИВОСТІ.

Figma – це платформа, в якій є практично все необхідне для роботи з

графікою, векторними об'єктами, шрифтами, ефектами і т. д.
Коли ви вперше запускаєте Figma, інтерфейс може здатися вам трохи
заплутаним. Особливо якщо ви новачок у дизайні і раніше не використовували
такі програми. Однак, насправді, інтерфейс Figma є досить інтуїтивно-зрозумілим
і легким в освоєнні. Ось деякі основні елементи інтерфейсу, які вам знадобляться
для початку роботи з Figma:
1. Засоби малювання та елементи керування
Усі основні інструменти знаходяться у лівій панелі, включаючи пензлі,
прямокутники, кола, лінії, текстові поля тощо. Правіше знаходяться інструменти
для зміни властивостей об'єктів, таких як колір, розмір, прозорість, заливка та
межі.
2. Робочий простір
Після створення нового проєкту ви побачите робочий простір Figma. Тут ви
можете малювати, створювати форми, додавати зображення та багато іншого.
3. Панель шарів
Ліворуч від робочої області знаходиться панель шарів. Вона дозволяє
керувати кожним елементом вашого дизайну, а також упорядкувати їх,
створювати групи і т.д.
4. Панель властивостей
За умовчанням панель властивостей знаходиться праворуч від робочої
області. Вона містить додаткові параметри та властивості для вибраних елементів
на полотні, таких як розмір, колір, шрифт тощо.
5. Верхня панель інструментів
У верхній частині інтерфейсу знаходиться панель інструментів, де можна
змінювати налаштування полотна, відкривати налаштування проєкту, зберігати
проєкт і т.д.
Почніть із простих елементів та функцій, і поступово переходьте до більш
складних завдань. Не соромтеся використовувати ресурси та навчальні матеріали,
які можуть допомогти вам освоїти Figma швидше.
Ось лише основний список інструментів:
 Фрейми (Артборди) – є готові варіанти, але можна створювати власні
під конкретні завдання.
 Модульна сітка- для зручного упорядкування елементів дизайну в
фреймах.
 векторні форми – для відтворення різних елементів інтерфейсу.
 Криві – для створення кривих і простих векторних форм. Можна
додатково завантажити їх з Sketch або Adobe Illustrator.
 Зображення – для швидкого додавання графічних елементів в макет.
 Ефекти і маски – в тому числі з ефектами накладення, градієнтами і
можливістю зручно працювати з декількома шарами.

9 734192779.docx Яна ВДОВЕНКО

Зміст
 Текст – з підтримкою Google Fonts і інструментами підключення
додаткових за допомогою Font Installers (для десктопної версії).

Мал. 2.1. Сайт Figma.

І це лише мала частина інструментарію. Більш того, Figma – це ще й
найширші можливості для розширення базового функціоналу за допомогою
плагінів. наприклад:
 Grid for Tilda Publishing – швидко генерує сітку для Tilda Publishing.
 Unsplash – дозволяє всього в пару кліків імпортувати зображення з
однойменного сервісу.
 Iconify – відкриває доступ більш ніж до 40 тисячам векторних іконок
для будь-яких ваших проектів.
 Figmotion – дозволяє додавати прототипам різні анімації без
необхідності використовувати додаткові програми: Principle, Haiku або After
Effects.
 Blobs – зручний інструмент для відтворення векторних об'єктів.
Знову ж таки, це далеко не все. А з урахуванням популяризації Figma
кількість корисних плагінів буде тільки збільшуватися.

Ключові переваги Figma:

 доступ до макета прямо з вікна браузера (програму також можна
завантажити на комп'ютер);
 спільне редагування проєкту в режимі реального часу на кшталт
роботи у Google Doc;

10 734192779.docx Яна ВДОВЕНКО

Зміст
 можливість редагувати як векторні, так і растрові зображення;
 збереження повноцінної історії версій;
 комунікація з членами команди всередині платформи.
Як працювати з програмою:
Спершу необхідно зареєструватися за допомогою Google-акаунта (це
англомовний ресурс, але якщо ваша англійська недосконала, скористайтеся
Google Перекладач для автоматичного переклада змісту вебсторінок).
Базові вкладки допоможуть знайти необхідний проєкт, зробити
налаштування та організувати комунікацію у команді:
 вкладка профілю дозволяє робити зручні налаштування (змінювати
свої дані та сповіщення);
 Search допомагає швидко знайти потрібний проєкт;
 Recent відображає проєкти, які ви відкривали останнім часом;
 Community призначена для спілкування з членами команди та
встановлення допоміжних корисних додатків всередині програми.
Ключові інструменти Figma:
Спершу необхідно створити робочу область та додати в ній робочі елементи
для подальшого редагування.
1. Frame ー робоча область, в якій міститься проєкт. Може бути різних
форматів, у залежності від мети (для постів у соцмережах, для форматів книг,
телефонів, планшетів та інше). Розмір робочих областей можна коригувати і
вручну.
2. Layout Grid ー лінійка, що дозволяє розміщувати об'єкти на одному
рівні та чітко вимірювати відстань між ними (при одночасному натисканні клавіш
Ctrl+Z можна відмінювати останні зміни на крок назад на етапі роботи з будь-
якою частиною проєкту).
3. Rectangle ー ключові геометричні фігури, на основі яких створюються
елементи проєкту (надалі достатньо навести на фігуру курсивом і зліва
активується панель налаштувань). Цей інструмент також дозволяє додавати
світлини.

Мал. 2.2. Rectangle.

11 734192779.docx Яна ВДОВЕНКО

Зміст
4. Union Selection ー інструмент, що дозволяє створювати оригінальні
фігури на основі поєднання ключових геометричних фігур за обраним
принципом.
5. Теxt ー інструмент, що дозволяє працювати з текстом, редагуючи його
розмір, положення, колір і стиль шрифтів (для збереження загального стилю
текстів блоками використовуйте сполучення клавіш Alt+Shift).

Мал. 2.3. Теxt.

6. Панель Layers показує усі створені елементи у межах робочої області,
вони автоматично позначаються окремими шарами, кожен з яких можна
редагувати незалежно від інших.
Додавання плагінів:
Плагін ー додаток до програми, який автоматично розширює функціонал
платформи та надає нові можливості роботи з нею.
Перейдіть на головну сторінку Figma у вашому профілі та оберіть вкладку
Community, натисніть Plugins. Після цього проскрольте вниз, оберіть потрібний
та натисніть Install. Після цього функціонал обраного плагіна автоматично буде
доступний з вашого профілю.

Мал. 2.4. Plugins.

12 734192779.docx Яна ВДОВЕНКО

Зміст
Повернувшись до робочої зони проєкту, виділіть об'єкт та натисніть правою
кнопкою миші. У новому вікні оберіть графу Plugins та виберіть відповідний
встановлений вами плагін із загального списку.
Наприклад, обравши попередньо встановлений плагін Arc, налаштовуємо
розміщення тексту півколом.

Мал. 2.5. Розміщення тексту півколом.

Командна робота над спільним проєктом:
Під час роботи над проєктом ви можете надати доступ до перегляду вашої
роботи в реальному часі усім охочим, відправивши посилання. Для цього
потрібно натиснути на кнопку Share та зробити відповідні налаштування.

Мал. 2.6. Поширення.

Для спільної роботи над проєктом у безкоштовній версії Figma ви можете
запросити максимум 3 користувачів, відкривши у налаштуваннях їм доступ до
редагування.

13 734192779.docx Яна ВДОВЕНКО

Зміст
ВИСНОВОК
Figma є потужним інструментом для дизайну інтерфейсів, який перевершує
очікування своїми можливостями та функціоналом. Забезпечуючи безліч
корисних інструментів, від роботи в реальному часі до створення інтерактивних
прототипів, він стає невід'ємним помічником для кожного дизайнера та
розробника.
Його можливість працювати в реальному часі дозволяє спільно працювати
над проєктами, обмінюючись ідеями та надаючи миттєвий фідбек. Це забезпечує
не лише підвищену ефективність, а й сприяє колективній творчості.
Інтеграція з іншими інструментами робить Figma універсальним рішенням
для будь-якого проєкту. Ви можете легко імпортувати та експортувати дані з
програм Adobe та інших популярних інструментів, що спрощує процес роботи та
дозволяє максимально реалізувати ваш потенціал.
З Figma процес дизайну інтерфейсів стає не лише продуктивним, але й
захопливим. Він змінює уявлення про те, яким може бути творчий процес,
роблячи його більш динамічним, доступним та приємним. Почніть
використовувати Figma вже сьогодні та відкрийте для себе нові горизонти у
дизайні інтерфейсів!

14 734192779.docx Яна ВДОВЕНКО

Зміст
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Figma – базовий інструмент для роботи дизайнерів [Електронний ресурс]:
https://kiev.itstep.org/blog/figma-is-a-basic-tool-for-designers#2 ст. 4
2. Євген ОМЕЛЬЧУК. Academy by Wezom. Що таке Figma: функції, інструменти
та переваги [Електронний ресурс]: https://wezom.academy/ua/chto-takoe-figma-
funktsii-instrumenty-ipreimuschestva/ ст. 9
3. Figma Learn [Електронний ресурс]:
https://help.figma.com/hc/en-us/articles/4404228629655-Create-private-
organization-plugins ст. 6
4. Figma Developers [Електронний ресурс]:
https://www.figma.com/developers/plugins ст. 7

15 734192779.docx Яна ВДОВЕНКО