Как открыть файл скетча в Figma

Обновлено: 21.11.2024

Краткий обзор ↬ Смена инструментов — это непростое решение. Вот основные моменты и закулисный взгляд на то, как Help Scout мигрировал системы дизайна со Sketch на Figma — почему мы сделали переход, пошаговое руководство, что это повлекло за собой, и что мы получили это — история, которая применима к любой команде, рассматривающей возможность крупномасштабной миграции инструментов.

За последний год каждый раз, когда я разочаровывался в Sketch, мой коллега предлагал попробовать Figma. Затем, когда я написал статью о создании нашей системы дизайна в Sketch, я получил множество отзывов от людей, которые советовали мне попробовать Figma. А недавно Линда, наш руководитель отдела дизайна в Help Scout, спросила меня: «Привет, Базз, а не использовать ли нам Figma?»

Я больше не мог сопротивляться… Я просто обязан был попробовать Figma!

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

Понимание стоимости

Сложность для нас в Help Scout заключалась в том, что наша система дизайна построена в виде нескольких взаимозависимых библиотек Sketch, управляемых с помощью GitHub. У нас также есть несколько проектов, процессов и обширная документация, которые зависят от файлов Sketch. И не забывайте о монументальных усилиях, связанных с обучением и переводом всей команды на новый инструмент при одновременном выполнении реальной работы!

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

Но вот как это работает. Инструменты «прилипают» только потому, что их трудно оставить. Достаточно сказать, что мы не собирались принимать это решение легкомысленно.

Познакомьтесь с потрясающими онлайн-семинарами по внешнему интерфейсу и пользовательскому интерфейсу с практическими выводами, сеансами в прямом эфире, видеозаписями и дружескими вопросами и ответами. О дизайн-системах, CSS/JS и UX. С Кэри Фишер, Стефаном Баумгартнером и многими другими.

Пинать шины

Понимая, что мое решение повлияет на всю команду и организацию, я начал с двух полных дней изучения Figma. Я смотрел видео, разговаривал с другими дизайнерами, которые часто его используют, и я играл с этим инструментом… много! По сути, я исследовал, насколько легко будет перемещать наши компоненты Sketch. На ум пришел вопрос: будет ли это так же просто, как открыть файл .sketch в Figma?

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

Слишком сложно? да. Но нам это помогло.

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

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

Время принятия решения!

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

Но, как оказалось, Figma являются клиентами Help Scout. Услышав о нашем решении остаться со Sketch, наш руководитель отдела продаж связался с командой разработчиков Figma — не обязательно для того, чтобы изменить чье-то мнение, а чтобы поделиться своим опытом, скорее, как это делают друзья. Понятно, что они спокойно относились ко всему этому, но спросили, могут ли они поговорить со мной о моих решениях. И это была возможность, которую нельзя было упустить!

За несколько дней до моего разговора с командой Figma я решил вернуться к инструменту — по крайней мере, чтобы дать себе достаточно понимания, чтобы иметь возможность говорить уверенно и не выглядеть перед собой полным любителем. людей, которые знали намного больше в этой области, чем я.К тому времени, когда я поговорил с командой, я уже был новообращенным — всего за пару дополнительных дней я понял, насколько продуктивнее и продуктивнее мы будем работать вместе, имея в своем распоряжении такие функции. Стоимость перехода не изменилась, но изменилось мое мнение о том, стоит ли оно того. Руководитель отдела дизайна Help Scout также убедительно высказался по этому поводу: если мы чувствуем, что когда-нибудь изменимся, то почему бы не сегодня?

Поэтому мой разговор с Figma закончился примерно так: «Дайте мне несколько советов, как заставить это работать», что они любезно и сделали.

Как переключиться

Так что вполне возможно, что вы находитесь в том же месте, что и я; вы хотите переместить инструменты, но столкнулись с монументальной задачей перестройки сотен компонентов, стилей и большого количества документации. Что ж, друг, тебе нужно будет использовать обдуманный и систематический подход к этому. Ваш пробег может отличаться, но именно так я всего за неделю перенес всю систему дизайна Help Scout в Figma.

