Эта статья — перевод оригинальной статьи "Making Figma better for developers with Dev Mode".

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Как инструмент проектирования может работать лучше для разработчиков? Этот вопрос мы задаем себе и нашему сообществу. Сегодня мы рады представить Dev Mode - новое рабочее пространство в Figma, созданное для того, чтобы разработчики получали то, что им нужно, когда им это нужно, используя инструменты, которые они используют каждый день.

Figma родилась в вебе - нетрадиционное начало для инструмента проектирования, но мы чувствовали, что он крайне необходим дизайну продуктов. С помощью одной единственной ссылки дизайнеры могли сотрудничать над текущей работой, обмениваться ранними наработками, а не беречь дизайн до тех пор, пока он не будет "отшлифован". По мере того, как все больше дизайнеров осваивали Figma и этот многопользовательский способ работы, мы начали наблюдать естественное расширение использования в различных командах и дисциплинах, особенно среди разработчиков.

Сегодня мы знаем, что на наших платных тарифных планах Figma посещают больше разработчиков, чем дизайнеров. Мы также знаем, что понимание потребностей разработчиков и их проблем имеет решающее значение для превращения Figma в место, где разработка продукта может быть более эффективной, совместной и выразительной.

Разработчики имеют уникальные рабочие процессы и предпочтения. От front-end разработчиков, работающих со зрелыми системами дизайна, до инженеров, создающих компоненты систем дизайна, до тех, кто создает макеты контента и экспортирует ресурсы в своей работе с бренд-дизайнерами, - каждая команда хочет работать с минимальными ограничениями, насколько это возможно.

В режиме Dev Mode мы видим огромную возможность быстро и эффективно предоставлять разработчикам то, что им нужно - точно так же, как это было с дизайнерами, когда мы только приступили к созданию Figma. Чем проще командам проектировать, документировать, находить и реализовывать высокоточные проекты, не теряя при этом из виду работу и друг друга, тем лучше результат продукта. Мы рады сделать этот первый шаг к объединению проектирования и разработки в Figma, и нам не терпится увидеть, что команды будут делать дальше.

Быстрее приступайте к кодингу

Хотя Figma отлично подходит для свободного исследования дизайна, она может сбить с толку, если вы попали в файл дизайна, в котором отсутствует информация, необходимая для реализации. Режим Dev Mode - это как инспектор браузера для вашего файла дизайна, он приближает концепции дизайна - формы, слои и группы - к концепциям разработчика, таким как код, иконки и маркеры. Наведя курсор и щелкнув по холсту Figma, вы можете найти и экспортировать всю необходимую информацию, такую как измерения, спецификации и активы, а также раскрыть дополнительный контекст вашей системы проектирования. Подобно Chrome Dev Tools, Dev Mode черпает вдохновение из других инструментов разработки, чтобы создать среду, которая сразу же станет для вас привычной.

Код в режиме Dev Mode полностью переработан и настраивается под тот язык, на котором вы работаете. Мы знаем, что код не является полезным из коробки. Скорее, он является отправной точкой, чтобы вам не приходилось каждый раз переходить от 0 к 1. Теперь вы увидите боксовую модель CSS, современный синтаксис с древовидным представлением, а также сможете переключаться между единицами измерения, чтобы соответствовать вашей кодовой базе.

Доступ ко всему, что вам нужно, в одном месте

Создание продуктов требует надежного набора инструментов, но прыжки между библиотеками дизайна, базой кода и другими инструментами управления проектами могут привести к неэффективности, особенно когда названия компонентов и стилей не совпадают с названиями в коде, или команда не отслеживает и не документирует задачи. Dev Mode призван сделать вашу работу более продуктивной, связав используемые вами инструменты и компоненты кода с файлом дизайна.

Плагины позволяют расширить функциональность Figma, чтобы адаптировать ее к тому, как работает ваша команда. Вы можете управлять проектами с помощью Jira, Linear и GitHub, чтобы вы и ваш дизайнер знали, что происходит в ваших соответствующих процессах. Storybook поможет вам сослаться на то, что происходит в вашей кодовой базе, в контексте самого дизайна. А плагины codegen от AWS Amplify Studio, Google Relay и Anima помогут вам настроить вывод кода - вы даже можете создать свой собственный на основе вашего уникального рабочего процесса.

Очень полезно иметь плагины, которые взаимодействуют с нашими повседневными инструментами. Мы используем GitHub, мы используем Storybook - это экономит мне много времени.

Лоран Тьебо, руководитель инженерного отдела и ведущий специалист по системам проектирования, Decathlon (часть бета-версии Dev Mode)

Системы проектирования становятся более мощными с введением токенов проектирования через переменные. Токены - это маленькие кусочки данных пользовательского интерфейса, которые можно использовать в дизайне и коде. Теперь они отображаются в режиме Dev Mode, так что сразу становится ясно, что нужно для начала разработки. Вы также можете добавить связанные ссылки на объекты на холсте, чтобы ссылаться на документацию или на то, что находится в ваших плагинах.

Отслеживайте, что должно быть отправлено в разработку

Даже если этапы проектирования и разработки продукта сливаются воедино, артефакты каждой из них - файлы дизайна и код - остаются разными. До сих пор было непросто перемещаться по файлам дизайна, выбирать конкретные компоненты и их свойства или даже знать, что изменилось с момента последнего просмотра файла. Теперь дизайнеры могут просто пометить раздел как "готовый к разработке" и отправить его вам напрямую, не создавая отдельную страницу или файл. Поддержка Diff позволяет сравнивать изменения между различными версиями фрейма и всегда оставаться в курсе событий.

Расширьте свой рабочий процесс

С помощью расширения VS Code вы можете использовать возможности режима Dev Mode в редакторе кода для просмотра дизайна, уведомлений и комментариев, а также для отслеживания изменений, не выходя из среды разработки. Расширение VS Code также выполняет автокомлит стро кода на основе просматриваемого дизайна, помогая вам работать намного быстрее.

Dev Mode и Figma для VS Code находятся в бета-версии и бесплатны для всех пользователей до конца 2023 года. Начиная с 2024 года, для доступа к Dev Mode вам потребуется платный тарифный план. Если вы являетесь редактором на платном тарифном плане сегодня, Dev Mode будет включен. Мы знаем, что есть разработчики, которым может не понадобиться полный набор функций Figma, поэтому мы вводим два новых варианта тарифного плана для них.

Гораздо выше уровень доверия, когда люди работают с одним и тем же инструментом - информация гораздо более актуальна, вы больше не тянете какие-то файлы на свой компьютер и не гоняетесь за чем-то по электронной почте. Это гораздо более совместный процесс.

Джори Лалло, соучредитель, Linear

Это только первый шаг в улучшении Figma для разработчиков. С учетом вашего вклада в бета-версию Dev Mode и VS Code мы с нетерпением ждем расширения функциональности, включая новые способы улучшения сотрудничества дизайнера и разработчика, извлечения спецификаций и обеспечения большего соответствия между дизайном и кодом.