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

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

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

І якщо не знимаючи виділення з варіантів присмотритися на восточну сторону, то там в панелі варіантів припарковалася кнопка комбайна. А якщо виділення слітає, то і комбайн уїжджає і до нас не приїде, поки не буде виділено як мінімум два варіанти, тому що один компонент нам нікуди буде свапати. Він завжди буде таким. А от коли з'являється другий компонент в виборі, тоді справа припарковується кнопка комбайна.

Відділяємо всі чотири, нажимаємо на кнопку і магія з'явилася. Отримали чотири варіанти одного компонента кнопки. Але поки далеко не поїхали, давайте повернемось знову через Ctrl-Z до того моменту, де в нас не було взагалі поки ніяких компонентів. Тут в дірганій стрілочці є третя опція, яка дозволяє одразу створювати варіанти одного компонента, не прибігаючи до комбайну. Нам не треба створювати спочатку мультикомпоненти,

а потім йти десь на востокі в панелі, нажимати кнопку комбайна, і ми можемо одразу створювати варіанти. У спостерігачності вам не відмовишся, в слоях у нас тепер всього один мастер, внутрі якого лежать його варіанти. Іконка цих варіантів нова. Що-то середнє між іконкою самого мастера і його інстансом, пустий ромбік, але тут він не пустий, а йому видали черніло. І, власне, все з цієї коробки витягуємо з зажатим альтом копію якого-небудь варіанту,

а справа в панелі компонентів з'явилась можливість переключатися між варіантами цього компонента. Вибираємо ховер, і кнопка тепер в стані ховера. І правильно ви все розумієте, цих кнопок в макеті може бути скільки бажано, і кожен може вибирати різні варіанти, одного і того ж компонента. Но звіняти бубенцами рано-рано, тому що не все так сладко-гладко може вийти, якщо збирати варіанти з самого нуля. Ми ж взяли цей файлик на фігма-хелпі,

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

і вона знищується, коли в коробці нічого немає, вона не може існувати. Виділяємо всі кнопки і нажимаємо Ctrl-R, щоб прилітало масове переименування. Обзавемо всі ці кнопки кнопками Button, але в цей раз пішли не на три букви, які всі так люблять, а напишемо названня кнопки цілком. Можливо, цією заготовкою будуть користуватися хлопці, які захочуть імпортувати макет в фільгу, а там требування, щоб бутони були підписані шістью буквами.

Нажимаємо на Rename, щоб магія вийшла, всі кнопки переименувались в бутон, а справа припарковався комбайн, тому що у нас виділені самостійні майстери. І комбінуємо варіанти в коробку з варіантами. Названня в слоях скинулись на дефолтні заводські настройки, а справа на востокі з'явилась враження. Нам кажуть, що звичайні називаються однаково. Всі чотири звичайні з однаковим назвою, а це не є добре. Раніше в названнях слоєв присутнівала ієрархія.

Була кнопка, внутрі якої через флеш лежало її стан. І коли обернували варіанти, названня кнопки улетало в названня самого компонента. Було бутон, вона і вийшла. Це бутон. А внутрі вже з'являлися звичайні. Ті самі варіанти — це звичайні. У цьому випадку у нас не було ніякої ієрархії. Названня бутон, яке стояло у кожного слоя, улетіло в названня самого компонента. А внутрі з'явилися дефолтні заводські звичайні.

Не було ніякого названня. Було флеш, не ставили. Після нього нічого не дописували. Тому Фігма сама його поставила і дописала після нього стандартні заводські дефолтні названня для звичайних. А тепер сама на себе ругається. Кажуть, названня цих звичайних — однакові. Ну-ка, давай придумуй різні. Якщо внутрі однієї коробки у вас буде дуже багато різних варіантів і візуально складно зрозуміти, а де ж там конфліктні названня,

