Как переименовать файл в Figma
Обновлено: 21.11.2024
Многие дизайнеры продолжают работать в знакомых им программах, таких как Sketch, даже если новые программы, такие как Figma, превзошли их по функциональности и возможностям. Figma стала лидером рынка благодаря своей глубокой функциональности. Его преимущества включают в себя:
- Совместимость с любой операционной системой, не только с MacOS (например, со Sketch).
- Упрощенная командная работа: все члены команды могут одновременно работать над одним и тем же файлом.
- Автосохранение включено. История обновлений хранится в облаке.
- Передача проекта команде разработчиков не требует дополнительных программ; все могут работать в одном файле.
- Многие функции автоматизируют процесс проектирования, повышая производительность команды.
- Каждый, у кого есть ссылка, может прокомментировать дизайн — редакция, руководство, маркетинг.
Однако изощренность Figma представляет собой кривую обучения, которую необходимо преодолеть.
Научиться переносу проекта из Sketch в Figma может быть хорошим способом начать изучение программы для новых пользователей. В этом руководстве по Figma основное внимание будет уделено процессу передачи макетов и тому, как упростить этот процесс.
Figma и Sketch похожи, но несовместимы. Это означает, что вы не можете открыть проект Sketch в Figma. Так как это разные графические редакторы, многие объекты искажаются, что влияет на их дизайн. Вот пример того, как искажаются объекты при переносе:
Как импортировать из Sketch в Figma и сохранить дизайн
Ниже приведено пошаговое руководство по подготовке к переносу вашего файла из Sketch в Figma без искажений и потерь. Он проведет вас через две основные задачи: создание библиотеки и перенос проекта.
1. Создайте библиотеку с компонентами и стилями в Figma.
1.1 Создайте новый файл в Figma. Это будет не рабочий файл, а файл для библиотеки. В нем мы будем собирать объекты, которые часто повторяются в проекте, а затем настраивать их внешний вид. Таким образом, мы создадим шаблоны объектов, которые можно менять, а не настраивать каждый раз с самого начала. Figma позволяет сделать их очень гибкими, поэтому не пропускайте этот шаг.
1.2 Перерисовать все часто повторяющиеся компоненты в этот файл (Кнопки, Аккордеоны, Карточки и т. д.).
1.3 Сделайте их гибкими (настройте ограничения). Это помогает создать адаптивный дизайн и множество подобных компонентов в проекте (например, диалоговое окно с разной шириной для разных целей).
Посмотрите, как это сделать, на YouTube.
1.4 Добавьте четкие имена для объектов (например, Button, Checkbox и т. д.). Это могут быть те же имена, что и у объектов Sketch. Это позволяет легко найти компонент в проекте, когда мы связываем библиотеку с рабочим файлом.
1.5 Создайте родительские компоненты, чтобы дочерние компоненты в вашем дизайне наследовали настройки родителя. Для этого выберите объект и нажмите кнопку создания компонентов вверху.
1.6 Добавьте различные состояния компонентов и объедините их в варианты. Это поможет вам быстро переключаться между состояниями компонента (например, изменить метку Primary на метку Error, не задавая цвет и размер).
Посмотрите, как это сделать, на YouTube.
Figma также позволяет создавать стили для цветов и эффектов. Например, вам нужно изменить оттенок красного для всех красных компонентов в проекте. Если мы внесем изменения в стиль красного цвета, то они будут применены ко всем объектам, к которым вы привязали этот цвет.
2. Перенос проекта
Настроив компоненты библиотеки, мы можем приступить к импорту проекта из Sketch в Figma.
2.1 Создайте рабочий файл в Figma
2.2 Свяжите созданную библиотеку с рабочим файлом. После этого все изменения в библиотеке будут продублированы в рабочем файле и больше не нужно будет открывать файл библиотеки для добавления компонента в конструкцию. Чтобы найти компонент, введите его название в поле поиска на вкладке "Активы".
Посмотрите, как это сделать, на YouTube.
На основе созданной библиотеки проще собирать новые страницы. У нас уже есть кубики Лего (Компоненты), из которых нам нужно собрать фигурки (Макеты).
- Скопируйте нужный экран в Sketch и перетащите его в открытый рабочий проект.
- Перерисовать объекты экрана, используя компоненты, шрифты, цвета из библиотеки.
- Редко встречающиеся объекты рисуются заново.
Совет: Чтобы ускорить работу, вы можете импортировать весь проект из Sketch в Figma и использовать искаженные макеты в качестве основы для дизайна макета в Figma. Но обязательно сравните их с исходным экраном.
Как это сделать: перетащите файл эскиза в черновик Figma. Добавляйте именно весь файл проекта, потому что в качестве экрана добавляется отдельный макет, а нам нужна редактируемая база. При создании макета копируйте нужный макет из переданного проекта в рабочий файл и работайте с ним.
Упрощение переноса из Sketch в Figma
Приведите в порядок страницы. Правильно называйте макеты и компоненты, располагайте макеты в логической последовательности, переименовывайте каждую страницу в соответствии с содержанием и многое другое. Оформите все страницы одинаково, чтобы не запутаться и не запутать членов команды, которые будут работать над проектом. Это особенно верно, если команда раньше не работала с Figma.
Импортируйте макеты Sketch в качестве основы дизайна. Если вы никогда не работали в Figma, то это отличный способ освоить новый инструмент. С учетом того, что вам не нужно отвлекаться на создание дизайна. Вы просто копируете то, над чем работали в Sketch, и добавляете компоненты из библиотеки.
Создавайте структуру с самого начала. Если у вас нет файловой структуры в Sketch, лучше сразу начать создавать ее в Figma. Таким образом, вам и другим членам команды будет легче работать.
Используйте стили в Figma. Например, текстовые шрифты очень гибкие — вы можете добавлять разные цвета и выравнивание для одного и того же стиля шрифта. Теперь вам не нужно создавать отдельные стили H1 с выравниванием по центру и H1 с выравниванием по левому краю.
Кроме того, стили можно применять не только к цвету и шрифтам, но и к эффектам.
Проверьте параметры шрифта. Если шрифт в Figma визуально отличается от шрифта в Sketch, проверьте, не битый ли шрифт в Sketch. Если рядом с названием шрифта стоит звездочка, то этот шрифт битый и не соответствует библиотеке в Sketch. Нажмите кнопку "Отсоединить", чтобы увидеть его реальные параметры.
Если вы не видите параметры шрифта в Sketch, скорее всего шрифт, использованный в дизайне, не установлен на вашем компьютере. Загрузите шрифт (например, из библиотеки шрифтов Google), установите его на свой компьютер и перезапустите Sketch, чтобы увидеть параметры шрифта.
Обзор
Надеемся, этот учебник по Figma по импорту вашего проекта Sketch в Figma был вам полезен. Подпишитесь на Windmill в LinkedIn, чтобы получить больше практических советов по дизайну. Figma — это ключевой инструмент, который Windmill использует в рамках своих услуг по проектированию и разработке цифровых продуктов. Узнайте, как Windmill может воплотить ваши идеи в жизнь.
Биография: Илона Елецкая — UX-дизайнер в Windmill. С тех пор как она присоединилась к команде дизайнеров Windmill, она работала над дизайном веб-сайта Windmill и в настоящее время работает над финтех-продуктом.
Сталкиваетесь с проблемой цифрового продукта?
В качестве руководства и партнера мы поможем вам внести эффективные изменения и порадовать ваших клиентов.
Еще статьи
Как провести семинар Design Sprint для банков
Как создать финансовое приложение
В этой статье я собрал 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 с цветами, стилями текста, стилями эффектов или компонентами, к которым вы хотите получить доступ внутри других файлов. У него нет каких-либо особых свойств, которые делают его библиотекой, кроме того факта, что вы делитесь им с другими своими файлами.
У вас может быть столько файлов библиотеки Figma, сколько вы хотите, поэтому, если вы предпочитаете разделить свою систему дизайна или библиотеку компонентов на множество файлов, вы можете сделать это и просто поделиться ими всеми. Библиотеки безумно эффективны, но это в другой раз!
В этой статье о миграции говорится с точки зрения системы дизайна, но она применима и к обычным файлам эскизов.
Во-первых, вам следует тщательно обдумать свой подход к миграции. Не все файлы Sketch созданы одинаковыми, и не все команды называют свои файлы одинаково, поэтому в этой статье предполагается, что вы уже согласовали имена монтажной области, чтобы обеспечить некоторую согласованность.
В идеале вам нужно переименовать все свои монтажные области, чтобы они соответствовали соглашению об именах /, таким как Hero/Title/Bold/ и т. д. Это позволяет Figma вкладывать ваши стили в папки, что значительно упрощает навигацию.
Затем вам нужно загрузить плагин Batch››styler в свою учетную запись Figma. Бесстыдно, это мой собственный плагин, но именно поэтому я его создал. Batch››styler — это плагин без интерфейса, который берет все, что находится в вашем текущем выделении, и анализирует его для создания локальных стилей. Это именно то, что мы хотим воспроизвести в вашей опубликованной системе проектирования эскизов.
Наконец, вам нужно убедиться, что ваш файл Sketch Design System сохранен локально (если вы используете Sketch Workspace), чтобы мы могли легко импортировать его в Figma на следующем шаге.
(Приблизительное время — 1–2 минуты)
В Figma импорт очень прост. Как правило, я перехожу к файловому браузеру (раздел с «Недавние» в заголовке) с помощью CMD + 1 и выбираю значок «Импорт» (стрелка, прыгающая в поле). В настоящее время он находится в правом верхнем углу или доступен с помощью значка «Плюс», который появляется рядом с любой папкой проекта (включая «Черновики»).
Затем вы можете перейти туда, где вы сохранили свою библиотеку Sketch, и либо дважды щелкнуть, либо выбрать и выбрать «Открыть». После этого начнется процесс импорта.
В качестве альтернативы вы можете просто перетащить файл, и Figma автоматически импортирует его в ваши черновики.
При успешном импорте (в зависимости от размера файла, время для этого может быть разным, но в нашей большой библиотеке это заняло около минуты) вы увидите успешное состояние диалогового окна импорта и новый файл Figma в списке «Недавние» в левое верхнее положение. Вы можете импортировать столько файлов за раз, сколько хотите (это важно в дальнейшем, если вы хотите перенести все файлы вашего текущего проекта Sketch), просто выделив их все и нажав кнопку «Открыть».
Переименование
(Добавляет около — 1–3 минуты)
Возможно, вам придется переименовать ваши файлы, если на предыдущем этапе настройки вы не использовали соглашение об именах /. Если да, то Figma теперь ваш лучший друг. Выделите все слои, которые нужно переименовать, нажмите CMD (CTRL) + R, а затем введите соответствующую настройку последовательности имен, чтобы отразить то, что работает для вас. Есть даже удобные ярлыки регулярных выражений для вставки чисел по возрастанию/убыванию и имени текущего файла, где это необходимо. Если вы хотите усложнить задачу, вы можете это сделать, и у Энтони ДиСпецио из Figma есть для вас несколько очень удобных ярлыков.
(Расчетное время — 1 минута)
Теперь, когда у вас есть новый блестящий файл Figma, отражающий вашу систему проектирования эскизов, вы можете работать над созданием эквивалента Figma. Вот где это может быть очень быстро.
Если все ваши элементы в настоящее время находятся на монтажных областях, нажмите CMD (CTRL) + A, а затем нажмите Enter/Return на клавиатуре. Вы увидите, что все ваши дочерние слои выделены и готовы к работе.
Затем, когда все это выделено, введите CMD (CTRL) + / (примечание: на некоторых клавиатурах вам нужно выбрать CMD (CTRL) + P), чтобы открыть меню и открыть Batch››styler (или щелкните правой кнопкой мыши и найдите там плагин).
Как только вы это сделаете, плагин мгновенно запустится и проанализирует все выбранные вами слои. Если какие-либо слои следуют префиксу Layer.type по умолчанию, например Frame 1 или Artboard 1, Batch››styler проигнорирует стиль, хлопнет вас по запястью, предложит открыть функцию переименования Figma по умолчанию и немедленно закроется.
Но это потому, что вы непослушный дизайнер, и теперь это займет чуть больше 5 минут…
После успешного применения стилей вы сразу же увидите их на правой панели (или в меню «Текст», «Заливки», «Эффекты» соответственно). Если вы хорошо вложили свои файлы, вы увидите хороший набор родительских папок.
И при расширении вы увидите все дочерние папки, красиво вложенные внутрь, как и ожидалось. И все это без необходимости делать что-либо, кроме запуска одного плагина из меню. Магия.
Если ваша дизайн-система разделена на несколько страниц, вам нужно будет выделить эти элементы и запустить их отдельно. Это сделано намеренно, потому что не все в файле будет стилем (например, у вас могут быть страницы с большим количеством аннотаций и описаний, которые не предназначены для превращения в стили).
(Приблизительное время — 2 минуты)
Теперь осталось только опубликовать вашу новую блестящую дизайн-систему, чтобы вы и ваша команда могли ее использовать. Это так же просто, как выбрать пункт меню «Активы» на левой панели «Слои/Ресурсы», выбрать значок «Библиотека» (книга), а затем нажать светящуюся (не светящуюся) кнопку «Опубликовать». Теперь в любом из ваших файлов Figma вы можете включить эту библиотеку (или для каждого файла в настройках учетной записи) и наслаждаться новой жизнью без Sketch.
Я проверил это сам в оптимальных условиях, от сохранения до использования, и это действительно возможно сделать примерно за 5 минут. Ваш пробег, конечно, может варьироваться, но это не так сложно, как вы думаете, переключиться.
Рискните и дайте мне знать, что вы думаете в комментариях ниже. Может быть, даже взломать секундомер и записать туда время!
Figma – это первый инструмент для совместной работы над пользовательским интерфейсом, встроенный в браузер. Присоединяйтесь к нашему растущему сообществу и начните общение!
Компоненты отсоединяются после смены имени, я несчастен из-за компонентов.
У сообщества Figma появился новый дом. Эта нить сохранена для исторических целей. Содержание этого разговора может быть неточным или устаревшим. Перейти на новую страницу сообщества →
Я только что перевел свою команду на Figma, и функции совместной работы действительно великолепны. Однако я трачу так много времени на управление компонентами в Figma.
Процесс перемещения компонентов во фреймы имен и именования самих фреймов компонентов — очень утомительный процесс, и затем я обнаружил, что после переименования и перемещения группы компонентов (в одном файле) почти 50 % экземпляров моих компонентов теперь больше не подключены к родительским компонентам на странице компонентов, а вместо этого просят меня «Восстановить главный компонент». Чтобы исправить это, мне буквально придется просмотреть КАЖДЫЙ КОМПОНЕНТ в моем документе и переподключить его к правильному родительскому компоненту, а затем исправить все переопределения, которые не были преобразованы при замене.
Это будет происходить каждый раз, когда я переименовываю компонент? Что тут происходит? Можем ли мы хотя бы получить инструмент для поиска отдельных компонентов или компонентов без родителя? Как насчет поиска даже имен компонентов/слоев в моем списке слоев?
Что касается организации компонентов, эта система именованных фреймов не является улучшением по сравнению со Sketch. Это иерархическая организация, она не должна требовать изменения размеров фреймов только для того, чтобы поместить в них новый компонент. Просто дайте мне несколько папок с визуализациями каждого компонента и позвольте мне перетащить их, чтобы упорядочить. Позвольте мне отсортировать по имени, наиболее часто используемому и т. д.
Это даже не говорит о том, как неприятно создавать элемент, который вы хотите использовать в качестве компонента, а затем заменять его собственным экземпляром, просто чтобы переместить его на страницу компонентов или в файл библиотеки.
Я был так счастлив отвлечься от разочарований Sketch и теперь столкнулся с совершенно другим, но столь же разочаровывающим набором.
Мне кажется, теперь у Figma такой отличный набор функций, что нужно провести несколько спринтов по доработке существующих функций и пользовательского интерфейса.
Читайте также: