Как перевести psd в figma
Функция экспорта в Figma
Основные вопросы:
Как делать в Figma экспорт элементов или групп? Какие виды объектов можно экспортировать в figma и как сохранить в фигме работу?
Функция экспорта в Figma позволяет не только выводить готовый дизайн в единое изображение, но и помогает нарезать макет для будущей верстки интерфейса. Данная функция находится внизу в правом нижнем углу программы.
Экспорт в JPG
Экспорт макет в формат изображения JPG является самым популярным. В настройках экспорт вы можете управлять масштабом экспорта, добавлять суффиксы к имени, он будет вписан после имени файла, а также если вы хотите экспортировать несколько версий макетов (версия для клиента, для портфолио, для behance), то просто нажмите на знак плюса и настройте нужные опции.
Экспорт в PDF
По моему мнению данный формат не очень нужен, так как на выходе вы получаете документ, который в несколько раз больше весит, чем картинка. И если у клиента нет программы для чтения данного формата – он просто не сможет открыть его.
Но у этого формата есть особенности экспорта:
Казалось бы преимущества очевидны, но на практике, лично я еще ни разу не сталкивался с просьбой предоставить макет в формате PDF.
Экспорт в PSD
Очень частый вопрос: как открыть psd в Figma, или как загрузить psd в Figma? К сожалению, в Figma не предусмотрен экспорт в программу Adobe Photoshop. Так как фотошоп более сложная программа, то и интерпретатор для него будет сложно написать. Поэтому разработчики, по моему мнению, просто не хотят тратить время на разработку данного решения. Да оно и не нужно особо, так как все больше людей переходит на специализированный для веб-дизайна софт.
Экспорт в SVG
Экспорт в HTML
Функции экспорта в html в программе Figma нет. Но есть подсказки для верстальщика в виде свойств каждого объекта. Они находятся в левой вкладке «Code». Здесь вы получите полный список CSS свойств для верстки сайта, а также параметры для разработчиков на iOS и Android.
Один из вопросов, который волнует начинающих пользователей: как сохранить проект в фигма?
Сохранение проекта в Figma происходит с помощью экспорта файла с расширением «.fig». Для этого нужно в главном меню выбрать пункт «Save as».
Этому вопросу я посвятил видео, которое вы можете посмотреть ниже.
Из Figma в Photoshop. Как проект из фигмы перенести в фотошоп.
В данной статье и видео вы узнаете как экспортировать проект из Figma в photoshop и перевести файл в формате FIG в PSD. Ниже видео и пошаговая инструкция в формате статьи.
Как из фигмы перенести в фотошоп
Чтобы перенести файл из фигмы в фотошоп, нужно сделать 4 шага:
2. Перенести проект в онлайн сервис Photopea.
3. Сохранить проект в формате PSD.
4. Открыть проект в Photoshop.
Перенос проекта фигмы в онлайн сервис Photopea
Сервис photopea находится по адресу photopea.com
Для удобства использования сервисом «Photopea», лучше поставить русский язык. Для этого наверху нажмите на надпись «Account», далее вкладка «Language» и выберите русский язык из списка.
Выберите файл фигмы, который сохранили на компьютере и перенесите его в сервис, как показано на скриншоте выше.
Макет будет выглядеть следующем образом. Просмотрите внимательно насколько корректно все отображается в сервисе. Все ли элементы находятся на своих местах и нет ли каких-то багов.
Например в некоторых местах может съезжать текст. Это можно исправить просто выбрав текстовый фрейм.
Конвертация файла из фигмы (.fig) в формат фотошопа (PSD)
Открываем файл из фигмы в фотошопе
Теперь можно открыть файл фигмы в фотошопе. Получается практически такой же дизайн макет как и в Figma. Иногда бывают небольшие баги.
Если посмотреть в слои, то будут такие же слои как и в Figma. Можно даже отключать и включать эффекты тени или размытия, которые вы добавили в фигме.
Кстати, макет выше вы можете создать с нуля с помощью фигмы и фотошопа за 60 минут. Для этого перейдите по этой ссылке и скачайте дополнительные материалы и получите доступ к видео уроку.
Заключение
Итак, вы этом видео вы узнали как конвертировать файл из Figma в Photoshop. Как видите это элементарно и просто.
How to Convert Photoshop Files into Figma — 2021
Interoperability between UI and UX tools has become a subject of great curiosity for me. I’m mostly curious about why it’s so terrible.
Send me a Sketch file or a Figma file, and I’m grand. The problem is I work with agencies and see A LOT of different workflows.
A shockingly large population of designers are still using Photoshop for UX, and I’m always getting mockups and concepts sent to me as PSD files.
PSD Files are locked to Photoshop — You can’t open them in Figma or anything else
The file is not supported. Boooo!
Now, I’ve seen some of the best teams and the most amazing designers do all their work in Photoshop. Teams I’d like to continue working with. Around the beginning of this year, I finally snapped and set out to find a way to convert PSD files to Figma.
Disclaimer — “I waffle on for a bit. If you’d like skip this bit. There’s a big heading that will make it obvious when I’m ready to tell you about solutions.”
Why don’t I just export it as SVG and open it in Figma?
We can’t just export the design as a png, svg or jpeg from Photoshop and open it in Figma.
I mean we can, but we’ll lose all the application-specific info.
Bye-bye, layers and folders and access to styles and strokes and colours. Literally, everything that made it possible to edit the image in Photoshop is now gone. It is impossible to change these files without remaking them from scratch or extensive rework.
Let’s be clear about what counts as a Photoshop to Figma conversion
To call something a Photoshop to Figma conversion there needs to be a way to edit individual strokes and fills. The conversion must copy photoshop layers across to Figma as frames. 🖍️🖋️✏️✒️
Why go to the trouble of converting Photoshop to Figma?
Figma was built for web design and Photoshop was not.
If I had to put it down to three things I’d say:
I’ve Found 3 Ways to Open Photoshop Files in Figma.
1. Hire a freelancer to remake the designs in Figma
Since it’s not physically possible to open PSDs in Figma, you need to manually redraw every rectangle, re-colour every gradient and re-group every component.
If I’m being honest that sounds like a super boring and time-consuming task, and I like to keep my workday free for big brain tasks. I’ve had success outsourcing on Upwork, and in Facebook groups specifically for design.
The more complex your design files the harder it is to hire, and the more expensive it is to continue getting quality from freelancers; all good reasons why you might want to look into this next option.
XD2Sketch is still beta software or at least their Photoshop to Figma conversion is. The name kind of gives it away, but they convert other design files too.
I’ve used XD2Sketch a few time since January to open Photoshop designs in Figma.
It works great. Let me show you how to do it.
Demo: XD2Sketch Photoshop to Figma conversion
Let’s see what XD2Sketch can do with this UI kit.
Find the PSD to Figma conversion on their website. This is what it should look like once you’re in the right place.
You need to wait 20 seconds to fifteen minutes depending on the size of your files, the number of artboards, and your internet connection.
The preview looks promising.
Pay for the conversion.
Demo: XD2Sketch Photoshop to Figma Conversion
As soon as I opened the converted file, Figma started telling me that I don’t have the font SFUIText size Medium.
Nice! Look at the layers.
Photoshop looks like torture side-by-side the sensible Figma frames.
3. Avocode — Photoshop to Figma conversion via Sketch
Avocode is another paid tool that can convert Photoshop into Figma files. It does this via Sketch.
Figma can open Sketch files.
Avocode works by first converting Photoshop to Sketch and then you can open your Sketch file in Figma.
Demo: Avocode Photoshop to Figma Conversion
I’ll upload the same file for demonstration purposes and we’ll see if we can convert it
I did all that and converted the file.
Results: Avocode PSD to Figma Conversion
Let’s open the converted Sketch file in Figma.
All the elements have disappeared.
Only my buttons survived.
So what went wrong? Well upon closer inspection everything is there, it’s just that all the background colours were changed to white.
This would be a bit of a hassle to fix.
If I’m doing something wrong please tell me in the comments, but yeah, this has been my experience with Avocode’s photoshop to sketch and then Figma conversion.
There’s always some issue. I’ve tested it with other design files and had mixed results. It’s possible that converting Photoshop to Sketch and opening it in Figma is too ambitious. I don’t know.
My Final Remarks
XD2Sketch is the best tool available for converting psd to Figma files.
It’s expensive, but when you bulk buy credits, it’s not as expensive as freelancers which is how I was solving this problem before.
I don’t consider exporting svgs and pngs from Photoshop and reassembling them in Figma a viable solution since this takes hours, it’s soul-crushing work and is a massive productivity bottleneck.
PS: I think the whole thing is silly and all design tools should work together.
Figma или Photoshop?
В этой статье я не буду сравнивать эти две программы, так как считаю, что сравнение не уместно, это две программы совершенно разного назначения. Adobe Photoshop изначально создавался, как редактор изображений, а затем уже пользователь начали на нем рисовать и полиграфию, и интерфейсы. Figma же создана специально для дизайна интерфейсов (сайтов, приложений).Поэтому я просто обозначу, почему вам нужно отойти от фотошопа и перейти на Figma.
Figma бесплатна (платным является только командный доступ к проектам).
За Adobe Photoshop придется заплатить, цену вы можете посмотреть в интернете. Данный аргумент для тех, кто скачивает пиратские версии не убедителен. Идем дальше.
Версии программы
Figma может работать как в браузере, так и есть возможность скачать desktop версию.
Adobe Photoshop же доступен только в desktop версии.
Хранение проектов
Figma сохраняет все ваши проекты в облачном хранилище, которое подгружается сразу, как только вы входите в свой аккаунт. Также есть возможность экспортировать файл проекта на жесткий диск.
Файл Adobe Photoshop чаще всего хранятся у вас на компьютере. И случись что с компьютером – они могут пропасть.
Просмотр проекта
Для меня это преимущество стало одним из определяющих. В Figma вам не нужно экспортировать файл, затем переслать его клиенту, чтобы он посмотрел его. Вы отправляете просто ссылку на интерактивный макет, который при желании можно еще и оживить. Клиент получает не просто картинку будущего проекта, а прототип в реальном разрешении.
Простота освоения
Изначально в фотошопе огромное количество функций, которые начинающий пользователь увидит, когда откроет программу. Это приводит в ступор, хотя большинство из них просто не нужны для веб-дизайна.
В Figma интуитивно понятный интерфейс, который можно освоить всего за один час, и уже начать создать свои первые макеты.
Нагрузка на компьютер
Adobe Photoshop требователен к системным параметрам компьютера. Если у вас не очень быстрый компьютер, то сложный макет будет просто долго загружаться и работа в нем будет очень не удобной.
Desktop версия Figma требуется в разы меньше оперативной память, а веб-версия вообще не зависит от нее, там уже играет скорость вашего интернета.
Это были основные критерии, по которым лично я перешел на Figma. Я не брал преимущества программы с официального сайта, потому что они не основаны на моем личном опыте.
На данном сайте вы можете не только получить полезную информацию, но и скачать шаблоны для Figma, посмотреть видео, а также пройти бесплатный курс.
Вы когда-нибудь задумывались, как преобразовать дизайн Photoshop для использование в современном дизайне инструмента; Фигма!
Прежде чем я начал использовать Figma, я сначала научился пользоваться Photoshop, что позволяет мне быстро понять основы Figma. Поэтому сейчас я обычно думаю, как мне импортировать существующие дизайны, которые я создал с помощью Photoshop, но позже нашел это решение.
Во-первых, чтобы иметь возможность импортировать и использовать существующий файл Photoshop в Figma, мы будем использовать Avocode — если быть точным, это конвертер PSD в эскиз дизайна, и после преобразования вы можете импортировать файл Sketch в Figma. Возможно, вы впервые слышите об Avocode, но поверьте мне, вы поймете это.
Что такое Avocode?
Avocode — это инструмент для передачи дизайна для открытия, обмена, проверки и совместной работы над проектами Sketch, Photoshop, Adobe XD и Figma. Avocode поможет вам создавать веб-приложения, приложения для iOS и Android в точном соответствии с их дизайном. Avocode — это облачное приложение, которое работает на Mac, Windows или Linux.
Avocode — хороший инструмент, но нам не нужно запоминать это определение для этой статьи.
Теперь, импортируя ваш PSD-файл в Figma, вам нужно будет использовать конвертер PSD в SKETCH, поскольку Sketch разрешен в Figma.