Как скопировать файл в figma

Обновлено: 22.11.2024

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

Передача копии без ошибок

Для новых функций передача новой копии обычно требует, чтобы разработчики щелкали макеты и копировали по одному фрагменту текста в свой код. Или, что еще хуже, кто-то должен создавать документацию по продукту вне Figma и вручную извлекать копию из Figma (а затем беспокоиться о синхронизации дизайна и документации). Фактически это означает, что каждая копируемая строка должна быть скопирована дважды (от дизайна к документации к коду). Все это может быть подвержено ошибкам и, безусловно, утомительно для всех участников.

Автоматическое создание готового к локализации кода

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

-> После установки плагина вы выбираете кадры для экспорта в строки.

-> В Strings вы можете получить строковый код для каждого типа файлов платформы (iOS, Android и JSON для Интернета) и поделиться им со своими разработчиками. Они избавляют от необходимости копаться в конструкторской документации, чтобы скопировать текст.

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

Контекстно-ориентированная передача для команд локализации

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

Новая бесплатная ценовая категория

С запуском подключаемого модуля мы также обновили наш веб-сайт и скорректировали цены, чтобы обеспечить большую гибкость для разных размеров команд. Мы также добавили бесплатный уровень! Вы можете посмотреть здесь.

Подробнее

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

Новая вкладка Изменения заменяет старые вкладки Экспорт и Обновления. Будь то экспорт контента во Frontitude или обновление файлов Figma последней копией из Frontitude, вкладка «Изменения» — это место, где можно это сделать.

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

Загрузить новую копию во Frontitude

Чтобы управлять своей копией с помощью Frontitude, вам нужно сначала загрузить ее. Для этого подключите соответствующие фреймы к Frontitude.

Когда вы впервые откроете плагин Frontitude в новом файле Figma, он поможет вам выбрать кадры, которые вы хотите соединить. Как только вы подключите фрейм, вся его копия будет загружена во Frontitude, и любые изменения, сделанные после этого (будь то в Figma или Frontitude), будут отслеживаться.

Если вы уже подключили кадр, на вкладке «Изменения» отобразятся несвязанные кадры. Чтобы связать их, нажмите Синхронизировать изменения.

Вкладка «Изменения» чувствительна к выбору. Он отображает только изменения под текущим выбором в Figma. Если выбор пуст, на вкладке «Изменения» отображаются изменения для всего файла Figma.

Загрузить дизайн рамок во Frontitude

Вкладка «Изменения» позволяет загружать дизайны ваших рамок во Frontitude, чтобы вы могли редактировать свою копию вне Figma в веб-приложении Frontitude.

Для этого установите флажок Включить дизайн в нижней части подключаемого модуля. Если этот флажок установлен, действие синхронизации также загрузит дизайн выбранных кадров во Frontitude. Имейте в виду, что это может занять больше времени, чем загрузка только копии (без дизайнов), так как файлы больше.

Отслеживайте изменения копии с помощью вкладки "Изменения"

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

Изменения отображаются для каждого выбора в Figma и определяются с момента последней синхронизации текста с Frontitude. У вас есть три варианта просмотра изменений на этой вкладке в раскрывающемся списке направлений:

Изменения в Figma — показывает изменения, внесенные в Figma, по сравнению с последней версией, хранящейся во Frontitude.
Изменения во Frontitude — показывает изменения, внесенные во Frontitude, по сравнению с текущей версией Figma.‍
Все изменения – показывает изменения, внесенные как в Figma, так и во Frontitude, включая конфликты.

Все изменения, показанные на вкладке "Изменения", еще не применяются на обеих платформах. Чтобы применить их, нажмите кнопку Синхронизировать изменения внизу плагина.

Отправить изменения из Figma во Frontitude

Если вы внесли изменения в Figma и хотите синхронизировать их с Frontitude, сделайте следующее:

Выберите нужные кадры в Figma (необязательно). Вкладка «Изменения» чувствительна к выбору. Выберите кадры, изменения которых вы хотите синхронизировать с Frontitude. Отмените выбор в Figma, чтобы собрать и синхронизировать все изменения на этой странице.
Выберите, чтобы просмотреть изменения в Figma. Чтобы обновить Frontitude с изменениями из Figma, щелкните раскрывающийся список целей и выберите Changes in Figma‍
Нажмите Отправить во Frontitude. Все отображаемые изменения будут записаны как новые версии на Frontitude.

Перенести изменения из Frontitude в Figma

Если вы или один из членов вашей команды внесли изменения через веб-приложение Frontitude, которые вы хотели бы получить и синхронизировать с мокапами Figma, сделайте следующее:

