Figma Make отримує панель властивостей та анотації для візуального редагування коду

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

Панель властивостей для візуальних змін

Панель властивостей інтегрує знайомі елементи керування з Figma Design, такі як налаштування інтервалів, типографіки та макета, безпосередньо в Make. Вона призначена для детальних візуальних змін. Користувачі можуть експериментувати з різними відступами, радіусами кутів, товщиною шрифтів та переставляти елементи шляхом перетягування.

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

Наразі панель властивостей використовує токени кольорів та типографіки, вже визначені в кодовій базі. З майбутнім впровадженням Code Connect, Make також буде пов'язуватися з компонентами Figma Design, забезпечуючи узгодженість між дизайном та кодом.

Анотації для контексту та точності

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

Щоб скористатися анотаціями, потрібно вибрати "Annotate for agent" на панелі інструментів, позначити області фокусування на полотні та описати бажані оновлення. Наприклад, можна вказати: "при наведенні курсору на цю мініатюру, нехай вона трохи збільшується", "зробити так, щоб ця кнопка з'являлася після затримки 300 мс" або "додати тонкий ефект натискання при торканні цієї кнопки". Агент зчитує позначений контекст і застосовує зміни до всіх вибраних елементів у коді.

Ефективне використання кредитів

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

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

Доступність та сумісність

Панель властивостей та анотації вже впроваджуються та будуть доступні для всіх користувачів та планів у Figma Make. Обидві функції споживатимуть кредити. Важливо зазначити, що панель властивостей працює лише з новими дизайнами Make; раніше створені дизайни продовжуватимуть використовувати старий інструмент редагування. Подібний досвід редагування незабаром з'явиться і для шарів коду, дозволяючи працювати з кодом безпосередньо на полотні Figma.

Що це означає для розробників

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

Ключові факти

• Figma Make представила панель властивостей та анотації.

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

• Панель властивостей інтегрує елементи керування Figma Design (інтервали, типографіка, макет) для візуальних змін.

• Анотації дозволяють надавати контекст агенту для змін, що виходять за межі візуальних властивостей (взаємодії, анімації).

• Пряме маніпулювання (панель властивостей, анотації) споживає менше токенів та є швидшим, ніж текстові запити.

Джерела

• A properties panel and annotations, now in Figma Make