Как открыть PSD в Figma?
Доброго времени суток. Есть ли возможность импорта PSD файлов в Figma? И почему при экспорте в Figma в формате skethс бывают заметные баги в отображении?
- Вопрос задан более трёх лет назад
- 139059 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 7
massimodesign @massimodesign
Затем уже скетч перетащите в Фигму
Ответ написан более трёх лет назад
Нравится 18 3 комментария
Возможно, что-то не так с машиной, но при перегоне из .psd теряется почти вся текстура, включая шрифты.
15 ноября, 2020г. — конвертация стоит 5$ =)
Pavel_Druzhinin @Pavel_Druzhinin
404 bio not found
Я из 2021
Не благодарите
Ответ написан более двух лет назад
Нравится 6 4 комментария
за 5$? реально? жесть
UchihaBoy, это за один файл. А если макетов 8 штук в отдельных .psd, то $40 выходит «всего лишь» 🙂
HayPro, ну это специально) мол покупайте подписку на наше приложение)
UchihaBoy, у меня есть подписка, но конвертация отдельно оплачивается.. Вообще грабеж, не ожидал от них такого. Хотя приложение у них реально хорошее.
alina_on_serotonin @alina_on_serotonin
Почти 2022.
Авокод перестал брать деньги за конвертацию +_+
Ответ написан более двух лет назад
Комментировать
Нравится 5 Комментировать
doweb @kostya_dev
Честно, по мне, так это все полный бред использовать. Есть photoshop, в нем лучше и открывать PSD макеты, так как это его родной формат, и не удивительно, что в других программах встречаются баги. Есть .sketch, соответственно так же лучше и открывать в Sketche, максимум можно импорировать в Avocode или Zeplin, так как импорт в эти программы вшит в скетч, что гарантирует более-менее адекватный результат.
Ответ написан более трёх лет назад
Нравится 3 2 комментария
jwwwe @jwwwe Автор вопроса
У меня мака нет, поэтому приходится изворачиваться с открытием скетча.
doweb @kostya_dev
Самый простой вариант для Вас попросить человека, у которого есть МАК, чтобы он через скетч, импортировал макет в Zeplin и все. Просто поверьте.
Импорт и экспорт форматов в Фигме. Конвертирование дизайн-макетов в разные форматы
Есть большой список программ в которых UI/UX дизайнеры создают макеты для сайта. Figma, Sketch, Adobe XD, Photoshop – это лишь небольшой список самых популярных из них. Каждое приложение имеет свои достоинства, которых нет у других. Поэтому иногда необходимо иметь возможность переместить дизайн-макет, сделанный в одной программе, для редактирования его в другой. В данной статье мы затронем способы конвертирования между форматами, в частности для Фигмы. Так как в свете последних событий это является наиболее актуальным.
Какие форматы поддерживает Фигма
Первое, что мы рассмотрим это форматы, которые Figma поддерживает из коробки (то есть вам не требуется установка дополнительных плагинов или расширений, для работы с ними).
Импортировать мы можем почти любые картинки, Sketch файлы и сами файлы Фигмы (.fig)
Экспортировать можно в PDF (но только фреймы, находящиеся в рутовой папке) – это нужно в основном для того, чтобы презентовать ваш макет.
Так-же фигма позволяет экспортировать в PNG и SVG выбранный набор элементов. Делается это через контекстное меню (ПКМ -> Copy/Past as)
На этом возможности фигмы заканчиваются и для взаимодействие с другими форматами, вам нужно приложить чуть больше усилий. Об этом и пойдет речь дальше.
Конверсия между форматами
Прямая конверсия между двумя программами не всегда возможна, поэтому для того чтобы преобразовать дизайн-макет из одной программы в другую нужно преобразовывать макет в промежуточный формат. На диаграмме ниже представлены всевозможные взаимосвязи между форматами.
Если стрелка входит в определенный формат, то это означает, что “исходящий” формат можно стандартными средствами преобразовать во “входящий”. К примеру файлы фотошопа (.psd) могут зачитываться при помощи Adobe Illustrator и Sketch. Или к примеру Фигма может зачитывать Sketch файлы.
Отдельно нужно сказать про EPS и SVG форматы. Они не имеют конкретной программы, которая их создает. Поэтому для них входящая стрелка означает, что “источник” умеет экспортировать в этот формат. К примеру, Sketch умеет экспортировать в формат EPS.
На основе данной диаграммы также можно сделать вывод, что все программы умеют импортировать SVG и почти все экспортировать. Поэтому его можно назвать самым удачным “промежуточным” форматом.
Для того чтобы сконвертировать Фигму в HTML есть 2 способа. Бесплатный и условно-бесплатный. Начнем со второго.
К условно-бесплатным способам можно отнести различный плагины или web-конвертеры, которыми вы можете воспользоваться, но только пока действует бесплатная пробная версия, дальше придется платить. Одним из примеров может быть AnimaApp.
Бесплатный способ более интересный (сложный). Состоит он в следующем -вам нужно экспортировать ваш дизайн-макет в PDF, с помощью стандартных средств Фигмы, после чего найти инструмент, для просмотра пдфника в вебе (Только не используйте стандартный просмотрщик, вам нужен ресурс, который преобразует ваш документ в HTML страничку. Например этот – PDF Viewer). Как можете видеть на картинке ниже, после импорта, ваш PDF превратился в HTML верстку.
После этого скачайте весь сайт при помощи Ctrl + S и вы получите файлы сайты. Теперь осталось дело за малым) Отделить HTML код вашего макета от остальной части скаченного сайта.
Есть вот такой плагин (Protoship Teleport), который позволяет экспортировать любую HTML страничку в Adobe XD файлы. Для этого вам нужно скачать расширение для Google Chrome, а также расширение для самого Adobe XD. Можно посмотреть на странице плагина. Вот так это выглядит:
Export Kit
Отдельное внимание нужно уделить следующему инструменту для экспорта дизайн-макетов в готовые проекты. С помощью данного приложения вы НЕ сможете преобразовать файл из одного дизайн формата в другой. Оно предназначено для конвертирования дизайн-макета в готовый интерактивный проект. Таким образом вы сможете создать дизайн в Figma, Sketch или др. Приложении и на основе него сделать готовую HTML страничку или Android приложение. При этом вы получите не сплошной HTML, а проект созданный c использованием фреймворка (Например с помощью React). Естественно звучит это все слишком хорошо, чтобы быть бесплатным.
Если вам нужен бесплатный рабочий способ, с помощью которого можно преобразовать дизайн из одного формата в другой, то конвертируйте в SVG, после чего вы можете использовать этот файл в любом редакторе. Минусы данного подхода очевидны – далеко не вся информация может быть сконвертированна (например древовидная структура).
Если же вам в первую очередь нужно качество и вы не готовы делать постобработку дизайн-макетов, то пользуйтесь платными плагинами.
Считаете ли вы SVG формат приемлемым для перемещения из одного редактора в другой ? Напишите об этом в комментариях.
Ссылка — на цикл статей по Фигме.
Перенос дизайна из PSD в Figma
Отзыв заказчика о сотрудничестве с Юрієм Гацем
Перенос дизайна из PSD в Figma
Профессионализм
Контактность
Все отлично! Юрий справился с задачей и сделал все как нужно ��
Отзыв фрилансера о сотрудничестве с Романом Р.
Перенос дизайна из PSD в Figma
Постановка задачи
Четкость требований
Контактность
Работать понравилось. Все четко и безпроблемно. Рекомендую.
2 дня 700 UAH
2 дня 700 UAH
Добрый день!
Готов обсудить ваш проект и начать работу!
Примеры в моем портфолио!
Freelancehunt
1 день 700 UAH
1 день 700 UAH
Здравствуйте, Роман!
Перенесу мокап с Adobe Photoshop в Figma.
Обсудим подробности?
1 день 500 UAH
1 день 500 UAH
Здравствуйте, Роман!
Готова перенести дизайн в Фигму, имею большой опыт работы в этой программе.
1 день 1500 UAH
1 день 1500 UAH
Готова приступить к работе. Для выполнения вашей задачи нужен psd файл и доступ к вашей фигме. Быстро и качественно выполню работу.
1 день 700 UAH
1 день 700 UAH
Привет, опыт в дизайне почти 6 лет. Задание сделаю качественно, аккуратно и быстро. Вот моё портфолио Behance
1 день 200 UAH
1 день 200 UAH
Здравствуйте, Роман!
С Вашими требованиями ознакомлен — интересный проект! Буду рад его реализовать! Есть опыт в решении такого рода задач! Однако у меня возникли некоторые вопросы, поэтому хотел бы детальнее обсудить задачу, напишите мне в личные сообщение, всё обсудим.
Сделаю за приятную цену и не большие сроки — в рамках данного проекта.
Моё портфолио на Behance: Behance
Основная программа для работы — Figma. Также владею такими программами как Adobe Photoshop, Adobe Illustrator, Adobe XD.
Свободен для работы, напишите мне в Личные сообщения! Всегда рад сотрудничеству!
Мой девиз — качественно и в срок!
Импорт файла Photoshop .psd в Figma: простой способ
Вы когда-нибудь задумывались, как преобразовать дизайн Photoshop для использование в современном дизайне инструмента; Фигма!
Введите адрес электронной почты для получения эскиза file
Дождитесь завершения загрузки, но убедитесь, что у вас хорошее подключение к Интернету.
Подождите, пока он загрузится.
Убедитесь, что вы получили подтверждение после завершения, что оно было отправлено на ваш адрес электронной почты.
Подтверждающее сообщение
Теперь !! Проверьте свою почту, чтобы загрузить Sketch-копию вашего дизайна Photoshop и импортировать ее в Figma.
Просто импортируйте ее в Figma после загрузки файла Sketch и наслаждайтесь, Figma вам поможет.
Ага !! Теперь у вас есть преобразованный дизайн. Не обращайте на меня внимания, я изменил файл из-за его размера
Но подождите, это еще не конец. После загрузки и скачивания вы получите один месяц бесплатного использования Avocode.