Выберите нужные кадры в Figma (необязательно). Вкладка «Изменения» чувствительна к выбору. Выберите кадры, которые вы хотите обновить. Отмените выбор в Figma, чтобы обновить все изменения, сделанные на этой странице Figma.
Выберите, чтобы просмотреть изменения во Frontitude. Чтобы обновить Figma с изменениями из Frontitude, щелкните раскрывающийся список целей и выберите Changes in Frontitude‍
Нажмите Перетянуть в Figma. Все отображаемые изменения из Frontitude будут взяты и обновлены в макетах Figma. Вы всегда можете использовать Cmd/Ctrl+Z, чтобы отменить изменения и вернуть их на вкладку "Изменения".

Просматривайте входящие изменения из Frontitude, используя раскрывающийся список направлений, и перетаскивайте их в Figma одним щелчком мыши

Синхронизировать Figma и Frontitude (двусторонняя синхронизация)

Если вы и ваша команда внесли изменения как во Frontitude, так и в Figma, вы можете синхронизировать их одним действием:

Выберите нужные кадры в Figma (необязательно). Вкладка «Изменения» чувствительна к выбору. Выберите кадры, которые вы хотите обновить. Отмените выбор в Figma, чтобы синхронизировать все изменения на обеих платформах.
Выберите, чтобы синхронизировать все изменения. Чтобы синхронизировать Figma и Frontitude с последними изменениями на каждой платформе, щелкните раскрывающийся список целей и выберите Все изменения‍
Нажмите Синхронизировать изменения. Это примет все отображаемые изменения как из Figma, так и из Frontitude и синхронизирует обе платформы с последними изменениями; он обновит Figma изменениями из Frontitude, а также создаст новые версии для изменений в Figma и запишет их во Frontitude.

Устранение конфликтов между версиями Frontitude и Figma

Когда изменения вносятся в определенный текст как в Figma, так и во Frontitude, вы увидите окно конфликта, показывающее изменения, внесенные в Figma и Frontitude. Просмотрите их и выберите тот, который хотите сохранить.

Все, что вам нужно, чтобы легко экспортировать, импортировать, локализовать и обновлять текст в проектах Figma.

Расшифровка видео

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

Первое, что нам нужно сделать, это зайти в сообщество Figma, и если вы просто введете слово «CopyDoc» и на вкладке «Плагины», вы увидите всплывающее окно с названием «CopyDoc». Если вы еще не установили его, вы можете нажать кнопку «Установить» справа, и это установит его в Figma для вас. Как только появится надпись «Установлено», вы можете вернуться к своему проекту, и мы сможем приступить к работе.

Теперь, когда мы установили плагин Figma, если вы просто щелкните правой кнопкой мыши в любом месте на своей странице, перейдите к «Плагины», а затем нажмите «CopyDoc», это просто откроет плагин Figma, который мы только что установили. Вы можете видеть, что здесь есть несколько вариантов, но сегодня в этом уроке мы просто сосредоточимся на параметре «Экспорт комментариев Figma», и, как говорится в подзаголовке, он будет экспортировать все ваши комментарии в CSV и JSON. .

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

Чтобы экспортировать эти комментарии из Figma, все, что нам нужно сделать, это вернуться к параметру «Экспорт комментариев Figma» и нажать кнопку рядом с ним с надписью «Экспорт комментариев»; это откроет панель «Экспорт комментариев Figma», и здесь есть несколько полей, которые нам нужно заполнить.

Самый первый — просто заполнить URL-адрес страницы Figma; это обязательное поле, но его очень легко получить. Все, что вам нужно сделать, это подойти к верхней панели инструментов в Figma, где есть синяя кнопка «Поделиться», и нажать на нее, и вы увидите здесь ярлык с надписью «Копировать ссылку»; нажмите на этот ярлык «Копировать ссылку», и он сообщает нам, что ссылка была скопирована в буфер обмена. Теперь вы можете закрыть эту панель настроек, и в настройках «Экспорт комментариев Figma» в разделе «URL-адрес страницы Figma» мы просто вставим это, и вы можете увидеть, что он скопировал URL-адрес файла для этого проекта Figma из буфер обмена, и он был помещен в настройки там. Это просто скажет плагину Figma, что это файл, из которого мы хотим экспортировать комментарии.

