Зміст статті
Існує невидима стіна, яка відділяє веб-майстрів-початківців від справжніх художників. З одного боку — зрозумілі та прості програми на кшталт Canva, де вже є тисячі готових шаблонів. З іншого — загадкові та трохи лячні професійні інструменти, такі як Figma чи Photoshop, у яких все потрібно малювати з нуля. Коли постає питання, з чого почати веб-дизайн, ми губимося у виборі інструментів.
Ми дивимося на цю стіну і думаємо, що перелізти через неї можуть лише обрані — ті, хто має особливий талант. Нам здається, що на освоєння цих складних “пензлів та фарб” потрібно витратити роки. “А чи буде воно того варте?” — думаємо ми. Ці думки змушують нас залишатися на місці й не виходити із зони комфорту, навіть коли ми відчуваємо, що її можливостей уже не вистачає.
Що таке Figma? Моя перша екскурсія до міста художників
Після того, як у минулому уроці ми розібралися з теоретичним фундаментом і зрозуміли, в чому різниця між UI та UX дизайном, настав час взяти до рук практичний інструмент.
Цього тижня я вирішив не лізти через стіну, а просто знайти в ній двері. Я вирушив досліджувати Figma і хочу поділитися з вами тим, що виявив. І чому двері до цього міста насправді відчинені для всіх.
Коли я вперше відкрив Figma, я побачив велике біле полотно і кілька панелей з незрозумілими іконками англійською мовою, і просто завмер. Пам’ятаєте, як кажуть в одному відомому мемі: “Дуже цікаво, але нічого незрозуміло”? Саме так я почувався в той момент.
Але потім я видихнув і вирішив роззирнутися, як у новому, незнайомому місці. Виявилося, для початку потрібно зрозуміти лише одну річ. Екосистема Figma схожа на невелике місто, що складається з центральної площі та трьох кварталів, кожен з яких виконує свою роботу на благо всього поселення.
Ремісничий квартал: огляд основних інструментів Figma
У верхній частині екрана розташувався наш “ремісничий квартал” — головна панель інструментів, за допомогою яких ми будемо творити:
- Move Tool (Гаряча клавіша: V): Це основний інструмент-курсор для виділення та переміщення об’єктів центральною площею — полотном.
- Frame Tool (Гаряча клавіша: F): Інструмент “Фрейм”. Це наше полотно, на якому ми будемо малювати конкретний екран сайту, наприклад, “екран ноутбука” або “екран телефона”.
- Shape Tools (Гарячі клавіші: R, O, L): Інструменти для створення базових фігур — прямокутника, еліпса, лінії. З них, як із цеглинок, ми будуємо плашки, кнопки та декор.
- Text Tool (Гаряча клавіша: T): Інструмент для створення будь-якого тексту, від заголовків до дрібних підписів.
Квартал Архітекторів: Панель шарів та навігації у Фігма
Зліва у Figma знаходиться “квартал архітекторів” — панель, яка відповідає за порядок і структуру. Уявіть, що ми робимо аплікацію. Спочатку ми кладемо на стіл аркуш паперу, це наш “Frame”. На нього ми клеїмо фігури з кольорового паперу: прямокутник, еліпс, лінію. Кожен елемент — це окремий шар “Layer”. На лівій панелі ми бачимо список усіх наших “шарів” і можемо керувати їхнім порядком: щось розташувати вище, а щось — сховати нижче.
Квартал Налаштувань. Панель властивостей у Фігма
Праворуч — найрозумніший квартал нашого міста. Ця панель миттєво підлаштовується під той елемент, який ви виділили:
- Виділили прямокутник? Праворуч з’являться налаштування його розміру, кольору, заокруглення кутів, тіней.
- Виділили текст? З’являться налаштування шрифту, розміру, кольору, міжрядкового інтервалу.
- Нічого не виділили? Праворуч будуть налаштування кольору фону всієї нашої “центральної площі”.
Центральна площа. Полотно Canvas
І нарешті “полотно” — це серце міста Figma. Тут відбуваються всі візуальні дива. Але це не просто місце для малювання. Тут можна розміщувати нотатки, будувати карти сайту, збирати референси — картинки та скріншоти, що сподобалися. Одним словом, повна свобода для творчості.
“Привіт, світе!”: Мої перші кроки в Figma
Найстрашніша частина будь-якої справи — почати. Тому я вирішив не зволікати і намалювати щось зовсім просте, а саме хедер (header) для умовного сайту.
За допомогою панелі інструментів я створив Фрейм і вибрав для нього розмір екрана MacBook Pro 14. Потім намалював прямокутник, задав йому розмір 1512х100 пікселів і розмістив його вгорі фрейму. За допомогою правої панелі налаштувань вибрав для нього колір.
Далі я написав текст “Hello World Site”, підібрав йому шрифт, розмір та жирність. Після цього вирівняв текст по центру прямокутника і змістив його трохи вліво.
Коли я закінчив, я був дуже щасливий! На білому полотні з’явилося моє творіння. Я відчув себе дизайнером. З нічого я створив елемент, який може лягти в основу майбутнього дизайну мого блогу. Звісно, над концепцією мені ще потрібно попрацювати, але першу цеглину закладено. Figma виявилася не такою вже й складною, а головне — доступною для новачка.
Чому Figma тепер мій новий друг
Раніше я думав, що Figma — це складний інструмент для обраних. Тепер я розумію, що це просто чистий аркуш паперу і набір дуже зручних олівців, які допоможуть мені пройти “Шлях до майстерності” і стати веб-майстром, що вміє малювати красиві та гармонійні дизайни.
Я буду використовувати Figma у своїй роботі, тому що вона:
- Працює в браузері. Не потрібен потужний комп’ютер. Можна працювати над проєктом з будь-якого місця, де є інтернет.
- Створена для спільної роботи. Можна просто скинути посилання на макет клієнту, і він залишить коментарі прямо на ньому. Це як Google Docs, але для дизайну.
- Безкоштовна і щедра. Безкоштовного тарифу більш ніж достатньо для навчання та перших фриланс-проєктів.
- Все в одному. У ній можна робити все: від начерків до фотореалістичних макетів та інтерактивних прототипів.
- Має величезну спільноту. У Figma Community лежить гігантська бібліотека файлів від інших дизайнерів. Можна зайти в будь-який, подивитися, як він влаштований, і “розібрати на запчастини”. Це один з найкращих способів вчитися.
Дякую, що пройшли цю екскурсію разом зі мною. У наступному уроці ми почнемо будувати у цій пісочниці наші перші замки та розберемо Секретний код професіоналів: як модульна сітка у Figma змінила мій погляд на дизайн. До зустрічі!
