Основи Інтерфейсу || Figma 101

Детальніше про відео Основи Інтерфейсу || Figma 101

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

Привіт друзі!

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

Відкриття Figma

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

Саме в цьому полягає головна перевага Figma. Ви можете увійти на сервіс на будь-якому комп’ютері та редагувати свій проєкт, де б ви не були.

Головний екран

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

Крім того, є розділ Drafts. Це чернетки, тобто ваші файли, які ніхто інший не бачить, доки ви не поділитесь ними через посилання. Деякі проєкти можна виділяти зірочкою, тоді вони потраплять у список Starred.

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

Створення нового файлу

Також на головному екрані є можливість створювати нові файли. Щоб створити новий файл, потрібно вирішити, чи це буде Design File, чи інший тип файла. Ми обираємо перший варіант, оскільки це класичний файл Figma. Крім того, у нас є можливість створювати FigJam Board, Slide Deck, або ж імпортувати збережені файли. До речі, зберігати файли не обов’язково, адже все знаходиться у хмарі. Також можна імпортувати файли Sketch. Однак цей імпорт не завжди працює ідеально. Він може непогано імпортувати тільки нескладні проєкти.

Отже, для нас зараз можливий Design File, який також можна створити, натиснувши плюс у списку вкладок. Я натискаю плюс і тепер натискаю New Design File. Отже, у нас відкрилася нова закладка. Давайте розглянемо, що тут знаходиться.

Інструменти нижньої частини екрану

  • Move: Інструмент для переміщення та редагування об’єктів. Ви можете пересувати об’єкти, змінювати їх розмір і так далі.
  • Рука: Допомагає пересувати робочу область. Найзручніший спосіб пересуватися по робочій області – це просто проводити по тачпаду двома пальцями. Але якщо ви не користуєтесь тачпадом, то можете використовувати цей інструмент або мишку.
  • Scale: Масштабування, яке дозволяє пропорційно змінювати розмір будь-яких об’єктів. Наприклад, коли ви розтягуєте прямокутник, він змінюватиметься пропорційно у всіх напрямках, зберігаючи всі свої пропорції.
  • Frame: Використовується для створення екранів. Ви можете малювати їх вручну або обирати один з заготовлених варіантів.
  • Section: Використовується для виділення кількох потрібних ділянок робочої області, організації файлів, для більш зручної навігації, виділення груп робочих областей та інших цілей.
  • Slice: Створює кадри. Ви можете експортувати лише ту частину об’єкта, яка знаходиться в межах цього слайсу.
  • Прямокутник: За допомогою якого можна створювати прямокутники або квадрати, якщо утримувати клавішу Shift.
  • Лінія та стрілки: В принципі, з будь-якої лінії можна зробити стрілку.
  • Ellipse: Дозволяє малювати кола і овальні форми.
  • Багатокутник: Хоча значок показує трикутник, ви можете змінювати кількість кутів і створювати різні багатокутники.
  • Зірочка: Можна налаштовувати кількість кінців.
  • Вставити зображення: Ви також можете перетягнути зображення або скопіювати та вставити його у Figma.
  • Перо: Дозволяє редагувати векторні об’єкти. Коли ви вибираєте Перо та ставите першу точку, активується режим векторного редагування. Якщо натиснути Escape та хрестик, так можна вийти з режиму редагування.
  • Pen Tool: За допомогою якого ми можемо згинати наші фігури.
  • Paint Bucket: Яким ми можемо зафарбовувати частини фігури.
  • Олівець: З його допомогою можна малювати лінії, які пізніше можна редагувати, оскільки вони є векторними.
  • Text: Дозволяє додавати текст на робочу область. Якщо ви просто натиснете один раз, текст буде писатися в один рядок, доки ви не натиснете Enter. Якщо створити текстове поле, утримуючи мишку, текст буде автоматично переноситися по ширині поля. Пізніше ви можете збільшувати та зменшувати ширину цього поля.
  • Коментарі: Дозволяє залишати коментарі, які можна переглядати на панелі праворуч. Інші користувачі можуть залишати відповіді на ці коментарі, а після завершення обговорення коментар можна позначити як вирішений.
  • Actions: Тут можна знайти різні компоненти, плагіни та віджети.
  • Перемикач з дизайн-моду у DevMode: Допомагає розробникам перенести дизайн у код, доступний зараз тільки у платному пакеті.

Панель зліва

Тут є іконка Figma. Це наше меню, де доступні всі функції, що стосуються самого файлу та роботи з Figma. Від CopyPaste до більш специфічних налаштувань файлу. За допомогою функції Minimize UI ми можемо приховати всі панелі. Якщо ви хочете перейменувати файл, можна натиснути на назву та ввести нове ім’я.

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

Верхній правий кут

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

Режим презентації

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

Поділитися файлом

Кнопка “Поділитися” дозволяє надіслати посилання на файл іншим користувачам.

Панель праворуч

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

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

Це основні інструменти, які ви можете використовувати у Figma. Дякую за увагу. З вами була Адолька. Зустрінемось у наступному уроці!