Як створювати дизайн за допомогою Auto Layout та Variants у Figma

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Всім, привіт. Мене звати Олена Шевченко і я Senior UI/UX Developer у компанії Svitla Systems. Сьогодні я б хотіла розповісти про створення дизайну за допомогою інструментів Auto Layout та Variants у Figma та завдяки чому Figma вважається крутим інструментом.

Офіційний запуск Figma відбувся у 2015 році. Тоді фінансування компанії збільшилося до 18 мільйонів доларів. Найбільшою проблемою, яку намагалися вирішити її співзасновник Ділан Філд та директорка Еван Уоллес, було забезпечення легкого доступу до системи для дизайнерів та команд, з якими вони співпрацюють. Роль дизайнера поступово ставала більш кросфункціональною. Займаючи центральні позиції в організації, дизайнерам потрібно було знайти спосіб ділитися своїми напрацюваннями з іншими дизайнерами, вносити правки в маркетингові макети та співпрацювати з командами розробників на більш ефективному рівні. Такого інструмента на той час не існувало. Впродовж наступних шести років Figma значно просунулася в дизайні та хмарних технологіях і змогла отримати фінансування у 2.05 мільярдів доларів. Відтоді ситуація почала стабільно покращуватись.

Figma дійсно допомагає покращити життя дизайнерів. На підтвердження цих слів, я поділюсь з вами прийомами, які я розробила саме завдяки Figma.

Спочатку давайте розберемося з Auto Layout та його можливостями. Для того, щоб створити Auto Layout, потрібно створити фрейм для будь-якого елемента, який ви спроектували. Наприклад, для рядка тексту.

Тут фреймінг працює як контейнер, який огортає елемент і може бути використаний для інших Auto Layout властивостей.

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

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

Як створити адаптивні компоненти за допомогою Auto Layout

Коли ми говоримо про застосування Auto Layout з компонентом та його адаптивність, ми маємо на увазі, що він містить, так би мовити, батьківський та дочірній елементи. Властивості батьківських елементів впливають на поведінку дочірніх. Наприклад, «упаковані» об’єкти у фреймі будуть групуватись. Такий прийом можна використовувати для вирівнювання об’єктів та тримання їх якомога ближче один до одного.

«Інтервал між» об’єктами у фреймі матиме однаковий інтервал між ними.

Щоб збільшити кнопку або зменшити її, просто потягніть за край компонента. Елементи всередині автоматично адаптуватимуться до його ширини та висоти. Змінення розміру можна застосувати до об’єктів на осі X та Y вручну або за допомогою панелі налаштувань.

Подібно до батьківського і дочірнього елементів всередині одного компонента, група компонентів буде мати таку ж саму структуру, але всередині фреймів.

Об’єкти в Auto Layout фреймі, для якого встановлено значення «Заливка контейнера», розтягуються до ширини та/або висоти свого батьківського фрейма. За допомогою цих властивостей, ви можете контролювати кожну зміну розміру в групі компонентів та інших частинах UI сторінок.

Зверніть увагу, що під час створення Auto Layout з кількома фреймами, важливо встановити значення «Заливка контейнера» (дивіться приклад нижче) для кожного фрейму, щоб сторінки стали повністю адаптивними.

Атомарний дизайн та чому саме він підходить для створення Variants у Figma

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

Так само як молекули складаються з менших частин, атомів, атоми являють собою найменші HTML елементи як-от лейбли, поля введення, кнопки та інше. Їх не можна розбивати на дрібніші компоненти, тому що вони втратять свою функціональність.

Молекули допомагають простим групам атомів функціонувати разом як одне ціле. Наприклад, лейбл форми, текстова область, поле введення та кнопка об’єднуються разом в одну молекулу.

Організми — це UI компоненти, що складаються з груп молекул та/або атомів та/або інших організмів.

Шаблони будуються, в основному, з усіх згаданих вище частин у «вайрфреймовому» стилi. Іншими словами, шаблони утворюють каскади майбутніх UI сторінок.

