Курс Figma для SMM та маркетингу: Дизайн для соцмереж з нуля

Що ви зможете після курсу

• Впевнено працювати в Figma: фрейми, модульні сітки, фігури, фотографії, текст, криві Безьє та ефекти
• Перефарбовувати завантажені SVG-іконки під свою палітру та зберігати їх у векторі й растрі
• Верстати один макет одразу в кількох розмірах — від обкладинки до сторіс — на компонентах із Constraints
• Вирізати фотографії за контуром у наліпки без фону та збирати аватарку з портретом, що виступає за край кола
• Нарізати довгу композицію слайсами на нескінченну стрічку, карусель і постер із п’яти картинок
• Імітувати пластик, срібло, золото та неонове світіння градієнтами, тінями й відблисками

Кому підійде курс

Курс не вчить проєктуванню інтерфейсів застосунків, ретуші фотографій і справжньому 3D — тільки графіці для соцмереж.

Як проходить навчання

• Практика на кожному уроці — Інструменти освоюються на макеті поста, а не у відриві від завдання, — після уроку залишається готова робота
• Реальні формати соцмереж — Макети збираються одразу під пост, сторіс, обкладинку спільноти та постер — їх можна публікувати без переробки
• Безкоштовний редактор і безкоштовні сервіси — Купувати нічого не потрібно: Figma працює в браузері, шрифти та фотографії беруться з безкоштовних колекцій
• Автоматизація випуску контенту — Компоненти, Constraints і слайси роблять серію постів із однієї заготовки — нова публікація збирається заміною картинки та тексту
• Матеріальні ефекти без текстур — Метал, пластик і неон збираються градієнтами, тінями та відблисками, а кольори знімаються піпеткою з готових зразків

Що знадобиться

• Комп’ютер з доступом до інтернету: Figma працює в браузері, настільна програма встановлюється безкоштовно
• Обліковий запис Google для реєстрації
• Безкоштовні колекції Google Fonts та Unsplash і сервіси-помічники з уроків

Чому самостійно зазвичай не виходить

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

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

Що зміниться

Як влаштований шлях

1. Старт Реєстрація, встановлення та огляд інтерфейсу: нескінченне полотно, панелі, навігація та поєднання клавіш — робоче середовище готове
2. База інструментів Фрейми із сітками, фігури та фотографії, текст і шрифти, криві Безьє та градієнти — кожен інструмент відпрацьовується на макеті поста
3. Ефекти та експорт Тіні та розмиття, стилі заливок і змішування шарів; готовий пост зберігається в PNG, SVG або PDF зі змістовним ім’ям
4. Практика прийомів Іконки, шаблони на компонентах, наліпки, об’ємні аватарки, стрічка, карусель, постер, фактури металу та неон — прийоми для контенту соцмереж

Програма курсу

20 уроків · 2 модулі · 2 години 58 хвилин відео · Кожен урок — коротка практика з результатом: від першого входу в редактор до серії готових постів

• Робоче середовище та базові інструменти: від реєстрації до експорту поста 10 уроків

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

  • Коротке знайомство та вступ3:46

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

  • Реєстрація та встановлення4:55

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

  • Нескінченна робоча область1:17

    Урок про нескінченну робочу область Figma: що це за простір, що на ній розміщується та яку роль відіграють фрейми. Показана навігація — масштаб коліщатком миші з затиснутим Ctrl і панорамування пробілом, орієнтуватися допомагає лінійка вгорі екрана.

  • Панелі інструментів3:50

    Оглядовий урок про влаштування інтерфейсу: робоча область у центрі, панель шарів ліворуч, контекстне меню праворуч, верхня панель із меню та пошуком команд. Розбирається призначення інструментів — Move, Scale, Frame, фігури, вставлення картинок, криві, текст і коментарі.

  • Фрейми та сітка: як використовувати й налаштувати7:55

    Урок про фрейми — аркуші із заданими межами на робочій області: готові розміри під пристрої та соцмережі, переміщення, копіювання, задання розміру й кольору. Окремо розбираються модульна сітка та колонки, що задають розмітку для верстки макета.

  • Фігури та фотографії: як редагувати фото16:19

    Практика з фігурами та зображеннями: малювання шейпів, дублювання через Alt і Ctrl+D, вирівнювання та групування об’єктів. Показано кілька способів вставити фото — Place Image, перетягування з теки, копіювання зі стоку — і підбір кольору піпеткою з макета.

  • Текст і шрифт: основні можливості інструменту6:14

    Урок про текстовий інструмент: створення текстового блоку, вибір шрифту та накреслення, розмір, міжрядкові інтервали й розрідження. Також верхній регістр і оформлення літер — заливка через Fill, піпетка та обведення через Stroke.

  • Криві та змішування9:40

    Урок про малювання зігнутих векторних форм інструментом Pen: опорні точки, криві Безьє та редагування контуру. Розбираються градієнтні заливки, збереження заливки як стилю, прозорість шару та режими змішування Multiply і Screen.

  • Ефекти6:27

    Урок знайомить із чотирма ефектами Figma — зовнішньою та внутрішньою тінню, розмиттям шару й розмиттям тла. Показано налаштування параметрів тіні: ступінь розмиття, зміщення за осями X і Y, непрозорість; окремо — застосування Layer Blur і Background Blur.

  • Експорт і назви5:08

    Урок про збереження роботи з Figma: експорт окремих об’єктів і цілих фреймів, вибір масштабу та формату — PNG, JPEG, SVG, PDF. Розбираються осмислені назви файлів, пакетний експорт кількох фреймів і надсилання готових картинок у планувальник публікацій.

