Ця стаття є частиною курсу «Мобільні інтерфейси за HIG (дизайн-системою Apple)». Якщо хочете детальніше розібратися, як працювати з компонентами дизайн-системи Apple, переходьте за посиланням і долучайтеся до курсу.
У попередній статті ми говорили про філософію Human Interface Guidelines — принципи, за якими Apple створює свої інтерфейси.
У цій статті перейдемо до практики та розглянемо, як працювати з UI Kit Apple у Figma, як правильно підключити його до проєкту та організувати структуру дизайн-файлів.
UI Kit Apple у Figma
UI Kit Apple — це готовий набір компонентів і змінних, які допомагають швидко створювати інтерфейси для iOS та iPadOS, дотримуючись гайдлайнів Apple.
Apple публікує офіційний UI Kit, який містить:
- базові UI-компоненти
- системні елементи
- змінні (variables)
- стилі та ефекти
- приклади інтерфейсів.
Джерело: https://www.figma.com/community/file/1527721578857867021
Цей файл фактично є дизайн-системою Apple, адаптованою для роботи у Figma.
Варіанти (Variables) — це фундамент дизайн-системи. Саме вони керують кольорами, відступами, ефектами та іншими параметрами інтерфейсу.
UI Kit Apple не містить надто великої кількості змінних. Це зроблено свідомо — щоб дизайнери могли швидше розібратися зі структурою системи.
Водночас UI Kit Apple не завжди має всі можливі варіанти компонентів. Тому в реальних проєктах дизайнери часто розширюють систему власними компонентами.
Як встановити UI Kit Apple
Щоб почати працювати з дизайн-системою Apple, потрібно додати UI Kit у свій робочий простір.
Крок 1. Знайдіть UI Kit у Figma Community
Поточну версію 2026 року ви можете знайти за назвою iOS and iPadOS 26 (Community). Або перейшовши ось за цим посиланнм: https://www.figma.com/community/file/1527721578857867021
Крок 2. Створіть копію файлу
Натисніть кнопку Make a copy of this file. Це створить копію UI Kit у вашому робочому просторі.
Крок 3. Оберіть команду, до якої буде додано цей файл
Вам буде запропоновано обрати серед списку ваших команд, до якої додається проєкт. За замовчуванням файл додається до чернеток, але вам варто перемістити його до власної директорії.
Не радимо працювати з оригінальним файлом з Community. Це робиться для того, щоб мати можливість створювати власні компоненти та розширювати цю систему.
Крок 4. Підключіть бібліотеку до дизайн-файлу для роботи
Щоб підключити бібліотеку до своїх робочих файлів вам потрібно спочатку опублікувати або «вивантажити» цю бібліотеку ось таким шляхом Assets → Library → Publish
Наступним кроком перейдіть до свого робочого файлу, який розміщений у тій самій директорії, що й UI Kit. Натисніть на вкладку Assets, знайдіть потрібний файл та натисніть кнопку Add to file.
Обмеження безоплатного тарифу
Функція публікації бібліотеки доступна не на всіх тарифах. На безоплатному тарифі Figma публікувати бібліотеки не можна.
Вона працює тільки на:
- Education plan
- Professional plan
- Organization plan
Директорія проєкту у Figma
Перш ніж підключати бібліотеку, важливо правильно організувати структуру проєкту.
Директорія проєкту — це тека, у якій зберігаються всі файли одного продукту.
Наприклад, в одній директорії у вас може бути файл з дизайн-системою, робочий файл для екранів, робочий файл для прототипів тощо.
Тут важливо розуміти принцип:
- UI Kit — це окремий файл
- дизайн створюється в інших файлах.
Таким чином дизайн-система використовується одразу у всіх файлах проєкту.
Використання UI Kit у Figma Make
Figma Make — це AI-інструмент Figma, який дозволяє швидко генерувати інтерфейси за допомогою текстових запитів. Щоб згенеровані інтерфейси відповідали Human Interface Guidelines, варто підключити до нього бібліотеку Apple.
Тоді Figma Make зможе використовувати ті самі компоненти, стилі та змінні, що і у вашому дизайн-проєкті.
Крок 1. Створіть файл Figma Make
У директорії вашого проєкту створіть новий файл. Тобто зберігайте файл у тій самій теці, де знаходяться UI Kit Apple та дизайн-файли продукту.
Крок 2. Підключіть бібліотеку
Відкрийте створений файл Figma Make.
Перейдіть у вкладку Assets
Відкрийте Select a Library
Знайдіть ваш Apple UI Kit
Натисніть Add to file.
Після цього всі компоненти бібліотеки стануть доступними для генерації інтерфейсів.
Крок 3. Генеруйте інтерфейси
Тепер можна створювати інтерфейси за допомогою текстових запитів.
Наприклад:
Create an iOS profile screen with avatar, settings list and logout button
Figma Make згенерує екран, використовуючи компоненти та стилі Apple, а також структуру iOS-інтерфейсів.
Навіщо це потрібно
Підключення бібліотеки до Figma Make дозволяє генерувати інтерфейси швидше, одразу використовувати правильні компоненти та зберігати консистентність дизайн-системи.
Навіть якщо AI-макети потребують доопрацювання, вони вже будуть побудовані на основі Human Interface Guidelines.
Контроль версій дизайн-системи
На великих проєктах дизайн-система постійно змінюється. Тому важливо контролювати версії. У Figma це робиться через Version History.
Відкрити її можна через File → Show version history
Версії зазвичай мають певну нумерацію із конкретною логікою. Зазвичай використовується формат трьох чисел: 1.0.0
Перше число — велике оновлення.
Друге число — функціональні зміни.
Третє число — дрібні виправлення.
Створення власних компонентів
UI Kit Apple — це лише база. У реальних проєктах вам доведеться створювати власні компоненти.
Головне правило – максимально перевикористовувати існуючі елементи дизайн-системи.
Наприклад, якщо у вашому компоненті є поле введення — використовуйте стандартне поле введення від Apple, а не створюйте нове.
Це допоможе підтримувати консистентність, спростить масштабування дизайн-системи та ви уникнете хаосу у компонентах.
Тож цій статті ми розглянули базову інфраструктуру, яка дозволяє працювати з дизайн-системою Apple у реальному продукті.