1. Разделите свои библиотеки

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

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

2. Сильно опирайтесь на стили (+ документация)

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

3. Показать, как расширяются компоненты

Поскольку Figma позволяет намного лучше контролировать расширение компонентов, вы, вероятно, получите меньше компонентов, чем в Sketch — вместо «кнопка сплошного цвета» и « кнопка обведена», в Figma вам понадобится просто «кнопка». Из-за этого я обнаружил, что важно документировать различные способы расширения компонента непосредственно в самой библиотеке.

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

4. Организуйте правильно

Я быстро отказался от попыток воспроизвести структуру именования, которая была у меня в исходных файлах Sketch, из-за незначительных различий в том, как работает файловая система Figma. В конечном счете, цель состоит в том, чтобы убедиться, что компоненты находятся в логичном месте и их легко найти, и лучший способ, который я нашел для достижения этого, — тщательно организовать мои Страницы по категориям (например, Формы), < em>Кадры по групповой классификации (например, Входные данные) и Компоненты по отдельным элементам (например, Ошибка). Точность именования упрощает поиск компонентов, особенно теми, кто изначально их не создавал.

5. Импорт и пересборка

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

Мой рабочий процесс в Figma для воссоздания более сложных компонентов Sketch буквально заключался в том, чтобы сделать снимок экрана, а затем «отследить» их в Figma. Как бы нелепо это не звучало, но это оказалось гораздо быстрее, чем импорт из Sketch и удаление ненужных элементов. И мне немного стыдно признаться, что я люблю такую работу, но оказалось, что этот рабочий процесс был более эффективным.

(Но, конечно, если вы переносите более простые компоненты, такие как значки, возможности импорта Figma вам очень пригодятся.)

Взгляд на мой день (большой предварительный просмотр)

6. Привлеките свою команду

Поскольку команда Help Scout работает на 100 % удаленно, мы хорошо сообщаем о большинстве своих дел — и это не исключение. Так что, хотя команда знала о предстоящей смене инструмента, они поняли это только после того, как я закончил дизайн-систему.

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

Исходное видео, которым я поделился со своей командой

7. Идти ва-банк

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

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

Конечно, библиотеки Sketch все еще существуют; они просто больше не документируются и не обновляются. А с точки зрения миграции, текущие проекты продолжают использовать файлы Sketch (хотя некоторые дизайнеры решили перенести свою работу в Figma), тогда как новые проекты используют Figma. Это полный прорыв.

Вывод: составьте план!

Невозможно завершить подобную статью без того, чтобы не сказать, что у меня есть ответы на все вопросы, а на самом деле это не так. Но мой совет всем, кто переключается с одного инструмента на другой: не торопитесь. Проведите исследование, составьте план атаки, рассчитайте стоимость, а затем взвесьте, готовы ли вы ее заплатить — это применимо, если вы переходите на Figma, Sketch, InVision Studio, Adobe XD, Framer X или какой-либо другой. модный новый инструмент, о котором я еще не слышал.

Что касается нас, время покажет, но я все еще уверен, что мы сделали правильный выбор!

Многие дизайнеры продолжают работать в знакомых им программах, таких как 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.

2.3 Перерисовать макеты с использованием компонентов из библиотеки.
На основе созданной библиотеки проще собирать новые страницы. У нас уже есть кубики Лего (Компоненты), из которых нам нужно собрать фигурки (Макеты).

Скопируйте нужный экран в 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 для банков

Как создать финансовое приложение

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

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

Самое главное

Создайте новый проект внутри Infinum Team. Если у вас нет доступа к команде, свяжитесь с одним из руководителей команды, чтобы добавить вас. Внутри проекта вы можете добавить несколько файлов. Мы советуем вам пригласить вашего менеджера проекта, разработчиков и клиентов с разрешением только на просмотр.

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

