Figma Course Outline (PDF)

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

**Figma** --- векторний онлайн-сервіс розробки інтерфейсів та прототипування з можливістю організації спільної роботи, що розробляється однойменною компанією. Працює у двох форматах: у браузері та як клієнтський додаток на десктопі користувача. Зберігає онлайн-версії файлів, з якими працював користувач. Figma (Фігма) --- це графічний редактор, який дозволяє працювати декільком спеціалістам одночасно в режимі реального часу. В Figma можна створювати прототипи сайтів, інтерфейси додатків і не тільки. Урок 1: Знайомство з Figma Розглянемо інтерфейс Фігми та базові інструменти.  Урок 3: Типографіка у Figma Розглянемо, що таке шрифт, де його брати та як встановлювати. Попрацюємо з інструментом Text та type settings у Figma.  Урок 4: Кольори та робота з ефектами Зрозуміємо, як людське око сприймає кольори. Вивчимо кольорові моделі (Hex, RGB, HSL, HSB), які використовуються у Figma. Працюємо з масками та ефектами.  Урок 5: Автолейаут у Figma Як Auto layout полегшує життя дизайнерам? Розглянемо розширені налаштування інструменту і зробимо ідеальну кнопку.  Урок 6: Робота з компонентами та варіанти Зрозуміємо основні переваги компонентів та різницю між материнським та дочірнім компонентом. Попрацюємо зі стилями та варіантами.  Урок 7: Ідеальний лендинг Це майстер-клас зі створення лендингу у Figma. Куратор покроково робить макет і пояснює, з чого складається сторінка. **На курсі ви освоїте:** - Знання особливостей веб-проектів (респонсив, адаптив) - Знання принципів юзабіліті сайтів - Розробка дизайну під різні пристрої (десктоп, планшети, смартфони) - Роботу з дизайн макетами у Figma - Розуміння принципів проектування та розробки сайтів та інтерфейсів ### **Програма** Цей курс складається з теоретичних та практичних модулів. Кожен з модулів присвячено конкретній темі. Всі матеріали курсу добре структуровані, написані простою мовою та викладені послідовно. ### **Теорія** Знайомство з Figma Запуск Figma та створення облікового запису. Огляд інтерфейсу Figma https://cases.media/images/creative-practice/figma-basics/module-1-cover.png Фігури та ефекти Робота з прямокутними фігурами в Figma. Прості фігури у Figma. Об'єднання та віднімання фігур (Pathfinder). Ефекти у Figma. Групування у Figma та використання сітки.  Фотографії та монтажні області Маски. Фотографії. Режими накладення. Монтажні області. https://cases.media/images/creative-practice/figma-basics/module-3-cover.png Робота з текстами Текстові об'єкти. Стилі тексту. Сітки.  Прототипування та автоматизація Глобальні стилі. Авторозмітка (Autolayout). Компоненти. Створення інтерактивного прототипу. https://cases.media/images/creative-practice/figma-basics/module-5-cover.png Додаткові можливості Плагіни. Збереження окремих фрагментів у PNG. Збереження в PDF. Переведення тексту в криві. Коментування. Спільнота.  ### **Практика** Створення облікового запису та знайомство з інтерфейсом Це швидкий модуль для початку роботи з Figma. Невеличка пригода, хвилин на 10. https://cases.media/images/creative-practice/figma-basics/module-7-cover.png Робота з фігурами та ефектами В цьому модулі ви навчитесь створювати та налаштовувати фігури, додавати до них візуальні ефекти.  Робота з фотографіями В цьому модулі ви з'ясуєте, які у Figma є базові можливості роботи зі світлинами та як тут застосовувати режими накладення або маски. https://cases.media/images/creative-practice/figma-basics/module-9-cover.png Верстка тексту В цьому модулі ви попрактикуєтесь у верстці текстів.  Авторозмітка та компоненти В цьому модулі ви опануєте роботу з авторозміткою та компонентами. https://cases.media/images/creative-practice/figma-basics/module-12-cover.png Інтерактивний прототип В цьому модулі ви опануєте базові принципи створення прототипів.  Figma -- це хмарний багато платформовий сервіс для дизайнерів інтерфейсів і web-розробників, з яким можна працювати безпосередньо в браузері. І це лише одне з важливих переваг платформи. Що таке Figma з точки зору функціоналу? Це зручний графічний редактор, в якому можна створювати:прототипи web-сайтів і додатків; окремі елементи інтерфейсу: іконки, кнопки, форми і багато іншого; векторні зображення та ілюстрації, інше. При цьому потрібно розуміти, для чого Figma розроблялася. А саме для веб-дизайну. Відповідно, працювати з поліграфією в ній незручно, на відміну від того ж Фотошопа. Тут немає підтримки CMYK, неможливо перемкнути сітку з сантиметрів на міліметри. Та й з макетами з Фотошопа Фігма працювати не дозволяє. Можливо, це тимчасово. Тобто, ви просто переходите на **сайт figma.com,** заходите в свій аккаунт з будь-якого ПК або ноутбука, і можете приступати до роботи. При підключенні до інтернету всі дані вашого макета тут же синхронізуються. Фігма -- це платформа, в якій є практично все необхідне для роботи з графікою, векторними об\'єктами, шрифтами, ефектами і т. д. Ось лише основний список інструментів: **Фрейми (Артборди)** - є готові варіанти, але можна створювати власні під конкретні завдання. **Модульна сітка**- для зручного упорядкування елементів дизайну в фреймах. **векторні форми**- для відтворення різних елементів інтерфейсу. **криві**- для створення кривих і простих векторних форм. Можна додатково завантажити їх з Sketch або Adobe Illustrator. **зображення**- для швидкого додавання графічних елементів в макет. **Ефекти і маски**- в тому числі з ефектами накладення, градієнтами і можливістю зручно працювати з декількома шарами. **текст**- з підтримкою Google Fonts і інструментами підключення додаткових за допомогою Font Installers (для деськтопной версії). Більш того, Фігма - це ще й найширші можливості для розширення базового функціоналу за допомогою **плагінів**. наприклад: **Grid for Tilda Publishing**- швидко генерує сітку для Tilda Publishing. **Unsplash**- дозволяє всього в пару кліків імпортувати зображення з однойменного сервісу. **Iconify**- відкриває доступ більш ніж до 40 тисячам векторних іконок для будь-яких ваших проектів. **Figmotion**- дозволяє додавати прототипам різні анімації без необхідності використовувати додаткові програми: Principle, Haiku або After Effects. **Blobs**- зручний інструмент для відтворення векторних об\'єктів. Всі інструменти і функціональні можливості доступні в безкоштовній версії. Тому якщо у вас немає потреби одночасно працювати з великою кількістю проектом і залучати до редагування більш ніж одну людину, платна підписка не буде потрібно. Крім безкоштовного тарифу і можливості використовуватиФігма онлайн, Ця платформа для дизайнерів має цілу низку додаткових переваг. - **Розрахований на багато користувачів режим редагування** Більше не потрібно пересилати макети між дизайнерами, відправляти замовнику на затвердження, зберігати на комп\'ютері десятки версій. Досить відправити посилання на проект, відкривши доступ для редагування, і інший дизайнер зможе вносити в нього свої зміни. Вони тут же відображаються у інших учасників. А в разі чого можна в будь-який момент відкотитися на одну з попередніх версій. - **Зручне зберігання файлів** Власне хмарне сховище дозволяє відмовитися від сторонніх сервісів на кшталт Google Диска або Dropbox. Відповідно, інші редактори теж отримують доступ до спільного сховища. Це дуже зручно при спільному редагуванні. - **Коментування безпосередньо в макеті** Раніше доводилося робити скріншоти окремих частин макета, розписувати, що потрібно змінити, і так далі. У Figma можна просто клікнути на потрібному елементі і залишити коментар до нього. Знову ж таки, ніяких пересилань файлів і довгих листувань в месенджерах. - **Прототипування** Якщо раніше дизайнерам доводилося працювати зі сторонніми сервісами для прототипування по типу Invision або Marvel, то тепер це не потрібно. Функція прототипирования вже є в Фігме. - **Багатозадачність** Ви буквально в один клік можете перемикатися між проектами і вносити зміни в них, як то кажуть, на льоту. При цьому Figma працює дуже швидко навіть якщо у вас більше десятка проектів. Ні Sketch, ні Photoshop не забезпечать вам такий же продуктивності і багатозадачності. У Figma відмінний режим презентації за посиланням на проект, зручна система роботи з символами, велика бібліотека компонентів з можливістю завантажувати власні, функціональна панель Code для верстальників і програмістів, інтеграція з Zeplin і ще багато корисного. Додатково до всього в інтернеті просто маса безкоштовних уроків,**як працювати з Figma.**Хоча вони, можливо, і не дадуть систематичних знань, але освоїтися в програмі з їх допомогою цілком реально. А пройшовши хороший курс по Фігме, за пару місяців можна освоїти веб-дизайн і вже працювати зі справжніми замовленнями. **Чим відрізняється графічний дизайн від веб-дизайну** Для пересічного різниця між графічним та веб-дизайном зазвичай виглядає несуттєвою. І якщо вже говорити відверто, то цих напрямів справді є багато спільного. Обидва вимагають гарного розуміння графіки, типографії та базових принципів дизайну. У той же час веб-дизайн і графічний дизайн - це зовсім різні напрямки, і різницю між ними потрібно враховувати, якщо ви плануєте вчитися і працювати в одній з цих сфер. Сьогодні ми розповімо, що спільного у веб-дизайну та графічного дизайну, чим вони відрізняються і який напрямок варто вибрати, якщо ви хочете пов\'язати своє життя з дизайном. **Що спільного у веб-дизайну та графічного дизайну** ---------------------------------------------------- Спочатку пропонуємо розібратися з термінологією. -  ***Графічний дизайн**--- це художньо-проектна діяльність, мета якої --- створення гармонійного та ефективного візуально-комунікативного середовища. Графічні дизайнери створюють найрізноманітніші графічні елементи: логотипи, обкладинки книг, рекламні банери, плакати, флаєри, білборди та багато іншого.* - ***Веб дизайн ***--- це насамперед розробка візуальної складової веб-інтерфейсів: сайтів та веб-додатків. Веб-дизайнери зазвичай працюють у тандемі з розробниками, які у свою чергу реалізують створені ними візуальні рішення за допомогою коду. Тобто ми дійсно говоримо про дуже різні напрями. І незважаючи на це, у веб-дизайну та графічного дизайну багато спільного: - **Базові знання практично ідентичні. **Йдеться в першу чергу про психологію кольору, основи композиції, правила поєднання шрифтів тощо. У цьому плані дизайнерів можна порівняти з художниками і навіть фотографами. Теоретична, та іноді практична база багато в чому дублюється, виступаючи як відправна точка у роботі. - **В основі будь-якого дизайну -- генерація ідей. **І веб-дизайнер, і графічний дизайнер повинні вміти генерувати ідеї, бути креативними та самостійними. При цьому обом потрібно навчитися виконувати технічне завдання замовника і не виходити за його рамки. - **Вміння поєднувати маркетинг та творчість -- обов\'язкове.** Незважаючи на те, що дизайн в цілому вважається однією з найбільш креативних і творчих професій, тут все ж таки потрібно вміти дотримуватися балансу між польотом творчої думки та маркетингом. До того ж найчастіше саме маркетинг виходить на перше місце, а вже потім --- креативність. - **Багато робочих інструментів дублюються для обох професій. **В основному ми говоримо про Adobe Photoshop та Figma, якими користуються як графічні, так і веб-дизайнери. Ці та інші спільні риси часто зумовлюють те, що один спеціаліст працює і веб-дизайнером, і графічним дизайнером. Але цей факт зовсім не означає, що у веб-дизайнера можна замовити розробку дизайну білборда, а у графічного дизайнера --- макет Landing Page. Все-таки це різні професії, і різниця в багатьох аспектах є дуже суттєвою. **У чому різниця фахівців** --------------------------- Веб-дизайн та графічний дизайн дуже схожі лише під час поверхового розгляду. Якщо ж ми почнемо розглядати їх детальніше, то переконаємося, що різниця є, і вона дуже велика. Тому давайте перейдемо до відмінних рис кожного з напрямків роботи фахівців. ### **Що створюють?** Як ми й сказали вище, веб-дизайнер -- це спеціаліст, який створює дизайн веб-інтерфейсів. Але важливо розуміти, що йдеться про комплексний процес, що складається з низки обов\'язкових етапів: 1. Аналіз технічного завдання, інформації про продукт та ЦА 2. Проектування сценаріїв користувача 3. Підготовка прототипів та макетів 4. Створення унікального стилю, вибір шрифтів, колірних рішень та різних візуальних елементів 5. Відображення інтерфейсу у графічному редакторі 6. Передача макету команді верстки для реалізації за допомогою коду Не можна просто відкрити Photoshop і одразу відмалювати макет. Вірніше, це можна зробити, але сайт (або веб-додаток) має не просто ефектно виглядати, а й продавати. Тому робота завжди проводиться комплексно. Інакше сенсу у роботі веб-дизайнера виявляється небагато. Графічні дизайнери -- це фахівці ширшого спектру, які можуть відобразити практично все, крім веб-сторінок: логотипи, поліграфію, книги та журнали, авторські шрифти, обкладинки книг та ілюстрації, стікери в Telegram, шаблони для Stories у Instagram та багато іншого. Перелічувати можна дуже довго. Якщо ви зараз поглянете навколо себе, то напевно побачите величезну кількість результатів роботи графічних дизайнерів --- логотипи на техніці, рекламні буклети і навіть гроші. ### **Якими інструментами працюють?** Інструментарій сучасного веб-дизайнера відносно тонкий: - Figma - Photoshop - Sketch - InVision Studio - Adobe XD А ось інструментарій графічного дизайнера виглядає набагато багатшим: - Adobe Illustrator - Adobe Photoshop - Adobe After Effects - Cinema 4D - Figma ### **З ким ствроюють?** Веб-дизайнер --- це, якщо можна так сказати, більш командний гравець. Зазвичай він працює у тандемі з веб-розробниками, фронтенд- та бекенд-фахівцями, проджект-менеджерами тощо. Найтісніша зв\'язка - це веб-дизайнер - верстальник, тому що дизайнер повинен розуміти, які його рішення реально можна втілити на практиці, а які - ні. Це дуже важливо, тому що веб-дизайнери-початківці часто створюють макети, які фізично неможливо втілити за допомогою верстки. Щоб подібного не допускати, якраз і треба працювати у тандемі. Графічний дизайнер - це самостійніша ланка. Він може брати замовлення безпосередньо у клієнта і передавати йому готовий результат. Але це зовсім не означає, що графічний дизайнер не може бути таким самим командним гравцем. Наприклад, він може працювати у видавництві, поліграфії, рекламному агентстві і т. д. І так само може створювати окремі дизайнерські елементи для веб-дизайну - логотипи, шрифти, банери і багато іншого. Що таке айдентика бренду і до чого тут веб-дизайнер? ==================================================== ***Айдентика**- Це візуальна складова компанії.* Саме завдяки унікальній айдентиці формується цілісний образ бренду, він стає впізнаваним для цільової аудиторії та допомагає сформувати перше враження. Головна мета айдентики - створити єдиний фірмовий стиль, об\'єднати розрізнені візуальні та вербальні елементи в одну систему та визначити ключові правила її використання. Ми говоримо не тільки про логотипи, корпоративні кольори та ім\'я бренду. Насправді айдентика --- набагато складніша і багаторівнева структура, що складається з багатьох елементів. І саме про них йтиметься далі. ### **Ім\'я бренду** Всупереч поширеній думці, айдентика --- це не лише візуальна складова. Адже технічно неймінг не належить до візуалу. Але між цими елементами айдентики формується міцний зв\'язок. Коли ви чуєте слово Apple, ймовірно, у підсвідомості насамперед вимальовується логотип компанії Стіва Джобса, а не звичайне яблуко. А коли чуєте Ford, уявляєте саме логотип автомобільного концерну, а не портрет його засновника Генрі Форда. Неймінг - це своєрідна відправна точка у створенні айдентики бренду. Тому підхід до вибору імені компанії має бути особливо ретельним. Ми можемо дати лише кілька базових рекомендацій: - Постарайтеся вибрати ім\'я, яке буде не тільки яскравим, але й асоціативним. - Назва має бути унікальною, інакше зареєструвати ТМ просто не вийде. - Якщо бренд планує виходити на закордонні ринки, необхідно підібрати ім\'я, яке буде зрозумілим та не викличе непотрібних асоціацій в інших країнах. ### **Кольори** Вибір колірної гами для айдентики -- украй важливий етап. Не дивно, що дизайнери приділяють цьому питанню так багато уваги. Тому що те саме зображення або логотип, але з різними колірними рішеннями, може надавати зовсім інший вплив на потенційного споживача. Для більшої наочності давайте розглянемо кілька «популярних» кольорів та асоціації, які вони викликають у людини: - **червоний**- пристрасть, азарт, молодість та емоційність: Coca-Cola, YouTube, Netflix, Canon, KFC та інші - **Помаранчевий**- дружелюбність та грайливість: Fanta, Xiaomi, JBL, Tinder, Mozilla Firefox та інші - **Жовтий**- щастя і радість: McDonald\'s, Chupa-Chups, Nikon, Snapchat та інші - **Зелений**- Екологічність та безпека: Starbucks, Sprite, Spotify, Android та інші - **Синій**- стиль та довіра: Dell, Ford, Samsung, Intel, Twitter, Facebook та інші - **Рожевий**- ніжність та жіночність: Barbie, Victoria\'s Secret, Hello Kitty, Cosmopolitan та інші - **Чорний**- стиль та авторитетність: Nike, Prada, Zara, Sony, The New York Times та інші Звичайно ж, такий підхід до вибору кольору не є прямим керівництвом до дії. Але слідкувати за загальними тенденціями сучасний дизайнер айдентики має обов\'язково. ### **Ім\'я бренду** Всупереч поширеній думці, айдентика --- це не лише візуальна складова. Адже технічно неймінг не належить до візуалу. Але між цими елементами айдентики формується міцний зв\'язок. Коли ви чуєте слово Apple, ймовірно, у підсвідомості насамперед вимальовується логотип компанії Стіва Джобса, а не звичайне яблуко. А коли чуєте Ford, уявляєте саме логотип автомобільного концерну, а не портрет його засновника Генрі Форда. Неймінг - це своєрідна відправна точка у створенні айдентики бренду. Тому підхід до вибору імені компанії має бути особливо ретельним. Ми можемо дати лише кілька базових рекомендацій: - Постарайтеся вибрати ім\'я, яке буде не тільки яскравим, але й асоціативним. - Назва має бути унікальною, інакше зареєструвати ТМ просто не вийде. - Якщо бренд планує виходити на закордонні ринки, необхідно підібрати ім\'я, яке буде зрозумілим та не викличе непотрібних асоціацій в інших країнах. Взагалі радимо вам почитати історію створення назв популярних брендів це дуже захоплює. Про Apple більшість і так знає, але як щодо Oracle, Pepsi та Yahoo! чи Canon? Прочитайте історію назв цих компаній. Ви будете здивовані. ### **Логотип** Багато хто називає логотип головним елементом айдентики будь-якого бренду. І з цим неможливо не погодитись. Логотип -- це візитівка, ключовий елемент, за яким людина ідентифікує ту чи іншу компанію. Навіть якщо ніколи не скористався її продуктами. Самі дивіться! Людина, яка жодного разу не користувалася технікою Apple, з легкістю впізнає «надкушене яблуко». Той, хто жодного разу не сідав за кермо автомобіля, чудово знає, як виглядає лого Mercedes. І навіть найзапекліший представник здорового способу життя і правильного харчування ні з чим не сплутає логотип McDonald\'s. Прийнято вважати, що логотип має бути найстабільнішою частиною айдентики. Якщо компанія раптово його змінить, це може значно знизити впізнаваність бренду. Так, таке справді можливо. Але це зовсім не означає, що створений одного разу логотип має залишатися незмінним протягом десятиліть. ### **Типографія** Типографія- це мистецтво оформлення друкованого тексту. Якщо ж ми розглядаємо типографію в контексті айдентики бренду, то йдеться в першу чергу про використовувані шрифти, їх розміри, накреслення, відстань між рядками та інші параметри. ### **Персонаж** Ну і насамкінець кілька слів про персонажа бренду (маскота). Не кожен бренд використовує цей елемент айдентики, але в деяких випадках уявити компанію без її маскота вже просто неможливо: - Червоний та Жовтий --- M&M\'s - Пінгвін - Linux - Рональд Макдональд - McDonald\'s - Кролик Квікі - Nesquik - Полковник Сандерс - KFC - Міккі Маус - Disney Швидкі клавіши для роботи в Figma ================================= **Інструменти** --------------- Швидкі клавіши для базових інструментів Фігма - **Інструмент виділення** - V - **Текст** - Т - **Піпетка** - I - **Cтворити Фрейм** - F - **Перо** - P - **Додати/Показати коментар** - C Тут все просто, інтуїтивно, орієнтуючись на перші літери. **Інтерфейс** ------------- Швидкі клавіши для перегляду і переміщення по проекту - **Показати/приховати інтерфейс Фігма**\ Ctrl + \\ ; ( Command + \\ ) - **Масштаб 100%**\ Shift + 0 - **Збільшити масштаб**\ + - **Зменшити масштаб**\ - - **Переміщення по проекту**\ Space + ЛКМ **Робота з шарами** ------------------- Переміщення, дублюваня і тд і тп. - **Дублювати дію або шар (фрейм)**\ Ctrl + D\ Command + D - **Показати лінійки**\ Shift + R - **Перемістити шар наверх**\ Ctrl + \]\ Command + \] - **Перемістити шар вниз**\ Ctrl + \[\ Command + \[ **Робота з фігурами** --------------------- - **Режим редагування контуру**\ Enter - **Поміняти місцями заливку і обводку**\ Shift + X - **Відобразити по горизонталі**\ Shift + H - **Відобразити по вертикалі**\ Shift + V - **Створити маску з фігури**\ Ctrl + Shift + M\ Command + Shift + M **Робота з текстом** -------------------- - **Режим редагування текста**\ Enter - **Вихід з режиму редагування текста**\ Ctrl + Enter\ Command + Enter - **Зробити текст жирним/прибрати жирність**\ Ctrl + B\ Commnd + B - **Зробити текст курсивом/прибрати курсив**\ Ctrl + I\ Command + I **Як користуватися Figma: інструменти** --------------------------------------- Перший крок -- реєстрація. Після цього починаємо знайомство із сервісом. Інтуїтивно зрозумілий інтерфейс складається з панелі із шарами, панелі інструментів та панелі властивостей. Повідомлення з підказками допомагають розібратися у програмі. Щоб зрозуміти, як працювати у Фігмі, вивчимо її інструменти: - Рамки. Виберіть кадр для певного пристрою, щоб не витрачати час на пошуки потрібних розмірів. https://lh4.googleusercontent.com/bLXE5HSy1PenQtQakqzIwk9cNDtptOGoTfVanvlrZaZyBFb-rU5abNmeydGWds9kZASnK52LXl-StcdNoOVndsWp4EJdhQIOPp4uKxVD96goZYyxDPjUFPtHBv7chpX8NoFo4Ekf - Сітки. Ви можете змінити параметри сітки, причому не обов'язково залишати ширину або висоту фіксованою. Також є можливість поміняти колір та використовувати на одному макеті відразу кілька сіток.  - Ефекти. Додайте в дизайн тіні, розмиття фону чи шару. - Перо. Створюйте фігури з кривих, змінюйте їх розмір і колір за пару секунд. - Напрямні. Це елементи регулювання макетів. З ними простіше працювати, ніж із сітками: ви витратите менше часу на створення напрямних та керування ними. https://lh5.googleusercontent.com/2i3KBxoxy28fgmS-GBj9LaPTc4pn\_gTH4Z1z82by0\_iSMki-l1aXuqYBjNn3eyrckrc8rWej9CGaqn6amp-FTTls6partiytVolcF0BApUnXMkuintZUfkerJGMf7cM35nsm8zGv - Шрифт. Використовуйте шрифти Google Fonts або встановіть інструменти. Застосовувати їх можна до одного або кількох текстових елементів, а також до слів і літер всередині об'єкта.  - Play Button. Опція для тестування сайту: перевірте, чи правильно працюють кнопки, чи збережена логіка переходів та інше.