Сторінки — готові дизайнерські макети, які пройшли всі зазначені вище етапи.

Загалом атомарний дизайн дає безліч переваг, але я хотіла б виділити ось ці:

● Розбиваючи організми (компоненти дизайну) на базові атоми, ви можете їх легко змінювати, оновлювати, поєднувати, змішувати або зіставляти.

● Завдяки Атомарному дизайну, можна використовувати узгоджені компоненти протягом усього проекту, швидко та продуктивно управляючи вмістом.

● Маючи бібліотеку дизайну з атомами, молекулами та організмами, створення прототипу значно пришвидшується.

● Як і при прототипуванні, оновлювати частини проекту стає простіше, тому що ви можете бачити модулі та структуру файлів проекту.

Тепер давайте створимо панель застосунка Google Drive і розділимо її на атоми, молекули та організми.

Уявімо, що вам потрібно застосувати інший набір іконок та замінити їх або спробувати інший логотип. Variants у Figma створені саме для таких завдань. Variants є групами компонентів, які допомагають отримати різні варіанти для одного і того ж компонента, зберігаючи його в одному місці. Ви можете використовувати їх з атомами для станів «контролю» та встановлювати стани «дефолт», «ховер» або «активний». Інший спосіб використання Variants — змінити стиль або застосувати інші властивості для атомів: колір, заливка, обведення тощо.

Останнє, але не менш важливе, можна замінити цілі фрагменти інтерфейсу, змінюючи структуру дизайнів або різні частини макету.

Давайте побудуємо тепер групу атомів, молекул та організмів, використовуючи Variants у Figma. Спочатку створіть компоненти, потім виділіть їх та об’єднайте у Variants.

Коли все буде готово, ви отримаєте доступ до всіх варіантів з локальної бібліотеки документів.

Більш того, ви можете оновити деталі всередині цих компонентів. Для цього можна або змінити основний компонент, тоді нові властивості будуть застосовані до всіх його варіантів, або скористатись Variants — тобто додати новий головний компонент до групи Variants, призначити йому конкретні атрибути або створити нові. На це знадобиться чимало часу, але я розповім, як спростити процес.

Як швидко оновлювати, змінювати та виправляти дизайни у Figma

Скажімо, вам не потрібно створювати щось нове, оскільки ви задоволені тим, що маєте, допоки не зрозумієте, що щось пропустили. Щоб зберегти атом з усіма його атрибутами та змінити лише його вміст, застосуйте комбінацію cmd + X всередині фрейму з новим вмістом, двічі клацніть на фреймі всередині варіанта та вставте новий вміст. Тепер можна видалити старий вміст і зберегти всі властивості з оновленнями всередині.

Створення гнучких інтерфейсів, які можуть адаптуватися до різних розмірів екрану

Коли всі організми на сторінці готові, перевірте чи встановлено для них значення «Заливка контейнера» (про це згадувалося раніше). Тепер давайте адаптуємо всі організми до різних розмірів екрану.

Припустімо, у нас є маленький, великий та надвеликий екрани з розмірами 1024×768px, 1440×900px та 1920×1080px. Вам знадобляться три Auto Layout екрани, які й будуть варіантами, і кожен з них матиме Auto Layout фрейм всередині зі значенням «Заливка контейнера» для ширини та висоти.

Тепер оберемо потрібну сторінку зі списку на правій панелі. У нас це сторінка Google Drive.

Вона адаптується до найменшого розміру екрану, а всі UI компоненти стануть гнучкими! Компоненти будуть збільшуватися або зменшуватися, навіть якщо контрольні точки (breakpoints) плаваючі.

Підсумовуючи, можна із впевненістю сказати, що Figma стала одним з найпопулярніших інструментів для командної роботи та дизайну. Щоб дійсно вивести робочий процес на інший рівень, варто опанувати Groups, Constraints, Auto Layout, Variants, адже це тi технiки, які допоможуть вам працювати ефективніше та заощадити неймовірну кількість зусиль!