то справа на панелі є лінія, яка дозволяє одразу вибрати конфліктні названня. Удобно. Давайте переименовувати по порядку. Виділяємо першу кнопку і двічі щелкаємо по названню, провалюємося в нього і бачимо, що воно якось преобразувалося. Тут внаружі видно тільки значення звичайства, а коли провалюємося, бачимо і саме звичайство. Але щоб 4 рази не печатати одне і те ж, звісно, можна було напечатати і натиснути Ctrl-C,

а потім 3 рази все це вставляти, ми можемо змінити названня самого звичайства в панелі справа. Для цього виділяємо саму коробку і печатаємо названня звичайства. Воно у нас буде, мабуть, статус. Нажимаємо Enter, тепер знову ввалюємося і бачимо, що проперти 1 змінилося на статус. І змінювати всюди тепер не треба. Залишається тільки змінити саме значення цього звичайства у кожній кнопці. Давайте трохи покопуємо і вставляємо.

Скопуємо у нас названня статуса Hover. Можна з двоюточчям, можна без двоюточчя. Те, як обзиваємо тут, так воно буде відображатися в панелі справа, коли ми в випадковому списку будемо тут змінювати одне створення на інше. Якщо вас двоюточчя трохи підбішують, то можете обзивати без них. Проворачуємо те ж саме ще 3 рази. Забираємо названня, провалюємося тут в названня слоя, вставляємо, забираємо Active і те ж саме робимо з Disabled.

Забрали і вставили в названня статус. Рівно Disabled. Проверяємо, витягуємо з зажатим Alt-кнопкою і в панелі справа з'явився статус, який ми можемо змінити. Тут важливо зрозуміти, що потрібно слідити за названнями. Ось в ці випадкові списки буде сворочуватися те, у чого однакові свойства. Тут свойство статус, але якщо десь було по вибаченню інше свойство, напечатане, наприклад, вміст статуса десь був стайл, то будуть проблемки.

Тепер у трьох кнопок одне свойство статус, а у четвертій кнопки цього свойства немає. Він має інше свойство, яке називається стайл. І дивимося, що вийшло. Є одне свойство, в ньому три варіанти, є друге свойство, в ньому один варіант. І щоб оце все між собою подружитися, треба вміст стайла напечатати статус. Тому повертаємося назад, збираємо стайл і печатаємо статус. І тепер буде один випадковий список, в ньому лежать чотири значення.

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

в настройках коробки. Визначаємо коробку і дивимося в праву панель. А тут звичайним перетягуванням вибираємо потрібний порядок. Мені, наприклад, ховер подобається, коли він сверху, під ним десь буде нормал, а дизейбл в самому кінці. Звертаємося до кнопки і відкриваємо випадковий список. Ховер сверху, нормальне стан, якщо нажимаємо кнопку, виходить активне стан, і десь там на дні таблиці є дизейбл. Саму коробку, звичайно, можна передвигати,

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

Для цього потрібно або виділити коробку і справа в трьох соснах поїхати опцію додавання нового варіанту, але так він додається один, а хотілося б якось це оптом все провернути, щоб швидше. А можна використовувати іншу кнопку плюсом, яка з'являється справа знизу і додає ще один варіант, але, як бачите, вони всі однакові, вони дублюють перше стан кнопки. А хотілося б, щоб це було вже зроблено якось по парам,

звичайне стан, наведення, активне і неактивне. А виділимо всі чотири варіанти і нажмемо Ctrl D. Ну от інше справа, в такому випадку не треба знову буде настраювати всі ці оцінки і печатати тут якісь текстовки, а рядом контурні. Для цього провалюємося внутрі, нажимаємо Enter, щоб виділити всю начинку. А далі, щоб трохи часу себе зекономити і не двигати тут щось вручну, запускаємо плагін-квантайзер, котрому говоримо, зроби нам 2 колонки.

І він нам поставився в 2 колонки, але поміняти місцями все одно доведеться, як ви бачите. Виділяємо коробку і з зажатим контуром підтягуємо границі, зробимо якось акуратніше. Залишається тільки навести порядок. Провалюємося внутрі, щоб вибрати всю начинку. Disable сюди, це сюди, Hover, Normal. І тут робимо те ж саме. Disable знизу, Hover сверху, Normal, Active, все. Так як ми Фігму попросили нам з заводу приготовити кнопки,

