Компоненти Figma — це багаторазові елементи, які дизайнери можуть постійно використовувати в різних проектах. Він відіграє життєво важливу роль у забезпеченні цілісної візуальної мови дизайну в усьому дизайні. Однак, навіть незважаючи на те, наскільки корисними є компоненти, дизайнери все одно стикаються зі звичайною проблемою під час роботи з компонентами: ефективно та результативно керувати та модифікувати різні варіації цих компонентів.
Це трапляється, коли дизайнери вносять певні зміни в екземпляри компонентів або створюють нові ітерації варіантів у наборі компонентів, що призводить до тривалого робочого процесу та захаращеної та неорганізованої бібліотеки. Але у Figma є рішення цієї проблеми – Component Properties.
У цій статті ми детально зануримося у властивості компонентів Figma та вивчимо різні типи властивостей компонентів, а також цінні поради та підказки щодо використання цієї потужної функції.
Завантажте наші зразки компонентів тут, щоб слідувати разом із прикладами!
Що таке властивості компонента?
Властивості компонента
До появи властивостей компонентів Figma дизайнери вручну вибирали та налаштовували окремі шари в наборі компонентів. Наприклад, якщо вони хотіли змінити піктограму, текст або колір кнопки, їм доводилося знаходити та редагувати кожен елемент окремо, що призводило до тривалого процесу.
Властивості компонентів Figma позбавляють від непотрібних натискань, перетягувань і редагування. Згідно з визначенням Figma, властивості компонента — це «змінні аспекти компонента». Вони дозволяють вам змінювати конкретні частини ваших компонентів у центральному місці та за вашим бажанням, зокрема:
Складові елементи (колір, текст, фігури тощо)
Варіанти компонентів (Основна кнопка – синя, Основна кнопка – біла тощо)
Розташування компонента (розташування елементів усередині компонента)
Завдяки властивостям компонента вам більше не потрібно занурюватися в кожен елемент окремо, щоб вносити зміни. Натомість у Figma є зручна бічна панель справа, де ви можете переглядати, вибирати та налаштовувати доступні параметри властивостей.
Як створити властивість компонента
Замість того, щоб вручну налаштовувати елементи всередині кожного компонента, багаторазово подвійно клацаючи їх, у вас є можливість призначити такі властивості елементів, як текст, піктограми або кольори. Цей ефективний підхід дозволяє безперебійно оновлювати вміст ваших компонентів. Наприклад:
Припустімо, що ми створюємо дизайн, який вимагає введення документа, що підтверджує особу. Спочатку ми створюємо компонент із такими елементами:
- Текст для типу документа
- Текст для деталей документа
- Іконка для документа
- Шеврон для компонента
Замість того, щоб постійно змінювати вміст елементів, згаданих вище, ми використовуємо властивості компонентів у Figma, щоб легко налаштувати його вміст, виконавши такі дії:
- Виберіть елемент, який ви хочете «легко редагувати за допомогою властивостей компонента».
- Виберіть піктограму властивості компонента в розділі «Вміст» на правій панелі Figma.
- Створіть властивість компонента, вказавши назву властивості та значення властивості (приклад наведено нижче).
- Назва власності: тип документа підтвердження
- Значення за умовчанням: {Введіть документ підтвердження}
- Натисніть «Створити властивість».
- Повторіть процес для інших елементів компонента.
- Після створення всіх властивостей відкрийте бібліотеку компонентів [Shift + I] і використовуйте екземпляр вашого компонента.
Зверніть увагу, що в цьому компоненті на правій панелі Figma з’являється розділ, який показує настроювані елементи компонента. Ви можете легко вносити необхідні зміни без клопоту пошуку окремих шарів за допомогою властивостей компонента!
Але це лише один вид властивості компонента. Давайте обговорювати далі!
Які існують різні типи властивостей компонентів у Figma?
Типи властивостей компонентів
У Figma є чотири основні типи властивостей компонентів:
- Логічна властивість
- Властивість тексту
- Властивість заміни екземпляра
- Властивість варіанту
Ми обговоримо кожну властивість, щоб допомогти вам зрозуміти, як працюють властивості компонента.
Булева властивість
У коді або обчисленнях Boolean — це логіка, яка означає, що результат може мати лише одне з двох можливих значень: істинне або хибне, подібно до того, як ми маємо справу з цим у Figma.
У Figma властивість Boolean просить вас встановити значення True або False для певного шару у вашому компоненті. Це визначає, чи видимий шар на вашому компоненті та чи відображається за допомогою кнопки-перемикача.
Створити булеву властивість у Figma просто:
- Виберіть елемент, яким потрібно керувати, за допомогою властивостей компонента.
- Виберіть піктограму властивості компонента в розділі «Шар» на правій панелі Figma.
- Створіть властивість компонента, вказавши назву властивості та вибравши значення. Потім натисніть «Створити властивість». Наприклад:
Багато розробників вважають властивість Boolean однією з найпотужніших властивостей Figma як одного з найпотужніших типів властивостей Figma. Це пояснюється тим, що це значно зменшує необхідність створення кількох варіантів одного компонента.
Замість окремих компонентів, таких як «Кнопка без шеврона» та «Кнопка з шевроном», властивість Boolean дає змогу перемикати видимість шеврона простим клацанням.
Властивість Text
Як випливає з назви, властивість Text зосереджена на настроюваних текстах у вашому компоненті. За допомогою властивості Text ви можете зручно вводити потрібний текст безпосередньо з бічної панелі без подвійного клацання текстового елемента на компоненті.
Щоб створити текстове властивість, просто:
- Виберіть елемент, яким ви хочете керувати за допомогою «Властивостей компонента».
- Виберіть піктограму властивостей компонента в розділі «Вміст» на правій панелі Figma.
- Створіть властивість компонента, вказавши назву та значення властивості. Потім натисніть Створити властивість. Наприклад:
Використання властивості Text для ваших проектів забезпечує швидке та просте налаштування, головним чином під час редагування кількох компонентів одночасно.
Наприклад, якщо ви помітили помилку в кнопках, які ви розмістили на своєму полотні, вам не доведеться натискати та редагувати кожну налаштовану кнопку. Просто виберіть усі кнопки та відредагуйте текст на панелі властивостей праворуч. легко!
Властивість заміни екземпляра
Раніше екземпляри обміну складалися з надмірної кількості кліків і кількох версій компонентів. Це було до тих пір, поки Figma не оновила властивості компонента за допомогою властивості заміни екземпляра. Ця функція відносно нова, але неймовірно корисна під час розробки складних проектів.
Властивість Instance Swap
Властивість Instance Swap дозволяє розробникам міняти місцями екземпляри або варіанти в межах вашого компонента. Вам не доведеться створювати кілька версій батьківського компонента, якщо ви використовуєте цю властивість!
Під час створення властивості Instance Swap ви можете вибрати, які бажані значення або елементи можна поміняти місцями з вибраним екземпляром. Ви можете вибрати з існуючих елементів у тому самому компоненті, що й вибраний екземпляр або бібліотека Figma.
Figma також дозволяє створити колекцію пріоритетних значень у цій властивості.
Бажані значення
Бажані значення — це набір ресурсів, які дизайнер може використовувати для обміну з вибраними екземплярами в своїх проектах. Вони пропонують цінний організаційний інструмент, особливо при роботі з кількома компонентами.
Якщо у вас є дизайн кнопки, де ви бажаєте взаємозамінно використовувати лише десять піктограм зі 100 доступних піктограм у вашій бібліотеці, призначення цих піктограм 1ten0 як бажаних значень дозволить вам легко вибирати з меншої підмножини замість пошуку в усій бібліотеці зі 100.
Як каже Figma , Preferred Values значно «зменшує здогадки, повідомляючи, які конкретні компоненти можуть замінити існуючий».
Як створити властивість заміни екземпляра та бажані значення
Щоб створити властивість заміни екземпляра, просто:
- Виберіть компонент, який містить примірник, який ви бажаєте поміняти.
- Виберіть піктограму властивостей компонента поруч із екземпляром на правій панелі у Figma, щоб створити властивість Instance Swap.
- Введіть назву властивості та виберіть значення екземпляра за замовчуванням.
- Виберіть бажані значення для компонента.
- Натисніть «створити властивість».
Щоб виконати властивість Instance Swap, яку ви створили:
- Створіть новий екземпляр вашого батьківського компонента.
- Виберіть новий екземпляр вашого батьківського компонента.
- Знайдіть назву властивості, яку ви створили для властивості Instance Swap, і натисніть кнопку спадного списку.
- Виберіть бажане значення екземпляра, який ви бажаєте поміняти.
Ця потужна функція є зручною та корисною, оскільки дозволяє мати більш керовану бібліотеку для ваших проектів, особливо складних, які використовують багато активів. Використання властивостей заміни екземплярів і організація бажаних значень кардинально змінює правила гри.
Властивість варіанта
Варіант — це компонент, знайдений у наборі компонентів. Варіантами можуть бути такі компоненти, як кнопки, стилі тексту, піктограми тощо, кожен із різними атрибутами, такими як розміри та кольори. В одному наборі компонентів може існувати кілька варіантів.
Для ефективного керування та створення різних версій або станів компонента Figma пропонує властивість Variant. Ця властивість дозволяє позначати та визначати атрибути ваших варіантів від кольору до розміру, забезпечуючи гнучкість і ефективність робочого процесу проектування.
Щоб використовувати властивість Variant:
- Створіть компонент, варіанти якого ви хочете, наприклад, кнопки, картки тощо.
- Виберіть компонент і натисніть значок + у розділі «Властивості» на правій панелі Figma.
- Виберіть «Варіант»
- Перейменуйте тип властивості та назву варіанта в розділі «Поточний варіант». Ви можете назвати цю кнопку «За замовчуванням» або «Основна кнопка».
- Виберіть компонент, який ви створили, а під ним натисніть піктограму +, щоб створити свій перший варіант.
- Налаштуйте новий варіант і позначте назву варіанта відповідно в розділі «Поточний варіант».
- Повторюйте кроки 5-6, доки не створите потрібну кількість варіантів.
- Після успішного створення варіантів відкрийте бібліотеку компонентів [Shift + I] і створіть екземпляр вашого компонента.
- Розмістіть компонент на своєму полотні та виберіть варіант, який ви бажаєте використати, на правій панелі Figma.
Ця конкретна властивість компонента може бути найбільш корисною для дизайнерів, які створюють прототипи та часто беруть участь у проектах, які потребують багатьох варіацій. Він забезпечує зручний спосіб керування та організації різних станів компонентів, покращуючи процес проектування.
Що таке вкладені екземпляри у властивостях компонента?
Вкладені екземпляри у Figma стосуються компонентів, розміщених в інших екземплярах компонентів. Простіше кажучи, це означає наявність компонентів у компонентах.
Наприклад, у вас може бути компонент «Кнопка» з різними варіантами, вкладеними в основний компонент, який містить кілька елементів, як-от заголовок, зображення, логотипи тощо. У цьому випадку ви використовуєте екземпляр компонента «Кнопка» в основному компоненті.
До оновлення вкладених екземплярів Figma для налаштування конкретного екземпляра в компоненті потрібно було двічі клацнути елемент і сподіватися, що ви виберете правильний.
Однак з останнім оновленням процес стає набагато спрощенішим. Властивість компонента Nested Instances від Figma дозволяє дизайнерам легко вибрати конкретний екземпляр, який вони хочуть налаштувати, не копаючись глибоко в основному компоненті.
Як мені показати вкладені екземпляри?
Щоб відкрити вкладені екземпляри у Figma, ось крок за кроком:
- Розмістіть екземпляр компонента з численними компонентами/примірниками всередині нього з їхніми відповідними варіантами.
- На правій панелі Figma виберіть знак + біля розділу «Властивості» та знайдіть опцію «Вкладені екземпляри».
- Виберіть екземпляри, які ви бажаєте відкрити.
- Після того, як екземпляр відкрито, вибір батьківського компонента відкриє настроюваний екземпляр без копання в екземплярі батьківського компонента.
З вкладеними екземплярами Figma створювати комбінації складних компонентів уже не так складно, як раніше. Редагування властивостей кількох екземплярів компонента в одному компоненті стало простим і ефективним для таких дизайнерів, як ви.
Функція Component Properties у Figma розкрила багато можливостей для дизайнерів; це робить проектування більш керованим і допомагає розчистити робочий простір, організовуючи ваші компоненти.
Тож пропустіть усі непотрібні клацання, уникайте всіх складних компонентів і використовуйте властивості компонентів у своїх проектах уже зараз!