• Прийоми для контенту: іконки, шаблони, стрічки та ефекти 10 уроків

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

  • Перефарбовуємо іконки. Криві7:28

    Як перефарбувати завантажену векторну іконку: конвертація в SVG, розбір груп об’єкта та масова зміна кольорів через панель Selection Colors. Новий колір береться піпеткою або hex-кодом, готова іконка зберігається у векторі (SVG) і в растровій копії підвищеної роздільності (PNG).

  • Адаптуємо контент. Робимо макет одночасно в трьох розмірах!11:03

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

  • Аплікація у Figma7:48

    Фотографія перетворюється на аплікацію-наліпку: контур обводиться пером Pen, фото обрізається маскою через Use as Mask, об’єм додає ефект Drop Shadow. Перефарбування через температуру та відтінки дає різні наліпки з однієї заготовки. Результат зберігається в PNG без фону.

  • 3D-аватарка, що виходить за межі фото6:18

    Збірка круглої аватарки, на якій людина ніби виступає за край фото: портрет заздалегідь вирізається в сервісі видалення фону, під нього підкладається фото з еліпс-маскою, а плечі обрізаються інструментом Crop Image. Готова аватарка експортується в PNG, зокрема на прозорому фоні.

  • Тривимірний текст у картинці10:09

    Напис вписується всередину фотографії між планами: контур хребта та силует ялинок обводиться пером Pen і вмикається як маска, що приховує частину тексту. Об’єм додають темні еліпси, розмиті через Layer Blur. Підсумок — банер із написом, до якого додаються підзаголовок і логотип.

  • Нескінченна стрічка в Instagram18:09

    Стрічка Instagram збирається як єдина картина: великий фрейм із сіткою розмічається слайсами на дев’ять постів, а елементи на межах модулів пов’язують їх між собою. Картинки вставляються масово через Place Image, частина займає кілька модулів. Виділені слайси однією командою експортуються окремими файлами для публікації в заданому порядку.

  • Пост-карусель. Карусель з єдиною композицією на всіх картинках14:22

    Карусель для Instagram збирається на одному довгому фреймі з модульною сіткою Layout Grid і слайсами 1080×1080. Коло зі світінням, неонова стрілка й клякса ставляться на стиках кадрів: щоб роздивитися їх повністю, треба гортати далі. Фінальний кадр завершується закликом до дії, усі слайси експортуються в PNG.

  • Постер ВКонтакте10:52

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

  • Фактури. Пластик і метал19:40

    Пластик, срібло й золото імітуються без текстур — градієнтами заливки та обводки, тінню Drop Shadow і відблисками. Кольори знімаються піпеткою просто з готового креативу, а підібрані поєднання зберігаються як стилі. Результат — напис під срібло чи золото та прийом перенесення відчуття матеріалу у власний макет.

  • Неонові написи та елементи6:59

    Ефект неонової вивіски: майже біле ядро елемента та розмите кольорове гало навколо написів і фігур на темному фоні. Показано два способи світіння — дубль об’єкта з сильним розмиттям і Drop Shadow з нульовим зміщенням. Збережена комбінація ефектів застосовується до написів, серця та кола без заливки.

Часті запитання

Про цей курс

• Чи підійде курс, якщо я ніколи не працював із графічними редакторами?

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

• Figma платна?

  Редактор офіційний і безкоштовний: працює в браузері та як програма на комп’ютері, проєкти зберігаються в хмарі. Настільна версія потрібна, щоб використовувати системні шрифти.

• У яких форматах можна зберігати готові макети?

  Доступні PNG, JPEG, SVG і PDF; для графіки уроки радять PNG. Кілька фреймів експортуються за один раз окремими файлами або архівом.

• Для яких соцмереж збираються макети?

  Для Instagram — пости, сторіс, нескінченна стрічка та карусель; для ВКонтакте — постер із п’яти склеюваних картинок та обкладинки спільноти. Формати фреймів є готовими заготовками.

• Чи знадобляться платні сервіси?

  Ні: шрифти Google Fonts, фото Unsplash і Flaticon, конвертація CloudConvert і видалення фону Remove.bg використовуються в безкоштовних межах; про ліміти сервісу видалення фону сказано в уроці про аватарку.

• Чи можна перевикористовувати зроблені макети?

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

Доступ і матеріали