то свойства у них стандартні. Провалюємося внутрі, тут щось, статус, статус, статус, статус. А значить, потрібно трохи покопувати. А для цього просто копируємо 1, вставляємо, копіруємо 2, вставляємо, копіруємо 3, вставляємо, копіруємо 4, вставляємо. По парам все скопірували, тепер у нас однакові пари. Всім цим кнопкам тепер треба додати нове свойство. Одне у них вже є, це статус, Hover, Normal, Active, Disabled.

А тепер треба додати друге. І це буде стиль кнопки. Або залита кнопка, або контурна. А передові, звичайно, це все треба зобразити. Ну і найпростіший спосіб для нормального і стояння по наведенню нажати Shift-X, тільки зробити обводку потужнішою, а то вона якась злишком здихлить безмеротна. А ось тут зробимо, наприклад, 4 пікселя. А залишаємо чорним, щоб було видно. Тут є ще темна тема, а ми про це трохи пізніше поговоримо.

Визначаємо коробку, натискаємо Enter, щоб провалитися внутрі і визначити всі кнопки, а далі натискаємо Ctrl-R і викликаємо на допомогу масове переименування. Усе, що у нас вже було в назвах, воно повинно зберігатися, інакше послітають всі свойства. Тому в Rename ставимо CurrentName, тобто текуще названня залишаємо. А далі через запятую печатаємо нове свойство. Це буде стиль. Стиль кнопок рівно. А далі, якби я цю заготовку робив лише для себе,

і її ніхто більше не використовував, то я б написав ось так, Field, тобто залита кольором кнопка. А другу пару кнопок переименував би в Stroked. Stroked. Тобто контурні кнопки. Мені ці названня, Field і Stroked, коли ближче, тому що якщо робити по феншую, то тут треба печатати ось так. Primary кнопка. Якщо робити супер правильно, прямо взагалі по методичці по феншую на велику аудиторію, то головні кнопки обзивають Primary.

Суперстепенні — Secondary. Треті степенні — Secondary. Але мені такі названня взагалі візуально не подобаються, тому для себе я би переименував. Але так як ми робимо заготовку на велику аудиторію, давайте вже зробимо все правильно. І, до речі, все-таки тут буде не Style, а Type. Тип. Це тип кнопки. Тип кнопки — Primary. Ну просто хто придумав, що головна кнопка обов'язково має бути залита кольором, бо головна кнопка може бути теж контурна.

Мені було б зрозуміло і Field, і Stroked. Нажимаємо і бачимо, що магія відбулась. Тут є перше звичайство — статус, а біля нього з'явилося друге звичайство — тип кнопки. Залишається тільки змінити значення у другій парі кнопок. Визначаємо їх. Нажимаємо Ctrl-R. Знову заходимо в масове переименування, але зараз ми будемо переименувати тільки кнопки в правому столбі. Тут нам треба знайти те, що ми хочемо змінити.

Пишемо Primary. А тут на що ми це робити будемо змінювати? Secondary. Нажимаємо Rename. Тепер по парам готові кнопки. Визначаємо кнопку і бачимо, дійсно з'явився другий випадковий список, в якому можна вибрати тип кнопки. А в першому по-прежньому вибираємо статус. Добре було цих кнопок ще зберігати ієрархію. Ось це друге звичайство — тип. Воно по кар'єрній лістниці багато вище, ніж якийсь там статус. Тому класно було б зробити звичайство — тип,

вище, ніж статус. До речі, статус з маленькою буквою мені більше подобається. Давайте напишемо. Ось. А щоб змінювати ієрархію, треба просто взяти і перетащити, як ми це робимо в своях, або в панелі з заливками, з обводками. Взяли і перетащили. І тепер вибираємо спочатку тип кнопки, а потім її статус. Ієрархія зберігана. Якщо хтось не встиг за ходом класних думок, то в настройках коробки визначаємо коробку, ми можемо змінювати положення,

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

