Importing Photoshop .psd file in Figma: The Easy Way
Ever wondered how you can convert your Photoshop design for use in the modern design tool; Figma!
Before I started using Figma, I learned how to use Photoshop first which makes it easy for me to quickly grasp the basics of Figma. So I usually think now that how can I import the existing designs I made with Photoshop but later found this solution.
Firstly, to be able to import and use your existing Photoshop File in Figma, we will be making use of Avocode — it’s PSD to sketch design converter to be precise and after converting, you can import the Sketch file in Figma. You might be hearing of Avocode for the first time but trust me, you will get that point.
Disclaimer: This article is not an AD that is not in any way affiliated with Avocode and it was written 4 years ago. It was what works for me then and I noticed that it now cost $5 per file conversion. You can get your money back from the Avocode team if you're not satisfied with your conversion and they will send a refund within 30 days when you file a complaint.
What is Avocode?
Avocode is a design hand-off tool to open, share, inspect, and collaborate on Sketch, Photoshop, Adobe XD, and Figma designs. Avocode will help you build web, iOS, and Android apps exactly like they were designed. Avocode is a cloud-based app, which runs on Mac, Windows, or Linux.
Avocode is a nice tool but we don’t need to memorize that definition for this article.
Now, importing your PSD file to Figma, you will need to utilize the PSD to SKETCH converter since Sketch is allowed in Figma.
How Do I Import a PSD File Into Figma?
Figma is a vector graphics editor and design tool, developed by Figma, Inc. It is available for macOS, Windows, and Linux. One of the advantages of Figma is that it offers a free starter plan.
If you’re new to Figma, one of the first things you’ll want to learn is how to import a PSD file. Luckily, it’s a pretty simple process!
Here’s how to do it:
- Open your PSD file in Photoshop.
- Select the layer or group of layers that you want to import into Figma.
- Right-click on the layer or group and select “Export As..”
- In the Export As dialog box, choose “PNG” as the file format and click “Export”.
- Open Figma and create a new file.
- Click on the “Import” button in the toolbar.
- In the Import dialog box, select your PNG file and click “Open”.
- Your PNG file will now be imported as a vector graphic!
9 Related Question Answers Found
Can You Import a PSD File Into Figma?
How Do I Export PSD to Figma?
How Do I Open a .Psd File in Figma?
Can I Open PSD Files in Figma?
Can We Open PSD Files in Figma?
Can I Import a PSD Into Figma?
How Do I Upload PSD to Figma?
How Do I Import a PNG File Into Figma?
Can I Import PSD Into Figma?
Morgan Bash
Technology enthusiast and Co-Founder of Women Coders SF.
About us
When we started our online journey we did not have a clue about coding or building web pages, probably just like you.
All we wanted to do is create a website for our offline business, but the daunting task wasn’t a breeze. After months and years of trying out CMS’s and different website creators, we became experts in creating these, and wanted to share our knowledge with the world using this site.
We now review dozens of web related services (including domain registrars, hosting providers and much more), and write in-depth guides about site creation, coding and blogging.
Как открыть PSD в Figma?
Я из 2021 
Не благодарите
- Вконтакте
Почти 2022.
Авокод перестал брать деньги за конвертацию +_+
- Вконтакте
- Вконтакте
- Вконтакте
- Вконтакте
2) Не знаю, на сколько рабочий, но думаю, тут нужна последняя версия PS.
One way to convert PSD to Figma is by using the Photoshop Export function.
To do this, open your PSD file in Photoshop and go to File > Export > Export As.
From here, select “Figma” from the list of formats and choose your export settings. Once you hit “Export,” your PSD file will be converted to a Figma file.
Функция экспорта в Figma
Список доступных форматов для экспорта, как лучше экспортировать проект для верстки, или клиента. Как оптимизировать файлы. Все это вы найдете в данной статей.
Основные вопросы:
Как делать в Figma экспорт элементов или групп? Какие виды объектов можно экспортировать в figma и как сохранить в фигме работу?
Функция экспорта в Figma позволяет не только выводить готовый дизайн в единое изображение, но и помогает нарезать макет для будущей верстки интерфейса. Данная функция находится внизу в правом нижнем углу программы.
Экспорт в JPG
Экспорт макет в формат изображения JPG является самым популярным. В настройках экспорт вы можете управлять масштабом экспорта, добавлять суффиксы к имени, он будет вписан после имени файла, а также если вы хотите экспортировать несколько версий макетов (версия для клиента, для портфолио, для behance), то просто нажмите на знак плюса и настройте нужные опции.
Экспорт в PDF
По моему мнению данный формат не очень нужен, так как на выходе вы получаете документ, который в несколько раз больше весит, чем картинка. И если у клиента нет программы для чтения данного формата – он просто не сможет открыть его.
Но у этого формата есть особенности экспорта:
- Вы можете выделять текст, который набран в макете;
- Все векторные объекты прорисовываются идеально независимо от масштаба приближения.
Казалось бы преимущества очевидны, но на практике, лично я еще ни разу не сталкивался с просьбой предоставить макет в формате PDF.
Экспорт в PSD
Очень частый вопрос: как открыть psd в Figma, или как загрузить psd в Figma? К сожалению, в Figma не предусмотрен экспорт в программу Adobe Photoshop. Так как фотошоп более сложная программа, то и интерпретатор для него будет сложно написать. Поэтому разработчики, по моему мнению, просто не хотят тратить время на разработку данного решения. Да оно и не нужно особо, так как все больше людей переходит на специализированный для веб-дизайна софт.
Экспорт в SVG
Данный метод является популярным при экспорте иконок для верстки сайта. Так как SVG — это векторный формат, то для верстальщика намного проще использовать не картинки формата PNG для разных разрешений, а одну иконку, которая будет прорисовываться на нужный размер, на разных размерах устройства. Поэтому данный метод используйте для экспорта иконок, а также мелких графических элементов.
Экспорт в HTML
Функции экспорта в html в программе Figma нет. Но есть подсказки для верстальщика в виде свойств каждого объекта. Они находятся в левой вкладке «Code». Здесь вы получите полный список CSS свойств для верстки сайта, а также параметры для разработчиков на iOS и Android.
Один из вопросов, который волнует начинающих пользователей: как сохранить проект в фигма?
Сохранение проекта в Figma происходит с помощью экспорта файла с расширением «.fig». Для этого нужно в главном меню выбрать пункт «Save as».