Второе, что нам понадобится, это ваш личный токен доступа Figma. Это еще одно обязательное поле, но опять же, его очень легко создать. Здесь есть некоторые инструкции, но я покажу вам, как это сделать, чтобы вы могли визуально это увидеть. Что нам нужно сделать, так это перейти на страницу «Настройки» нашего профиля Figma, так что я перейду к ней сейчас. Я только что нажал на свое имя пользователя Figma, а затем перешел на вкладку «Настройки», а под вкладкой «Настройки», если вы прокрутите вниз, вы увидите раздел «Токены личного доступа». Что вы хотите сделать, так это щелкнуть по этой ссылке здесь, которая гласит: «Создать новый токен личного доступа», поэтому просто щелкните по ней один раз, и вам будет предложено ввести описание; в этом случае вы можете просто ввести имя плагина Figma, но вы можете сделать это как хотите, если знаете, на что он ссылается, и просто нажмите Enter. Как только вы это сделаете, вам будет показано это маленькое уведомление, которое говорит нам, что нам нужно скопировать этот токен, потому что это единственный шанс, что мы сможем это сделать. Если вы просто выделите этот текст, весь этот токен и скопируете его в буфер обмена; теперь, если мы вернемся на нашу страницу и в поле «Токен персонального доступа Figma», я просто щелкну по нему и вставлю этот токен. Вы можете видеть, что теперь кнопка проверена, потому что токен был вставлен.

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

Теперь, когда мы все настроили, все, что нам нужно сделать, это, наконец, нажать кнопку "Экспортировать комментарии в CSV/JSON". всю страницу для любых комментариев и сгенерируйте файл CSV и файл JSON из этих комментариев Figma. Вы можете видеть здесь, это было очень быстро, и оно сообщает нам, что наши комментарии Figma готовы к загрузке, поэтому теперь мы можем нажать кнопку «Загрузить комментарии» здесь, я просто собираюсь сохранить это на своем рабочем столе. Вы можете видеть здесь, у меня есть zip-файл, который я могу открыть двойным щелчком, и если я открою только что разархивированную папку, вы увидите, что у нас есть несколько разных файлов; у нас есть файл CSV, файл JSON, а также папка с именем «frames».

Если я открою папку "frames" и закрою плагин Figma, теперь вы увидите, что если я открою одно из этих изображений, у нас будет один из наших кадров, который был экспортирован с комментариями. . Это будет «Принцип Один», кадр «Принцип Один», и вы можете видеть здесь маленькую булавку с номером два на ней, и в нашем экспорте здесь у нас также есть маленькая булавка номер два. на наш экспорт. Если я перейду к другому дизайну, вы увидите, что у нас есть еще один вывод с номером один, который соответствует выводу в Figma, также с номером один. Это точно указывает, где эти потоки отображаются в Figma, просто чтобы вы могли фактически иметь визуальную ссылку на комментарии в файлах CSV и JSON без необходимости находиться в файле Figma. Это может быть очень удобно для отправки клиентам или просто ссылки на отзыв, не находясь в файле Figma.

Чтобы дать вам представление о том, как выглядят эти два файла, я просто дважды щелкну файл CSV, и в моем случае это просто откроет программу «Apple Numbers», она может открыть «Microsoft Excel», или вы можете перетащить это в Google Sheets; это действительно зависит от вас. Вы можете видеть, что здесь отображаются все мои комментарии, которые мы только что видели в Figma. Если я снова открою комментарии Figma, вы увидите в нашем CSV-файле, что у нас есть несколько вещей. Я мог бы просто увеличить масштаб, чтобы вы могли видеть это немного четче.Он сообщает нам, в каком кадре находится комментарий; например, у нас есть кадр «Вступление», поэтому у нас есть кадр «Вступление», а затем он сообщает нам, какой номер у цепочки комментариев. У нас есть поток комментариев номер один, а затем у нас есть разные комментарии и время их создания, так что вы можете видеть здесь, что этот был создан через 47 секунд после этого времени, а затем у нас есть 54 секунды, это один был создан сразу после. Это в порядке этих комментариев, а другая ветка, которая у нас есть, — ветка номер два.

Если я вернусь к этому здесь, как я уже сказал, этот поток действительно был помечен как решенный, и вы можете видеть здесь, что он сообщает мне, когда этот поток был фактически помечен как решенный. Вы можете не только увидеть, было ли оно решено, но и сказать, в какое время оно действительно было решено и в какой день. Еще раз, у нас есть наши сообщения из ветки и ветки комментариев, указывающие на номер два, поэтому, например, если бы я открыл изображение, которое у нас было из кадров; у нас есть кадры, так что я могу открыть соответствующий кадр. Например, «Принцип один», я могу открыть его и увидеть здесь ветку комментариев номер два; Я точно знаю, на какую часть файлов ссылаются из CSV, просто сопоставив номер потока комментариев с фреймом, номер потока комментариев и фрейм. Эти две вещи всегда будут совпадать, так что это просто хороший визуальный ориентир для демонстрации ваших комментариев Figma, которые были экспортированы в CSV.

