Как сохранить файл в Figma
Обновлено: 21.11.2024
Самая распространенная проблема при создании дизайн-системы заключается в том, что когда приходит время расширить файл и превратить его в библиотечную систему, у вас есть прекрасно созданный компонент в локальном файле, и нет хорошего способа переместить его, не нарушая. Более 50 текстовых переопределений и подкомпонентов внутри каждого экземпляра. Не беспокойтесь, теперь у меня есть простое руководство для этого:
А. Если вы хотите повторно связать очень простой компонент
- Скопируйте дубликат в файл библиотеки (не забудьте опубликовать указанный файл библиотеки). А. Шаг 1 из 6.
2. Вернитесь к своему локальному рабочему файлу (в данном случае это файл входа в систему, в котором изначально был создан значок) и убедитесь, что вы включили только что опубликованный файл библиотеки.
Довольно просто, не так ли?
Что ж, прежде чем вы перейдете к своему файлу и начнете возиться с плагинами и выбором, есть одна небольшая проблема. Этот параметр не переносит любые переопределения или изменения, которые вы сделали. Так что беззастенчиво пройдите ВСЕ экземпляры и переделайте большинство переопределений, похлопывая себя как трудолюбивого дизайнера. Что приводит нас ко второму варианту:
Б. Компоненты с любой формой переопределения
Большинство созданных вами компонентов могут иметь какие-либо переопределения, будь то простое изменение цвета или сложные текстовые структуры автоматического макета. Чтобы избавить себя от всех проблем, я бы посоветовал вам начать использовать прекрасный платный плагин под названием Master.
Плагин сам по себе имеет множество полезных функций. Но в этой статье я сосредоточусь только на переносе главных компонентов.
- Создать дубликат основного компонента в библиотеке и выбрать его (в указанном файле библиотеки) B. Шаг 1 из 7
<р>3. Не забудьте опубликовать файл библиотеки перед переключением обратно на локальный файл (и импортировать его в назначенный локальный файл).
B. Шаг 3 из 7: опубликуйте и импортируйте, как вы делали с A. <р>4. Выберите основной компонент в локальном файле
5. Щелкните правой кнопкой мыши и выберите «Плагины>Мастер>Связать объекты с целевым компонентом», выбрав главный компонент.
7. Вот и все! Готово. Действительно.
Обратите внимание, что этот метод будет работать только с идентичными компонентами с разными переопределениями.
Если у вас есть две похожие, но не точные копии двух основных компонентов между файлами (из-за нескольких дизайнеров работа над файлом и в конечном итоге создание одного и того же компонента дважды) это не сработает и может привести к некоторым артефактам и ошибкам. Будьте осторожны!
Использование компонентов в одном файле допустимо, если их всего несколько, но в существующих библиотеках часто содержится много страниц компонентов, которые вы, возможно, захотите использовать. Иногда даже несколько файлов. Есть способ повторно использовать их без повторного копирования и вставки в рабочий файл. Это поможет вам создать собственную дизайн-систему или работать с чужой копией.
Официальная документация Figma по библиотекам и рекомендациям по работе с компонентами может помочь вам в дальнейшем.
Вы можете использовать любимую поисковую систему, чтобы найти файлы комплекта пользовательского интерфейса, или использовать вкладку «Сообщество» в Figma. Он находится в левом верхнем углу, затем вы можете выполнить поиск по категории «Наборы пользовательского интерфейса» и использовать фильтр «Файлы».
Затем вам нужно сохранить его в Коллективной библиотеке. Если это для себя, вы можете просто сохранить его в своей личной библиотеке команды. Figma по умолчанию создаст вам проект «Система дизайна», поэтому я считаю полезным сохранять там свои наборы пользовательского интерфейса и помечать проект как избранный. Таким образом, он появляется в представлении списка слева для быстрого доступа.
Если вы не опубликовали стили и компоненты, вы не сможете повторно использовать их с помощью функций библиотеки Figma.
Чтобы использовать Компоненты во всех проектах и файлах в этой команде, вам необходимо сначала опубликовать их.
- Откройте выбранный файл компонента
- Нажмите раскрывающееся меню рядом с названием в центре вверху.
- Нажмите «Опубликовать стили и компоненты».
Это должно открыть модальное окно, в котором вы можете использовать флажки для выбора компонентов и стилей, которыми вы хотите поделиться. Если вы довольны выбором, нажмите кнопку "Опубликовать".
Наконец, вернувшись в главное меню Figma, вам нужно будет щелкнуть имя команды в левом навигаторе и нажать «Настройки» вверху. Вы должны увидеть список настроек, как на скриншоте ниже. После того, как вы нажмете «Включить библиотеки» под заголовком «Коллективные библиотеки», вы получите список файлов с опубликованными стилями и компонентами, которые можно включить или отключить с помощью раскрывающегося списка.
Используя файл компонента, который вы скопировали ранее: щелкните раскрывающийся список, затем выберите «Дизайн», если вы хотите использовать его только для своих прототипов, или выберите «Все файлы», если вы хотите использовать их и в своем FigJams.
Я просто включаю общий доступ ко всем файлам, но у вашей команды могут быть более сложные или деликатные потребности в совместном использовании
Теперь осталось только протестировать.
Создайте новый файл в своей команде — неважно, в каком проекте вы его сохраните, — затем посмотрите в левом верхнем углу рядом с окном «Слои». Если вы нажмете «Активы», вы должны увидеть список компонентов, которые были в вашем файле, обычно организованные в виде серии мини-аккордеонов.
Если загруженный файл компонента содержит только стили, вы можете создать несколько текстовых слоев или слоев фигур, чтобы применить некоторые стили. Выбрав любой из слоев, наведите курсор на правую панель и нажмите кнопку с четырьмя точками рядом с любым из следующих элементов:
- Сетка макета
- Текст (только текстовые слои)
- Заполнить
- Инсульт
- Эффекты
Вы должны получить список различных сохраненных стилей, которые можно применить к выбранному слою.
Помимо различных эффектов, которые вы можете использовать повторно, библиотеки с компонентами можно найти на вкладке «Активы» в левом верхнем углу экрана. Он покажет как локальные Компоненты, которые вы создали только в этом файле, так и все, что доступно и правильно опубликовано.
Теперь вы и ваша команда можете меньше копировать и вставлять и больше заниматься дизайном!
Если вы хотите включить совместное использование файла компонента только для каждого файла, вы можете вместо этого щелкнуть значок книги в левом верхнем углу и включить или отключить его с помощью переключателя.
Этот вариант удобен в крайнем случае, если я просто хочу поэкспериментировать с несколькими файлами, прежде чем поделиться ими со всей командой.
Надеюсь, это было полезное руководство по созданию команды в Figma с общими стилями и компонентами. Это функция, которая помогает запустить проект с помощью широко используемых наборов UI, таких как Material Design или Bootstrap, или начать стимулировать более последовательное использование шаблонов в вашей команде контролируемым и систематическим образом.
В этой статье я собрал 20 подключаемых модулей Figma, которые я активно использовал и которые помогли значительно улучшить мой рабочий процесс.
Фото Мики Баумайстер/Unsplash
За последние несколько лет я опробовал и регулярно использовал множество плагинов от замечательного сообщества Figma.
День за днем предложения, предоставляемые этим щедрым сообществом, улучшаются и не собираются останавливаться на достигнутом.
Итак, я подумал, что сейчас самое время собрать 20 плагинов, которые я активно использовал и настоятельно рекомендую, а также те, которые все еще активно обновляются в сообществе плагинов Figma. . Да, здесь нет рекомендаций "Этот плагин больше не работает!".
Ваши поиски действительно ценных плагинов Figma заканчиваются здесь.
Давайте углубимся в…
Файлы Лотти.
Лотти стала популярным ресурсом для анимации с открытым исходным кодом в Интернете. Благодаря небольшому размеру файла и кроссплатформенным возможностям легко понять, почему.
И наличие Lottie в Figma делает жизнь дизайнеров и разработчиков еще лучше, используя этот фантастический ресурс.
С помощью подключаемого модуля LottieFiles вы можете быстро получить доступ к библиотеке из 1000 бесплатных анимаций Lottie, добавить свои собственные файлы .lottie с помощью перетаскивания и легко получить доступ ко всем ваши анимации предварительно просматриваются на LottieFiles, и все это удобно в Figma.
С помощью этого плагина вы достигли дзен анимации.
Организатор системы дизайна.
Design System Organizer обязателен для всех, кто работает с крупномасштабными системами дизайна в Figma.
Он позволяет быстро управлять стилями и компонентами; чего-то, чего Figma не хватает из коробки.
Набор функций этого плагина невероятен и очень поможет вам при работе с любой системой дизайна.
Я не могу похвалить его достаточно высоко!
Контраст
Доступность — это не хорошо иметь; это обязательное условие сегодня.
Подключаемый модуль Contrast позволяет легко проверять контрастность цветов в ваших проектах во время работы, чтобы вы могли убедиться, что проект, над которым вы сейчас работаете, правильно соответствует Рекомендациям по доступности веб-контента (WCAG)< /эм>.
Это очень полезный и обязательный плагин, который может даже сканировать целые страницы и генерировать отчет обо всех обнаруженных проблемах с контрастностью текста, что позволяет вам работать над ними и устранять их по мере необходимости.
Например, я упомянул не "хорошо иметь" плагин, а "необходимый" в вашем рабочем процессе.
Сократить.
Хотите сжимать изображения прямо на холсте?
Уменьшение размера позволяет вам сделать это.
По сравнению с чем-то вроде Sketch, файлы Figma с большим количеством изображений уже имеют значительно меньший размер, но этот плагин может значительно улучшить ситуацию.
Вы можете поэкспериментировать с различными уровнями сжатия, пока не будете удовлетворены, а также можете преобразовать эти большие PNG в JPEG, если хотите. Потрясающе!
Это фантастический плагин, который, безусловно, стоит попробовать.
Румянец.
Blush — это фантастический плагин для Figma, созданный великолепным Пабло Стэнли и его первоклассной командой иллюстраторов.
Раньше я изо всех сил пытался найти иллюстрации для своих интерфейсов, поскольку превосходных иллюстраций было немного, и они были широко распространены в Интернете. Очень сложно найти действительно отличный набор иллюстраций.
До тех пор, пока на сцене не появился Blush.
Теперь я могу использовать плагин Blush в Figma, выбирать из огромного количества художников и коллекций, настраивать иллюстрации по своему вкусу и добавлять их прямо в свой проект.
Попробуйте иллюстрации Blush. Ваши дизайны скажут вам спасибо за это.
Скрыть.
Подключаемый модуль Unsplash простой и практичный, без лишних излишеств.
Больше не нужно загружать и вставлять фотографии в Figma вручную. Ага. Я был виновен в этом в прошлом.
Доступ к полной библиотеке изображений Unsplash в Figma — это невероятно и экономит много времени при добавлении идеального снимка в ваши проекты.
Переименовать.
Rename It может сэкономить вам много времени при работе с большими файлами дизайна, автоматизируя потенциально утомительную работу по переименованию бесчисленных слоев и фреймов.
Это стало само собой разумеющимся, когда я работал с крупномасштабными системами проектирования и в последнюю минуту решил изменить имя компонента, чтобы узнать, что он используется в нескольких местах с старое имя. Не проблема с переименовать его. Я могу найти свой компонент с прежним именем и обновить его один раз. Готово.
Rename It позволяет сэкономить время плагина, и я им часто пользуюсь.
Пакетный стиль
Итак, вы начинаете новый проект и хотите переключиться с Roboto на Inter в нескольких местах. Можно ли добиться этого быстро в Figma?
Эм. Неа! В настоящее время Figma позволяет обновлять только один стиль за раз вручную. Да, настоящая боль.
Слава богу, Ян Сикс принесла нам плагин Batch Styler.
С помощью этого супер-удобного подключаемого модуля вы можете изменить несколько стилей текста одновременно, сохраняя при этом всю толщину шрифта и другие стили без изменений и попрощавшись со всей этой трудоемкой ерундой.
Batch Styler — это фантастический плагин, который компенсирует нынешнее отсутствие в Figma обработки стилей текста.
Проволочная коробка.
Дизайн-системы повсюду. Ага. Это само собой разумеющееся.
С внедрением этих универсальных систем работать над высококачественными проектами стало проще и быстрее, чем раньше. Тем не менее, может возникнуть случай, когда вам нужно вернуть свои первоначальные полноцветные дизайны в каркасы с низким качеством изображения, и в этом вам может помочь плагин Wire Box.
Всего одним щелчком мыши вы можете быстро и без лишних хлопот воссоздать провода, которые вы пропустили на начальных этапах, обратно в каркасы. р>
Теперь вы и ваша команда можете быстро сосредоточиться на пользовательском интерфейсе, а не на пользовательском интерфейсе, и вносить необходимые корректировки.
Отличный небольшой плагин, который может пригодиться в определенных случаях.
Лицо пользовательского интерфейса.
О да, аватары для использования в макетах дизайна. Мы все использовали их, и если вы чем-то похожи на меня, вы в прошлом загружали их вручную с веб-сайтов X, Y и Z.
Так было до тех пор, пока UI Faces не стал доступен в виде подключаемого модуля Figma.
Я использую этот плагин уже несколько лет, и это один из тех обязательных плагинов, постоянно установленных в Figma.
UI Faces собирает тысячи аватаров, которые можно тщательно отфильтровать по возрасту, полу, эмоциям и другим факторам.
Выбрать аватар в Figma проще простого.
Ролик с контентом.
Content Reel – это массивный плагин, который сэкономил мне массу времени, когда дело доходит до вставки фиктивного контента в мои проекты, будь то текстовые строки, значки или даже изображения.
Самое замечательное в Content Reel и то, что отличает его от других сопоставимых плагинов, заключается в том, что он позволяет вам использовать пользовательский контент, предоставленный другими пользователями Figma, и создавать свой собственный, чтобы поделиться с сообществом.
Возможность иметь в одном подключаемом модуле несколько видов содержимого, например текстовые строки, изображения и значки, отлично подходит для ваш рабочий процесс, и я настоятельно рекомендую вам ознакомиться с ним.
Диаграмма.
Я уже использовал этот плагин в Sketch и был очень рад, когда его перенесли в Figma.
Линейные диаграммы, Круговые диаграммы, Диаграммы с областями и т. д. проект с таким большим количеством настроек, доступных вам.
Благодаря возможности использовать для создания диаграмм реальные или случайные данные из таких источников, как Excel или Google Таблицы, , мне кажется, из всех плагинов для диаграмм, доступных в сообществе Figma.
Создавайте красивые диаграммы с помощью этого сверхуниверсального плагина. Настоятельно рекомендуется.
Фигмоушен.
У Sketch уже давно есть хорошая интеграция со сторонними инструментами анимации, такими как Principle (который я использовал много раз в прошлом), но Figma? Не так много до недавнего времени.
По мере развития Figma возможности интеграции со сторонними инструментами анимации улучшаются, но как насчет уникальных анимаций, созданных в Figma? Это то, что Figmotion пытается изменить.
Создание сложных анимаций в Figma экономит время, и возможности Figmotion меня очень впечатлили.
Автозаполнение.
Autoflow — не первый подключаемый модуль или сервис User Flow в наших наборах инструментов. Нет, это не так. Но я скажу вам прямо сейчас; одно из самых впечатляющих.
Я уже использовал такие плагины, как Flowkit, и несмотря на то, что они хороши и имеют больше функций, чем Autoflow, вам все равно придется вручную перемещать элементы, чтобы связать провода и создать потоки.
С помощью Autoflow вы выбираете объекты, между которыми хотите создать поток, а этот небольшой набор плагинов волшебным образом нарисует линию связи. Нет необходимости вставлять и перемещать соединительные линии вручную.
Плывите по течению!
Студия макетов.
Mockuuups Studio — это, по сути, генератор макетов для ваших проектов Figma.
Хотите показать дизайн своего мобильного приложения в руке случайного человека с iPhone 13 Pro? Не проблема! Вы можете выбрать рамку внутри Figma, а Mockuuups Studio позаботится обо всем остальном.
Я использовал только несколько сцен, но в настоящее время доступно более 1000+ с различным фоном, типами устройств и т. д., чтобы вы никогда не застряли в поиске подходящей сцены для своего продукта.
Иконка.
Значки. В прошлом и до сих пор я буду использовать что-то вроде IconJar или Nucleo для размещения значков в своих проектах при работе с другими инструментами дизайна.
В Figma я делаю немного по-другому.
Наличие чего-то вроде плагина Iconify, работающего вместе с Figma, значительно упрощает повседневный рабочий процесс при работе со значками.
Коллекция значков Iconify включает более 50 000 значков из таких известных наборов, как Font Awesome, Material Design и Jam Icons. , так что у вас никогда не будет недостатка в выборе.
Лорем ипсум.
Являюсь ли я большим поклонником старого доброго Lorem ipsum? Не совсем.
Я сторонник использования реального текста, когда это возможно, в ваших итерациях дизайна, но при работе с действительно ранними концептами или каркасами Lorem иногда может заполнить пробел. .
С помощью этого удобного плагина вы можете быстро заполнить свои текстовые слои обычным Lorem ipsum, используя именно то количество Lorem, которое необходимо для заполнения выбранного вами фрейма.
Просто. Удобно. Делает работу, и делает ее хорошо.
Удалить БГ.
Инструменты для удаления фона. Удобно иметь, но (а я пробовал много из них) не всегда давали наилучшие результаты, я боюсь.
К счастью, появился Remove BG, который значительно улучшил ситуацию и дал результаты, которыми вы могли быть довольны, а не смущаться.
Наличие плагина Remove BG для Figma делает работу над проектом еще более удобной.
Теперь на их бесплатном плане разрешение изображений, которые выдает Remove BG, не слишком велико для профессионального использования, поэтому вам нужно взглянуть на один из их платных планов, если вы хотите изображения с высоким разрешением, но как Я уже говорил, что это, без сомнения, лучший в своем роде
Значки перьев.
Я уже много раз использовал значки Feather, так как это такой великолепный, универсальный и легкий набор значков, который может в так много разных проектов.
До сих пор я использовал что-то вроде IconJar, чтобы перетаскивать эти значки, упомянутые выше, в свои проекты.
Плагин Feather Icons, установленный в Figma, экономит немного дополнительного времени благодаря отсутствию необходимости переключаться между различными инструментами.
Просто, но удобно.
Humaaans для Figma.
Пабло Стэнли. Он всегда приносит свою лучшую игру сообществу Figma. Что с Blush, а также Humaaans (да, это 3 "А").
С помощью этого простого, но невероятно полезного плагина вы можете легко использовать невероятную библиотеку иллюстраций Пабло «Humaaans» в Figma.
Этот плагин упрощает создание вашей уникальной работы, используя любую из предоставленных предустановленных иллюстраций или просто смешивая и сопоставляя доступные иллюстрации, чтобы создать что-то более подходящее для вашего проекта.
Надеюсь, в этой полезной коллекции есть что-то, что может значительно улучшить ваш повседневный рабочий процесс.
За последние пару лет сообщество вокруг Figma значительно выросло. Он продолжает это делать, ежедневно добавляя новые экономящие время и чрезвычайно полезные плагины.
Я с нетерпением жду, что принесет сообщество плагинов Figma в 2022 году.
Кстати, если вы действительно хотите сэкономить сотни часов проектирования, моя Design System for Figma; Cabana теперь доступна.
Специальное предложение: используйте код CABANA35, чтобы получить СКИДКУ 35%. 👇
Cabana – это система проектирования для Figma, обладающая сверхмощными возможностями и многофункциональными возможностями, но предоставляющая вам свободу творчества и гибкость, позволяющую сделать ее по-своему.
Все, что вам нужно, чтобы легко экспортировать, импортировать, локализовать и обновлять текст в проектах Figma.
Расшифровка видео
Сегодня я покажу вам, как экспортировать проекты Figma в файлы Microsoft Word .docx.
Для этого мы будем использовать подключаемый модуль Figma под названием CopyDoc. Если вы еще не установили его, вы можете сделать это, подойдя к значку Figma в левом верхнем углу приложения, перейдя в «Сообщество», а затем выполнив поиск «CopyDoc», и вы увидите «CopyDoc». появится в списке плагинов Figma на вкладке «Плагины». Если вы еще этого не сделали, вы можете нажать кнопку «Установить» справа, и это установит плагин Figma. Как только вы это сделаете, вы можете вернуться к своему файлу Figma, и мы будем готовы к работе.
Я собираюсь показать вам, как экспортировать это резюме или CV из Figma в документ Microsoft Word, и для этого я просто открою подключаемый модуль Figma, который мы только что установили. Я собираюсь щелкнуть правой кнопкой мыши, перейти к «Плагины», затем перейти к «CopyDoc», и я собираюсь щелкнуть по нему, и это просто откроет плагин Figma, который мы только что установили. . Как только он загрузится, вы увидите, что у нас есть несколько разных опций, но сегодня мы просто сосредоточимся на верхней опции, а именно на «Экспорт фреймов в Microsoft Word». Это экспортирует ваши кадры Figma в файл .docx, и, учитывая, что у нас есть только один кадр, я просто подумал, что это будет простое руководство, чтобы показать вам, как начать работу.
У меня есть моя рамка, это рамка размера A4, поэтому она была изменена в Figma, когда рамка была создана с помощью «Paper», а затем A4. Вы можете установить любой размер, какой хотите, но на данный момент он предназначен для документа резюме, это просто размер бумаги A4. Чтобы загрузить кадр, мы можем просто нажать «Экспорт кадров», и это просто загрузит все кадры внутри вашего дизайна Figma. В этом случае у меня есть только один кадр, так что вы можете видеть, что выбран один кадр из одного, и просто чтобы дать вам простой пример того, как это работает, мы просто оставим этот кадр выделенным и нажмем " Экспорт в DOCX".
Это только что сгенерировало для нас файл .docx и сообщает нам, что наш документ Microsoft Word готов к загрузке. Мы можем нажать кнопку загрузки ниже, чтобы сохранить экспортированный файл, поэтому я собираюсь сделать это сейчас и просто нажать кнопку «Загрузить документ Word», и я просто сохраню его на свой рабочий стол. Если я открою этот файл сейчас, я просто дважды щелкну экспортируемый файл .docx; вы можете видеть, что там есть имя страницы с именем файла, а затем сегодняшняя дата, и вы можете видеть, что это файл .docx.
Я просто дважды щелкну файл .docx, и он откроется для меня в Microsoft Word. Здесь мы видим, что весь текст, который у нас был в Figma, был перенесен, изображение, которое у нас есть, было перенесено. и все перенесено, как мы и ожидали. Удобно то, что это также редактируется, поэтому, если бы мы хотели изменить это, мы могли бы довольно легко обновить это; если мы хотим изменить этот текст, мы можем это сделать, все стили были перенесены; это было перенесено со всеми заглавными буквами и интервалами, и у нас есть цвета, немного отличающиеся от черного, и вы можете видеть, что все, что было в Figma, было перенесено, как мы и ожидали.Это действительно здорово, это именно то, что мы хотели, и вы можете обновить этот текст в Microsoft Word, или вы можете снова обновить его в Figma и просто повторно запустить подключаемый модуль Figma, чтобы экспортировать эти кадры в Microsoft Word еще раз.
Чтобы показать вам еще один пример, я просто открою отдельный документ и покажу вам, как выглядит экспорт многостраничного документа, и мы можем просмотреть его всего за секунду. . Я только что переключился на новый файл Figma, и в нем есть куча разных фреймов, поэтому я собираюсь показать вам пример того, как выглядит экспорт страницы или набора фреймов, который не является одним кадр, и я покажу вам, как экспортировать его в произвольном порядке, и покажу, как это выглядит. Еще раз, мы можем открыть расширение CopyDoc, щелкнув правой кнопкой мыши в любом месте, перейдя к «Плагины», нажав «CopyDoc», и это просто перезапустит плагин Figma. Еще раз, мы просто нажмем опцию «Экспорт кадров в Microsoft Word» или «Экспорт кадров Figma в .docx» — это подзаголовок. Если вы просто нажмете на кнопку «Экспорт кадров», вы увидите, что здесь загружены все кадры на нашей странице.
У нас есть все кадры в том порядке, в котором они загружены на левой панели Figma, однако в нашем случае мы на самом деле хотим изменить этот порядок, потому что здесь мы видим, что «Принцип 10 ", который здесь внизу, на самом деле является последним кадром в нашем дизайне. Здесь у нас есть несколько вариантов, мы можем использовать быстрый порядок, поэтому, если вы нажмете на этот раскрывающийся список здесь, вы сможете отсортировать кадры по порядку слоев, вы можете отсортировать их визуально в их столбцах, или их строках, или по имени слоя, поэтому в этом случае я мог бы просто использовать опцию «строки», и вы можете видеть, когда я нажимаю на нее, что она фактически загружает строки одну за другой; он идет сверху слева, полностью, а затем переходит к следующему, идущему к следующему. Я также мог бы использовать параметр столбца, который выглядел бы так, и в этом случае вы можете видеть, что он идет сверху вниз слева направо. В моем случае я просто хочу сохранить его в виде строк.
Еще одна вещь, которую вы можете сделать, если хотите вручную переопределить порядок, — это просто нажать на один из этих маленьких маркеров здесь, щелкнуть и перетащить, и если вы перетащите их, вы также сможете настроить порядок таким образом. ; это просто немного больше настройки. Конечно, если вам нужно изменить, какие кадры включены, вы можете использовать флажки слева, и это будет включать в документ Microsoft Word только те кадры, которые вам действительно нужны. В этом случае я просто хочу сохранить их все там, и теперь, когда я доволен всеми кадрами и порядком, я могу просто нажать кнопку «Экспорт в .DOCX» еще раз, и это будет конвертировать мой документ Figma в документ Microsoft Word. В этом файле есть еще несколько изображений, поэтому это займет немного больше времени, но экспорт этого файла .docx все равно займет у нас всего несколько секунд.
Документ Microsoft Word готов к загрузке, и, как и раньше, мы собираемся нажать «Загрузить документ Word» и сохранить его на рабочем столе. Если я открою его, вы увидите здесь, что файл .docx был сохранен, и если я дважды щелкну файл .docx, вы увидите здесь, что он создал для нас еще один документ Microsoft Word со всеми нашими кадрами из Figma. Они тоже выглядят очень хорошо, и еще раз я могу изменить этот текст, поэтому, если я хочу обновить этот текст, я могу это сделать, и я могу перемещать его. Если мне нужно поднять это, это совершенно нормально, и это именно то, что мы ожидали. У нас есть все наши кадры из дизайна в Figma, экспортированные в Microsoft Word, так что это может быть очень удобно, если вам нужно составить резюме портфолио, или если вам нужно собрать колоду, или набор документов для клиент или внутренне, и вы хотите иметь возможность поделиться этим в форме документа или документа Microsoft Word, тогда экспорт его из Figma в документ Microsoft Word или файл .docx иногда является действительно хорошим способом, если кто-то не у вас есть доступ к Figma, или вам нужно отправить это по электронной почте, через Slack или что-то в этом роде.
Вот как это выглядит, и, как я сказал минуту назад, если мы хотим экспортировать только подмножество этих кадров, я могу просто снова запустить плагин Figma, перейдя на правую сторону и щелкнув значок CopyDoc, и если мы хотим экспортировать только некоторые кадры Figma в Microsoft Word, мы можем перейти сюда с левой стороны и просто выбрать, какие из этих кадров нам действительно нужны. В этом случае нам может понадобиться просто «Введение», нам может понадобиться «Принцип 5» и «Принцип 7»; и я мог бы по какой-то причине захотеть, чтобы «Принцип 7» стоял перед «Принципом 5», так что это просто пример того, как это может выглядеть. Наконец, я просто еще раз нажму «Экспорт в DOCX», и он снова преобразует наш дизайн Figma в Microsoft Word.Он сообщает нам, что документы Microsoft Word готовы, и я просто нажимаю «Загрузить документ Word» и сохраняю его на рабочем столе. Еще раз, я открою этот, и вы увидите, что он экспортировал только три кадра, которые мы указали в плагине Figma, и он также придерживается порядка, который мы только что выбрали, используя порядок перетаскивания. . В конце у нас есть номер пять, а затем номер семь, как в плагине Figma.
Вы можете использовать этот подключаемый модуль Figma для любого из ваших дизайнов Figma, на самом деле не имеет значения размер фреймов, вы можете иметь фреймы разных размеров, и он все равно сможет экспортировать их в один документ, если ты хотел это сделать. Как правило, это работает лучше, если все кадры, которые вы экспортируете в документ Microsoft Word, достаточно однородны, поэтому каким бы вы ни хотели видеть дизайн в Figma, вы можете просто оформить его так, как хотите, все, что вам нужно. знать, что каждый кадр будет рассматриваться как страница в документе Microsoft Word, поэтому какие бы кадры Figma вы ни создавали, они будут доступны вам, когда вы захотите экспортировать их в документ Word. Пока вы делаете это, вы можете создавать все, что захотите, внутри файла Figma.
Последнее, что я хотел бы отметить, это то, что если вы используете шрифт в Figma, который не установлен в вашей системе, то он будет выглядеть немного иначе, потому что шрифт действительно должен быть установлен для визуальной стороны, чтобы он выглядел идеально. Текст по-прежнему будет там, его можно будет редактировать, но он будет выглядеть немного иначе, чем в дизайне Figma, поэтому просто убедитесь, что какие бы шрифты вы ни использовали в своем файле Figma, обязательно установите их, прежде чем открывать документ в Microsoft Word после того, как вы экспортировали его из Figma в файл .docx.
Спасибо за просмотр, и я надеюсь, что если вы пытались экспортировать файлы Figma в документы Microsoft Word или файлы .docx, надеюсь, это руководство было для вас полезным. Я надеюсь, что если вы попробуете свои собственные проекты, у вас будет некоторый успех, и мы очень скоро увидим вас с другими учебниками по Figma, такими как этот. Еще раз спасибо за просмотр.
Читайте также: