21-22 червня у Сан-Франциско відбулася глобальна конференція компанії Figma — Config 2023. На ній були представлені оновлення, які компанія впровадила у свій продукт. То ж давай подивимось, що там!

Режим розробника

Figma представила новий робочий простір під назвою Dev Mode, створений спеціально для розробників. Він включає кілька функцій, які допомагають подолати розрив між дизайном і розробкою.

По суті, це — робочий простір у Figma, призначений для задоволення потреб розробників і спрямований на те, щоб вони почувалися як вдома на платформі. Figma традиційно розглядалася як інструмент проєктування, і з появою Dev Mode Figma прагне подолати розрив між дизайном і розробкою.

Режим Dev наразі знаходиться в бета-версії та доступний безкоштовно для всіх користувачів до кінця 2023 року.

Підключення до інструментів і кодової бази

За допомогою режиму Dev розробники можуть легко інтегрувати свої існуючі інструменти та кодові бази, зокрема такі як Jira, GitHub і Storybook. Це забезпечує більш спрощений робочий процес для продуктових команд.

Трекінг того, що готово до розробки

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

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

Figma Visual Studio Code

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

Розширення Figma для VS Code дозволяє переміщатися та перевіряти файли дизайну, співпрацювати з дизайнерами, відстежувати зміни та пришвидшувати впровадження дизайну. Використовувати розширення Figma for VS Code зручно, щоб:

• переглядати коментарі та дії, відповідати на них у реальному часі;
• отримувати пропозиції коду на основі дизайну;
• пов’язати файли коду з компонентами дизайну.

Змінні

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

1. Підтримка псевдонімів у змінних
   Ця функція надає більш контекстно-орієнтоване використання змінних, полегшуючи їх розуміння та створення всією командою. Псевдонім дозволяє створити інше ім’я (псевдонім) для змінної, що може бути корисним, коли те саме значення може посилатися різними способами в межах проєкту.
   
   Наприклад: у тебе може бути основний колір бренду, який у деяких місцях використовується як колір фону, а в інших — як колір рамки. Замість того, щоб створювати окремі змінні для кожного з них, ти можеш створити одну змінну для значення кольору, а потім створити псевдоніми, як-от «колір фону» або «колір межі», які посилаються на вихідну змінну. Таким чином, якщо колір бренду зміниться, тобі потрібно лише оновити оригінальну змінну, і всі псевдоніми відображатимуть зміни.
   
2. Підтримка огляду в змінних
   У контексті систем проєктування область може бути окремим проєктом, окремою сторінкою в проєкті або навіть одним компонентом. Визначення області допомагає керувати складністю систем проектування, пояснюючи, де застосована змінна.
   
   Наприклад, у вас може бути змінна, яка визначає колір заповнення, який зазвичай використовується у всьому вашому дизайні. Це може бути глобальна змінна області видимості. Але в межах певного компонента вам може знадобитися інший колір заповнення. Ви можете визначити нову змінну з таким же ім’ям, але з обмеженням лише для цього компонента. Коли ви посилаєтеся на змінну padding у цьому компоненті, вона використовує значення області компонента. Якщо ви посилаєтеся на змінну padding деінде, вона використовує глобальне значення.
   
3. Змінні режими з різними значеннями
   Використовуючи режими змінних у Figma, ти можеш визначити набори змінних для кожної теми.
   
   Наприклад, у тебе можуть бути змінні кольору для світлої теми, наприклад light-backgroundі light-text, і відповідні змінні для темної теми, як-от dark-backgroundі dark-text. Ці змінні не обмежуються лише кольорами, вони також можуть містити інші елементи дизайну, такі як типографіка, інтервали або логічні значення, які керують відображенням певних елементів.
   
   Після визначення цих пов’язаних із темою змінних ти можеш легко перемикатися між темами у своєму дизайні, просто перемикаючи режим змінних.
   

Підтримка плагінів і REST API

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

Підтримка REST API дозволяє інтегрувати проектні дані Figma з іншими системами через інтерфейс прикладного програмування (API). Це означає, що до змінних у Figma можна отримати доступ і керувати ними програмно поза межами програми, а також зовнішні дані можна використовувати для оновлення змінних у Figma.

Розширене прототипування

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

• Змінні в прототипуванні можуть містити такі значення як числа, текст, кольори або логічні значення (true/false). Ці значення можна використовувати у прототипі для створення більш динамічних взаємодій. Наприклад, змінна може містити підрахунок того, скільки разів було натиснуто кнопку, або зберігати поточний стан перемикача.
• Умови дозволяють створювати логіку у прототипах. Можна вказати різні дії або результати на основі поточного значення змінної. Наприклад, у тебе може бути правило, яке говорить: «Якщо кнопку натиснуто більше 5 разів, перейдіть на інший екран».
• Вирази дозволяють виконувати обчислення або перетворення змінних. Наприклад, ти можеш збільшувати змінну лічильника щоразу, коли натискаєш кнопку, або обчислювати новий колір на основі введення користувача.

Редагування в контексті та вбудований попередній перегляд

Традиційно дизайнерам доводиться перемикатися між різними видами або режимами, щоб внести зміни в дизайн, а потім переглянути, як ці зміни виглядатимуть у прототипі. Це може бути трудомістким процесом, особливо під час ітерації дизайну на основі відгуків або тестування.

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

Покращена авто-лейаутів

Функція авто-лейауту тепер дозволяє елементам реагувати на розмір контейнера.

• Wrap по суті дозволяє елементам дизайну заповнювати простір як текст. Якщо у тебе є група елементів, розташованих горизонтально, і група стає занадто широкою для кадру, елементи автоматично «переносяться» на наступний рядок. Це особливо корисно під час розробки компонентів, які потрібно адаптувати до різної кількості вмісту чи розмірів екрана, як-от теги в списку тегів або елементи в сітці.
• Мінімальна або максимальна висота/ширина допомагає підтримувати послідовність і цілісність дизайну. Визначивши ці обмеження, ти можеш гарантувати, що елемент ніколи не стане занадто малим (що може зробити його нечитабельним або неможливим для клацання) або занадто великим (що може порушити макет або накластися на інші елементи), незалежно від вмісту або розміру екрану, на якому він переглядається.

Оновлений засіб вибору шрифтів

Новий удосконалений засіб вибору шрифтів дає змогу дизайнерам знаходити ідеальний шрифт швидше та легше:

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

Оновлення файлового браузера

Оновлення дозволяє користувачам швидко знаходити файли чи проєкти, використовуючи певні ключові слова чи фрази. Це особливо корисно під час роботи з великою кількістю проєктів у Figma.

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

Крім того, є новий розділ «Спільні файли». Це спеціальний простір, де групуються всі файли та проекти, до яких надали користувачеві зовнішні команди.

Отже, оновлення дійсно варті того, щоб зробити свій вибір у пользу Figma, якщо ти його ще не зробив 😉 Вдалих тобі проєктів!