Другой файл, который у нас есть, это файл JSON. Я просто открою и его; это наш файл JSON, и он содержит те же данные, что и файл CSV, за исключением того, что мы используем массив объектов JSON. Это может быть полезно, если вы разработчик. Если вы работаете с разработчиками, скорее всего, они предпочтут экспортировать данные в формате JSON, потому что им гораздо проще работать с ними, чем с CSV. Файлы CSV могут быть действительно хороши для отправки внутренним заинтересованным сторонам, отправки клиентам или просто экспорта для себя, чтобы как бы отметить списки дел; это может быть очень удобно, но для разработчиков и людей, которым нужно что-то более техническое, файл JSON может быть именно тем, что вы ищете. Еще раз, это будет экспортировать все комментарии, все даты, сообщения, имена пользователей, потоки комментариев, фрейм, все эти данные экспортируются из Figma в файл JSON.

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

Я надеюсь, что это было полезно, если вы искали способ экспортировать комментарии Figma в CSV или экспортировать комментарии Figma в JSON, это самый простой и быстрый способ сделать это. Я надеюсь, что вы добьетесь успеха в своей команде, если решите попробовать, и мы очень скоро вернемся с другими учебниками по Figma, такими как этот. Еще раз спасибо за просмотр.

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

В ЭТОЙ СТАТЬЕ

Перейти в меню «Поделиться»

3 Введите URL-адрес вашего файла Figma и нажмите «Поделиться»

Найти и скопировать ссылку на файл Figma

1 Перейдите к файлу Figma, которым хотите поделиться. 2 Нажмите кнопку «Поделиться» в правом верхнем углу вашего файла. 3 Нажмите Копировать ссылку

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

Вставьте ссылку на файл Figma

1. Вставьте ссылку на файл Figma, который вы только что скопировали. 2. Перед тем, как поделиться файлом, отобразится предварительный просмотр. 3. Нажмите кнопку «Поделиться». 4. Теперь ваши участники могут свободно перемещаться по вашему файлу.

Навигация по файлу не будет отображаться в повторе. Отображение останется фиксированным в исходном виде.

Удалить файл Figma из рабочей области

Нажмите X в правом верхнем углу, чтобы удалить файл Figma со сцены.

Спасибо за отзыв. Не удалось отправить отзыв. Повторите попытку позже.

Как переместить компонент в другой файл в Figma? Главный плагин - это ответ! Он может автоматически находить и присоединять все экземпляры исходного компонента к новому библиотечному компоненту и сохранять все переопределения.

Переместить локальный компонент в библиотеку

Для компонентов, которые используются только в одном файле.

Скопируйте и вставьте основной компонент в другой файл и опубликуйте в библиотеке.
Выберите этот новый компонент библиотеки и выберите его:
Мастер → Выбрать целевой компонент
Выберите исходный главный компонент в файле и свяжите его:
Мастер → Связать объекты с целевым компонентом

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

Переместить компонент библиотеки в другую библиотеку

Для компонентов, опубликованных в библиотеке и используемых в нескольких файлах.

Скопируйте компонент в библиотеку. Если вставлен как экземпляр — отсоедините и создайте из него новый компонент. Опубликовать в библиотеке.
Сохраните этот новый компонент в мастере:
Мастер → Выбрать целевой компонент
Связать исходный основной компонент, чтобы сохранить его в качестве следующего:
Мастер → Связать объекты с целевым компонентом
В каждом файле, где используется исходный компонент: отмените выбор всего и запустите «Связать объекты с целевым компонентом». Мастер находит все экземпляры того, который вы только что связали, и прикрепляет их к сохраненному компоненту.

Повторить последнее действие (отменить выбор и создать ссылку) для всех файлов, в которых используются экземпляры исходного компонента. Это единственный способ полностью переместить компонент.

К сожалению, из-за ограничений API плагинов Figma нет возможности даже автоматически находить такие файлы, не говоря уже о прикреплении к ним экземпляров. Так что эта работа на вас.

Примечания

Если в шаге 3 у вас нет экземпляров в файле, мастер сообщит: «Нет объектов, которые можно прикрепить». Это нормально, Master все равно сохранит этот компонент.
Вместо того, чтобы выбирать компонент на шаге 3, вы также можете выбрать экземпляр и связать его. Мастер все равно запомнит его и на шаге 4 найдет другие экземпляры того же компонента.

Советы профессионалов

При перемещении нескольких компонентов используйте сочетания клавиш Opt + Cmd + P или Alt + Ctrl + P, чтобы запустить предыдущую команду подключаемого модуля в файле.
Добавьте _ к именам страниц, которые вы хотите пропустить: Master не будет связывать компоненты на них.

Перемещение вариантов

Теперь мастер тоже может перемещать варианты! Просто выберите весь контейнер вариантов вместо одного компонента. Все варианты внутри должны иметь совпадающие имена, чтобы он работал.

Контейнер вариантов имеет стандартный значок компонента: четыре фиолетовых ромба.

▶ Предпочитаете видео?

Посмотрите видеоруководство, в котором подробно описаны все инструкции:

Сделано Глебом Сабирзяновым.
Есть вопросы или идеи? Давайте поговорим: gleb@dominate.design

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