Сохраните последнюю версию файла Sketch локально из Abstract. Затем откройте Figma и добавьте в проект новый файл. Затем выберите Файл → Создать из файла эскиза. После того, как вы выберете это, Figma потребуется некоторое время, чтобы загрузить ваш файл. ⏳

Теперь, когда ваш файл загружен, пришло время его упорядочить и почистить. Библиотека дизайн-системы — это первое, что вам нужно создать. Если это сбивает с толку, библиотека похожа на страницу символов в Sketch, только хранится в другом файле, который вы подключили к своему рабочему файлу. Figma использует Компоненты вместо символов, которые вы можете использовать в своих файлах дизайна. При повторном использовании они называются экземплярами. Мы различаем их по символам. Кроме того, вы получаете доступ к экземплярам на панели «Ресурсы».

Итак, как библиотека работает с импортированным файлом? Необходимо создать библиотеку и соединить ее с импортированным файлом, который теперь фактически является одним файлом. Но как разделить этот файл на библиотеку и рабочий файл с экранами?

Сначала откройте импортированный файл и перейдите в раздел Активы → Коллективная библиотека, а затем нажмите Опубликовать. Теперь нажмите Переместить в библиотеку группы и выберите свою команду. Следующим шагом является добавление краткого описания, если хотите, затем нажмите Опубликовать, и вы получите библиотеку вашего проекта. ✨

Теперь, когда вы опубликовали библиотеку проекта, в проекте выберите Файл → Создать. Вам нужно создать новый рабочий файл, в который вы скопируете все свои экраны из библиотеки (постранично) и оставите только страницу символов в исходном файле библиотеки. Здесь вы найдете все компоненты вашего проекта.

Но если вы хотите, чтобы это работало, вы должны подключить свой новый файл к библиотеке. Для этого перейдите в Активы → Коллективная библиотека в новом рабочем файле и активируйте библиотеку, которую вы опубликовали всего несколько минут назад.

Теперь пришло время скопировать и вставить. В новом рабочем файле создайте New Page и начните копировать свои экраны (Page by Page). Когда вы скопируете первую партию экранов, нажмите на один из экземпляров (экс-символы). Затем щелкните правой кнопкой мыши и выберите «Перейти к основному компоненту».Если вы автоматически переключились на другую вкладку в файле вашей библиотеки, вы все сделали правильно! И не забудьте удалить свои экраны из файла библиотеки. Оставьте только страницу Компоненты.

Что делать дальше?

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

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

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

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

Советы и рекомендации

Если вы не организовали свой файл Sketch аккуратно, не беспокойтесь об организации его в Sketch, если вы перенесете его в Figma. Figma обрабатывает некоторые ситуации по-разному, поэтому лучше всего начать с нуля в Figma.

Не забудьте развернуть все штрихи и значки в файле эскиза. Таким образом, они могут не ошибиться во время импорта.

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

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

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

Как преобразовать Sketch в Figma

Пользовательский интерфейс Figma довольно прост и удобен в использовании. Прежде чем мы начнем, очень важно отметить, что все пользователи, имеющие доступ к просмотрщику, могут копировать активы, если этот параметр не отключен. Пользователи любого плана могут копировать активы в Figma. Импорт векторов может привести к потере качества, использование файлов SVG — это процесс без потерь. Если можете, используйте файлы SVG, потому что они позволяют импортировать графику, значки или полные монтажные области

Шаг 1. Откройте эскиз

Первое, что вам нужно сделать, это запустить настольное приложение Sketch. Это позволит вам получить доступ к файлам, которые вы хотите импортировать в Figma. Если файлы, которые вы хотите импортировать, не в формате SVG, попробуйте преобразовать их в файлы SVG, чтобы уменьшить потерю качества

Шаг 2. Выберите элементы, которые хотите скопировать

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

Шаг 3. Скопируйте выбранные элементы

