Figma – сучасний інструмент для створення якісних методичних матеріалів. Від ідеї до реалізації

Практичні поради щодо виготовлення розробки та її елементів.

Розробка – незамінний помічник сучасного педагога. З її допомогою можна доступно пояснити складну тему, навчити легко запам’ятовувати інформацію та опановувати нові навички.

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

У вебінарі вебдизайнер проєкту «Всеосвіта» Андрій Вайнраух ознайомить учасників з ресурсами для пошуку безплатної графіки, надасть практичні поради щодо виготовлення розробки та її елементів.

Чим цікава Figma?

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

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

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

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

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

Як створити розробку у Figma?

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

Тож ми обираємо у меню зверху кнопку «Frame», створюємо лист А4 та розпочинаємо продумувати стиль проєкту й підбирати ілюстрації на безкоштовних фотостоках (наприклад, Icons8.com).

! Вводити певний текст у пошуковий рядок краще на таких сайтах саме англійською мовою.

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

Після цього можна почати вставляти у лист текст, який бажано підготувати заздалегідь.

Для цього обираємо інструмент «Текст», малюємо область, в якій хочемо бачити текст, та вставляємо його.

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

Справа у Figma розташовані налаштування тексту, тож саме там ви й зможете змінити шрифт, розмір, колір тощо.

Для того, аби розмістити текст по центру, варто скористатись панеллю центрування будь-яких об’єктів.

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

Якщо ви хочете перемістити одразу кілька об’єктів, то варто натиснути на один та завдяки клавіші Shift виділити усі інші.

Також зверху на панелі інструментів можна обрати будь-яку фігуру та урізноманітнити вашу розробку. Наприклад, додати рівні кружечки (затиснувши клавішу Shift) або стрілочки.

Як розділити свою розробку на кілька частин?

Якщо ви хочете розділити лист, наприклад, на 6 частин, то варто створити прямокутник, скопіювати його 5 разів та розташувати у полі. Після цього треба натиснути на перший прямокутник у панелі шарів та. завдяки утримуванню клавіші Shift, виділити всі створені прямокутники.

Далі слід перейти на панель справа та натиснути на іконку з оком у меню «Fill».

У такий спосіб ми приховаємо заливку. Після цього варто натиснути на кнопку «Stroke» внизу та додати обводку шарам (наприклад, розміру 0,5) та зробити її пунктирною, натиснувши на трикрапку.

Подібним способом можна розмістити текст у рамку. Для цього варто так само створити прямокутник, помістити його на текст, прибрати заливку та зробити обводку потрібного кольору.

Як створити написи на фоні?

Для того, аби створити певні написи на фоні можна, наприклад, скопіювати той самий напис та перенести цей шар вниз панелі шарів. Після цього змінити його прозорість у панелі «Layer» справа, наприклад, до 10%. У такий спосіб отримаємо ледь помітні написи на фоні.

Як користуватись масками?

Маски є незамінним помічником у графічних редакторах, і Figma також має цю функцію.

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

Для того, щоб дізнатись більше про Figma як сучасний інструмент для створення якісних методичних матеріалів переходьте за посиланням та дивіться вебінар Андрія Вайнрауха: