Top.Mail.Ru

Наш подход бустит продажи. Вы платите за результат!

Заказать звонок
Телефон отдела продаж:
8 (800) 775-16-41
Наш e-mail:
mail@texterra.ru
Заказать услугу
Очень большое обновление Figma – экспресс-тест Редакция «Текстерры»
Редакция «Текстерры»

Переосмысление дизайна и разработки” — с таким лозунгом было представлено свежее обновление Figma 21 июня 2023 года на конференции Config 2023.

Hello, Dev Mode!

Dev Mode или режим разработчика позволяет по щелчку тумблера включить пространство, которое упрощает переход от проектирования к разработке.

Обновленный режим Inspect

Режим Inspect

Новый Inspect позволяет просматривать размеры и стили, а также получать готовый код.

При помощи таких плагинов как Anima и Figma to Code появилась возможность сразу получить код в разных вариациях:

  • Стандартный HTML код;
  • CSS стили;
  • Код для TailwindCSS;
  • Код для Flutter;
  • Код для SwiftUI (среда для разработки на iOS, iPadOS, watchOS, tvOS и macOS от Apple);
  • Код React (JSX);
  • Код TypeScript (TSX)
React код

Более того, готовый код можно сразу открыть в песочнице или скачать к себе на компьютер в виде архива, внутри которого лежит готовый темплейт. Нужно просто открыть его в своем редакторе кода.

Кнопки песочницы и загрузки

Область применения и потенциал функции поражает, но не стоит поддаваться излишней радости (хотя и очень хочется), ведь Dev Mode находится в бете и работает не всегда корректно. Результат зачастую нужно редактировать, если не переделывать заново. Но потенциал огромен.

Функционал Dev Mode уже доступен всем желающим. Пощупать его можно в демо-файле.

Продвинем ваш бизнес
Подробнее

Статусы

Auto Layout

Статус показывает, какие кадры «готовы к разработке». Вдобавок появилась система контроля версий, благодаря которой можно видеть различия между измененными компонентами, а также кто и когда внес изменения.

Новый Auto Layout

Появились две функции: Wrap и Max/Min. Их принцип довольно прост. Wrap позволяет переносить элементы списка на следующую строку. Max/Min позволяет устанавливать максимальное/минимальное значение ширины/высоты родительского блока, а дочерние элементы будут подстраиваться автоматически. Пощупать функцию можно также в демке.

Наконец-то! Превью шрифтов!

Превью шрифтов

Отсутствие превью бесило до коликов, но наконец-то появился предварительный просмотр шрифтов, улучшенный поиск и фильтры. Аллилуйя!

Плагин для VSCode

Figma для VS Code позволяет перемещаться по файлам дизайн-макета, просматривать их и отслеживать изменения — и все это, не выходя из текстового редактора.

Плагин Figma для VSCode

Искусственный интеллект

Figma купила компанию Diaram и пообещала в ближайшее время поведать, как же все-таки AI будет интегрирован в программу. Но уже сейчас известно, что взаимодействие с нейросетью будет осуществляться посредством промптов.

Читайте также:

Как работает нейросеть Firefly в Photoshop? Фантастически!

«Туту.ру» сменил логотип: дизайнеры оценили и удивились

Все о типографике: откуда берутся шрифты и как их используют бренды

Поделиться статьей:

Новое на сайте

13 июн 2024
79 796
10 лучших сервисов для отправки пушей в 2024 году

Инструкция по настройке (и увеличению продаж!).

13 июн 2024
428
США запретили свое ПО в России! Но это совсем не страшно

Мы собрали список действующего ПО, которое все заменит.

Смотреть все статьи

У вас есть деловой запрос? Давайте обсудим!

Оставьте свои контакты, мы свяжемся с вами в ближайшее время.

Нажимая на кнопку «Оставить заявку», вы подтверждаете свое согласие на обработку пользовательских данных

Спасибо!

Ваша заявка принята. Мы свяжемся с вами в ближайшее время.