После выбора элементов вы должны скопировать их в буфер обмена. Я приказываю импортировать их в Figma. Выбрав элементы, выберите «Копировать как SVG». Это скопирует все выбранные элементы в буфер обмена.

Шаг 4. Откройте файл Figma

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

Шаг 5. Вставьте элементы на холст Figma

Открыв холст Figma, вставьте скопированные элементы в буфер обмена. Просто нажмите CNTRL + V. Когда вы закончите вставку, вы можете работать над своим дизайном и создавать что-то красивое.

Есть ли альтернатива?

Импорт из Sketch в Figma может показаться довольно громоздкой задачей в любое время, когда вы хотите переключиться с рабочего стола на веб-сайт. Это может сделать ваш опыт веб-дизайна настоящим кошмаром, но хорошо, что есть альтернатива, и она называется Wondershare Mockitt предоставляет вам современные инструменты и безупречный пользовательский интерфейс, который прост в использовании.

Wondershare Mockitt является инновационным продуктом и объединяет все, что вам нужно в программном обеспечении для веб-дизайна, в одном месте. В отличие от Sketch, Wondershare Mockitt работает как на Windows, так и на Mac. Это очень важная функция, поскольку она подходит как для пользователей Mac, так и для Windows.

Microbot предлагает огромное количество шаблонов, которые отличаются стильным дизайном и эффективностью. Шаблоны довольно крутые и их очень много, невозможно не найти подходящий шаблон для вашего дизайна. Проектировать каркасы и прототипы с помощью Wondershare Mockitt очень просто; интерфейс помещает все необходимые инструменты в нужное место. Тот факт, что вы можете просто перетаскивать виджеты на холст, создавая бесшовный дизайн, является одной из основных причин, по которой он выделяется. Вы также можете предварительно просмотреть взаимодействие после перетаскивания.

Что мне не нравится в Sketch, так это то, что это настольное приложение, которое не работает в Интернете. Это означает, что вы не можете работать совместно с другими дизайнерами. С другой стороны, Wondershare Mockitt является настольным приложением, но также работает в Интернете. Это означает, что вы можете легко работать над проектом с другими дизайнерами, чтобы создать что-то замечательное. Wondershare Mockitt позволяет всем людям, работающим над проектом, комментировать проект, что является чем-то совершенно новым, когда речь идет о программном обеспечении для веб-дизайна. Microbot также предлагает облачный доступ, что означает, что вы можете работать над своим проектом из любой точки мира, что удобно.

Лучшая альтернатива XD и Sketch в 2020 году

Если вы уже использовали Sketch и теперь убеждены, что Wondershare Mockitt может быть подходящим программным обеспечением для вас, и вы готовы к этому, переключитесь на одну вещь, о которой вам не нужно беспокоиться, — это потеря файлов Sketch, которые у вас уже есть. . В Wondershare Mockitt есть плагин, позволяющий легко синхронизировать файлы Sketch с Wondershare Mockitt

Как импортировать файлы скетчей в Wondershare Mockitt

Шаг 1. Установите подключаемый модуль Sketch для Wondershare Mockitt

Первый шаг, который вам нужно сделать, это загрузить подключаемый модуль Sketch для Wondershare Mockitt. Плагин можно скачать по ссылке, указанной ниже.

Шаг 2. Установите подключаемый модуль Sketch для Wondershare Mockitt

Установите загруженный подключаемый модуль Sketch. После установки плагина перезапустите Sketch.

Шаг 3. Запуск эскиза

После установки плагина запустите Sketch, и после запуска Sketch выберите файлы, которые вы хотите импортировать

Шаг 4. Выберите и импортируйте файлы

После выбора файлов, которые вы хотите импортировать в Wondershare Mockitt, нажмите «Плагины», затем выберите «Wondershare Mockitt», затем выберите «Экспортировать в

Шаг 5. Импорт

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

Цифровой дизайн — это увлекательное занятие, а с такими инструментами, как Wondershare Mockitt, это может стать весьма захватывающим занятием.

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