а коробку поставимо ось так, і зробимо її подлинніше. Визначаємо коробку, нажимаємо Enter, щоб провалитися внутрі, і з зажатим Alt всі ці кнопки перетягуємо в бік. Прямо внутрі коробки робимо копію. Залишається візуально усе це діло якось настроювати. Копіруємо звичайність через Ctrl-Alt-C, визначаємо два прямоугольника і вставляємо через Ctrl-Alt-V. Тексти, звісно, будуть білими. А синій цвіт треба зробити трохи заметнішим,

тому що кнопка навіть вдавлена, все одно повинна бути заметна, щоб ви бачили, що ми нажимаємо, тут хороший контраст, а тут контраст втратився. І от вам в придачу в плечі ще один класний плагін, який називається Cover Compass, це класний плагін, який дозволяє підбирати збільшуючіся відтілення. Зробимо активне становлення по-замітніше, наприклад, отаке. Хоча б таке, але воно все-таки буде заметніше. І тут зробимо отак,

заберемо цей цвіт і в контур його додамо. Ну а ховер, по ідеї, заметен, пусть залишається таким. Все одно всі ці цвіти в проєктах будуть перекрашуватися, бо яка можливість того, що в проєкті точно такий синій цвіт. І тепер проворачуємо все те ж саме, що і в минулий раз. Виділяємо коробку, нажимаємо Enter, щоб провалитися внутрі і виділити всю начинку, і жмемо Ctrl-R, призиваючи на допомогу масове переименування.

Знизу ставимо CurrentName, те, що ми печатали раніше, нас повністю влаштовує, і воно нікуди не має з'їздити. А далі через запятую печатаємо нове третє свойство, яке обзовемо, наприклад, отак, DarkMode. Поставимо рівно, і тут напечатаємо його значення. А значення буде On, темний режим включений. Нажимаємо Rename, і бачимо, що, так, з'явилося третє свойство, але нас чекає вибір, тому що зараз це третє свойство везде однаково,

нам кажуть, потрібна якась різниця. Тому виділяємо начинку, яка знаходиться з правої сторони. І жмемо знову Ctrl-R, щоб прилетіло масове переименування. Зверху пишемо On, те, що ми хочемо замінити. Тут, ось слева, нас On повністю влаштовує, а в правих кнопках нам потрібно написати Off. Там було включено, а тут буде значення Виключено. Нажимаємо на Rename, і бачимо, що з'явилося у кнопці. А тут прямо нарядно стало,

похорошело, зацініть, і з'явився ползунок, який дозволяє переключати значення свойств. Якщо тут нам потрібно було вибрати в випадаючому списку, то тут з'явився ползунок. Давайте виберемо статус Disabled, тому що він точно відрізняється, і бачимо, вмикається чи темний режим, і вмикається чи зверху. Так, все працює, і так багато удобніше виключити, включити, швидше, не треба провалюватися в випадаючий список, і щось там вибирати.

А ще я зумів, що в слові «Мама» п'ять випадків. На жаль, опечатався, але це достатньо швидко поправити, якщо ви владієте масовим переименуванням. Визначаємо коробку, йдемо ось сюди, копуємо усе це. Знову визначаємо коробку, нажимаємо Enter, щоб провалитися внутрі, і виділити всю начинку. Нажимаємо Ctrl-R, щоб прилетіло масове переименування, зверху вставляємо те, що скопували трохи раніше, а знизу печатаємо правильно «секондарі».

Окей, ренейм'ємо, і дивимося, що в нас. Все, починили, там, де була якась біліберда, підтягнулась нормальне, адекватне «секондарі». Так от, відкуди ж з'явився такий магічний світчер? Якщо у значенні звичайства ви напишете шість от таких от слов, то вони дозволяють підтягнути місце випадаючого списка. Світчер. «Оф» — це «виключити», «он» — «зверху Ситуєвину включити», «ноу» — це «ні», а «зверху Ситуєвину — так»,