• Коли і як я отримаю доступ до курсу?

  Одразу після оплати, тієї ж секунди й автоматично. Чекати на підтвердження не потрібно. Доступ надходить двома шляхами водночас. Перший: на пошту, вказану при оформленні замовлення, приходить лист із посиланням на матеріали. Другий: те саме посилання з’являється у вашому акаунті на сайті, у розділі «Завантаження», і залишається там назавжди.

• Де зберігаються матеріали курсу?

  Усі відео та додаткові файли лежать у хмарному сховищі. Посилання на нього — у вашому акаунті на сайті, розділ «Завантаження», і в листі, який надійшов після оплати. Акаунт тут не формальність, а спосіб доставки: курс залишається в ньому назавжди. Навіть якщо лист загубився або ви згадали про купівлю через рік, посилання буде на місці.

• Чи можна завантажити матеріали, чи тільки дивитися онлайн?

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

• Як довго діє доступ?

  Безстроково. Курс залишається вашим назавжди, повертатися до нього можна скільки завгодно разів. Якщо через рік чи два посилання раптом перестане відкриватися з технічних причин — напишіть на info@siluette.com.ua, ми його відновимо.

• Лист із доступом не надійшов — що робити?

  Насамперед: доступ у вас є в будь-якому разі. Увійдіть на сайт і відкрийте розділ «Завантаження» — посилання на курс уже там, незалежно від того, дійшов лист чи ні. Найчастіше лист губиться через одруківку в адресі під час оформлення замовлення. Ще варто заглянути до теки «Спам». Не виходить розібратися — не витрачайте час: напишіть на info@siluette.com.ua або в чат у правому нижньому куті сайту, ми допоможемо.

• На яких пристроях дивитися курс?

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

Оплата та повернення

• Якими способами можна оплатити?

  Банківською карткою Visa, MasterCard або «Простір», через Google Pay, Apple Pay, Masterpass, Visa Checkout, платіжний QR-код, Botpay у Telegram чи Privat24. Є й оплата частинами: Монобанк (3 або 4 платежі), А-Банк (2, 3 або 4 платежі та розстрочка), Банк Глобус (8 платежів), «Скибочка» від OTP Bank (3 платежі), миттєва розстрочка та оплата частинами від ПриватБанку.

• Чи приймається картка, випущена не в Україні?

  Так. Платіжна система приймає картки з Євросоюзу та будь-яких інших країн. Одна деталь, про яку часто забувають: банк може попросити підтвердити платіж — у мобільному застосунку або кодом із СМС. Якщо оплата не проходить, перевірте застосунок банку та повідомлення.

• Як працює знижка 20% при купівлі кількох курсів?

  Додайте до кошика два курси або більше — знижка застосується автоматично до всіх товарів у кошику. Два курси: мінус 20% на обидва. П’ять курсів: мінус 20% на всі п’ять. Знижка поєднується з будь-якими акційними цінами й діє на весь каталог без винятків.

• Чи можна повернути курс або гроші?

  Цифрові товари поверненню та обміну не підлягають. Це загальне правило для всіх електронних товарів в Україні — постанова Кабінету Міністрів № 172 від 19 березня 1994 року. При цьому ми завжди на зв’язку. Якщо доступ не відкривається, посилання перестало працювати або файли пошкоджені — напишіть на info@siluette.com.ua, вкажіть дату та номер замовлення. Відновимо. Якщо щось незрозуміло в самому курсі, теж пишіть — підкажемо.

• Чи можна оплатити від організації за рахунком?

  Поки що ні. Ми працюємо лише з приватними покупцями — безготівкової оплати за рахунком від юридичних осіб зараз немає.

Як проходить навчання

• Чи є зворотний зв’язок із викладачем і перевірка завдань?

  Ні. Усі курси — це записи уроків для самостійного вивчення: викладач не відповідає на запитання і не перевіряє домашні завдання. Саме тому курси коштують значно дешевше за навчання з куратором. Ви отримуєте той самий матеріал, але займаєтеся самі та у своєму темпі.

• Чи видається сертифікат?

  Так, цифровий сертифікат — на запит і безкоштовно. Напишіть на info@siluette.com.ua, вкажіть ім’я та прізвище саме в тому вигляді, в якому хочете бачити їх у сертифікаті, і ми надішлемо його протягом доби.

• Чи потрібен досвід, щоб почати?

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

• Чи є терміни проходження курсу?

  Ні. Ані дедлайнів, ані розкладу, ані доступу, що згорає. Завантажили — дивіться коли зручно, з будь-якими перервами.

• Чи можна поділитися курсом з іншою людиною?

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

Підтримка

• Куди писати, якщо щось не працює?

  Найкраще на info@siluette.com.ua. Є й чат у правому нижньому куті сайту, але пошта надійніша: там можна все описати докладно та додати знімки екрана. Прохання: опишіть, що саме ви робили і що пішло не так, та додайте знімок екрана з помилкою. Так ми вирішимо питання одразу, а не з’ясовуватимемо півдня, що сталося.

• Як швидко відповідає підтримка?

  У робочий час, з 9:00 до 19:00, на пошту зазвичай відповідаємо протягом години, у чаті — за кілька хвилин. Після 19:00 теж буває, але час відповіді не обіцяємо.