а «фолс» — «зверху Ситуєвину — так». Це не правда, а це правда. Наскільки я знаю, тільки ці пари працюють для світчера, по-моєму, четвертий ніякий поки ще не завезли, але цього достатньо. І правильно ви розумієте, чим більше внутрі коробки буде різної начинки, тим краще запутатися. І от, бачите, вибачте, я вже десь запутався. Так як переименування було через столби, то і відслідити все гораздо проще через столби.

Здесь «он» включено, а має бути виключено. Здесь теж, значить, в цих двох столбах треба поміняти «он» на «офф». Нажимаємо Ctrl-R, зверху ставимо «он», знизу пишемо «офф». Все, здесь підчинили. Бачимо далі. Здесь «офф», а має бути темна тема включена. І здесь включено, а, значить, залишилося тільки здесь включити. Говоримо «виключене», «включі». Все, тепер все підчинили, і вбивків в коробці більше немає. Визначаємо не потрібні,

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

Провалюємося внутрі, тискаємо «Ентер», визначається вся начинка, і ось це заводське дефолтне названня через масове переименування будемо змінювати. Підтримуємо ієрархію, і для початку треба визначити тип. А що же перед нами? Чекбокс або радіокнопка? Тому перше звичайство буде тип. Чекбокс. Потім зміняємо чекбокс на радіокнопку у другій парі. Далі через запитую потрібно придумати друге звичайство, а воно буде відповідати за активність.

Є галочка, вибрана радіокнопка або ні. Тому так і пишемо «Актив». І ставимо «Он». Включена галочка або радіокнопка, активна вона або ні. І через запитую залишається розбиратися з третєм звичайством, яке відповідає за доступність цих кнопок. Вони або доступні, і ми можемо тискати, або недоступні на зв'язок не виходять. А значить так і пишемо «Енейбл». І ставимо «Єс». І от вам лайфхак. А як же без лайфхаков? Ми же потім через масове переименування

будемо включати звертну сіту Йовіну. Якщо «Он», то «Оф», якщо «Єс», то «Но». І якщо напишемо і тут «Он», і там «Он», то коли в масовому переименуванні ми виберемо тут «Он», щоб поміняти на «Оф», то вибереться і одне, і друге, а це не завжди нам підійде. Тому якщо ви одразу, за один раз, намагаєтесь підтягнути багато різних звичайств, які відповідають за ползунки, використовуйтеся різними варіантами. Тут «Он», «Оф», тут «Єс», «Но».

Потім, якщо ще третій варіант потрібен, пишіть «Тру» або «Фолс». Ну а ми, здається, приїхали. Так, здається, все як треба. Тепер вибираємо радіокнопки, нажимаємо масове переименування і говоримо, що ти радіокнопка не чекбокс, а радіо. І якщо тут написати «Баттон», то у кнопці «Баттон» є ось ця предательна «Он», яка потім наставляє палки в колеса. Нажимаємо «Ренейм» і дивимося, чи з'явилися радіокнопки справа,

чи є чекбокси слева. Розбираємося зі другою частиною. Це активність, тобто є галочка, або виборона радіокнопка. Тобто нам треба вибрати те, де немає галочки, або радіокнопка пуста. Нажимаємо «Контрол-Р» і зміняємо включене на виключене. Краса. І залишається тільки зафіксувати третє звичайство, через яке, поки є вибори. У нас тут все доступно, але насправді ці сері не доступні. Ми не можемо нажати або вибрати. Тобто нажимаємо «Контрол-Р» і зміняємо «Єс» на «Но».

Вибір знищився, всі варіанти змінилися. Витягуємо і перевіряємо. Перед нами чекбокс, а зараз радіо. Активна, тобто виборона. Або неактивна. Доступна, ми можемо вибрати. Або недоступна. Цей файл я обновлюю на фігмахелпі, і хто використовувався цими заготовками, для вас вони будуть тепер ще більш нарядними. А хто не використовувався, як мінімум чекбокси-радіокнопки зустрічаються в кожному проєкті. Забирайте і використовуйтесь.