Как из фигмы перенести в фотошоп
Обновлено: 07.07.2024
В этой статье я не буду сравнивать эти две программы, так как считаю, что сравнение не уместно, это две программы совершенно разного назначения. Adobe Photoshop изначально создавался, как редактор изображений, а затем уже пользователь начали на нем рисовать и полиграфию, и интерфейсы. Figma же создана специально для дизайна интерфейсов (сайтов, приложений).Поэтому я просто обозначу, почему вам нужно отойти от фотошопа и перейти на Figma.
Figma бесплатна (платным является только командный доступ к проектам).
За Adobe Photoshop придется заплатить, цену вы можете посмотреть в интернете. Данный аргумент для тех, кто скачивает пиратские версии не убедителен. Идем дальше.
Версии программы
Figma может работать как в браузере, так и есть возможность скачать desktop версию.
Adobe Photoshop же доступен только в desktop версии.
Хранение проектов
Figma сохраняет все ваши проекты в облачном хранилище, которое подгружается сразу, как только вы входите в свой аккаунт. Также есть возможность экспортировать файл проекта на жесткий диск.
Файл Adobe Photoshop чаще всего хранятся у вас на компьютере. И случись что с компьютером – они могут пропасть.
Просмотр проекта
Для меня это преимущество стало одним из определяющих. В Figma вам не нужно экспортировать файл, затем переслать его клиенту, чтобы он посмотрел его. Вы отправляете просто ссылку на интерактивный макет, который при желании можно еще и оживить. Клиент получает не просто картинку будущего проекта, а прототип в реальном разрешении.
Простота освоения
Изначально в фотошопе огромное количество функций, которые начинающий пользователь увидит, когда откроет программу. Это приводит в ступор, хотя большинство из них просто не нужны для веб-дизайна.
В Figma интуитивно понятный интерфейс, который можно освоить всего за один час, и уже начать создать свои первые макеты.
Нагрузка на компьютер
Adobe Photoshop требователен к системным параметрам компьютера. Если у вас не очень быстрый компьютер, то сложный макет будет просто долго загружаться и работа в нем будет очень не удобной.
Desktop версия Figma требуется в разы меньше оперативной память, а веб-версия вообще не зависит от нее, там уже играет скорость вашего интернета.
Это были основные критерии, по которым лично я перешел на Figma. Я не брал преимущества программы с официального сайта, потому что они не основаны на моем личном опыте.
На данном сайте вы можете не только получить полезную информацию, но и скачать шаблоны для Figma, посмотреть видео, а также пройти бесплатный курс.
Узнавайте о новых шаблонах, а также других полезных материалах в группе Вконтакте
В данной статье и видео вы узнаете как экспортировать проект из Figma в photoshop и перевести файл в формате FIG в PSD. Ниже видео и пошаговая инструкция в формате статьи.
Как из фигмы перенести в фотошоп
Чтобы перенести файл из фигмы в фотошоп, нужно сделать 4 шага:
1. Сохранить проект из фигмы в формате .fig
2. Перенести проект в онлайн сервис Photopea.
3. Сохранить проект в формате PSD.
4. Открыть проект в Photoshop.
Как сохранить проект из Figma в формате .fig для преобразования в PSD
Чтобы сохранить проект из Figma в формате .fig нужно нажать на меню слева и сверху, выбрать вкладку «File», затем нажать на надпись «Save local copy». Лучше сохранять один макет за 1 раз, чтобы не было хаоса. Также рекомендую навести порядок в слоях.
Перенос проекта фигмы в онлайн сервис Photopea
Для удобства использования сервисом «Photopea», лучше поставить русский язык. Для этого наверху нажмите на надпись «Account», далее вкладка «Language» и выберите русский язык из списка.
Выберите файл фигмы, который сохранили на компьютере и перенесите его в сервис, как показано на скриншоте выше.
Макет будет выглядеть следующем образом. Просмотрите внимательно насколько корректно все отображается в сервисе. Все ли элементы находятся на своих местах и нет ли каких-то багов.
Конвертация файла из фигмы (.fig) в формат фотошопа (PSD)
Чтобы конвертировать файл в формат фотошопа в сервисе Photopea нажмите сверху на надпись «Файл», затем выберите надпись «Сохранить как PSD». Таким образом вы преобразуете проект в формате .FIG.
Открываем файл из фигмы в фотошопе
Теперь можно открыть файл фигмы в фотошопе. Получается практически такой же дизайн макет как и в Figma. Иногда бывают небольшие баги.
Если посмотреть в слои, то будут такие же слои как и в Figma. Можно даже отключать и включать эффекты тени или размытия, которые вы добавили в фигме.
Кстати, макет выше вы можете создать с нуля с помощью фигмы и фотошопа за 60 минут. Для этого перейдите по этой ссылке и скачайте дополнительные материалы и получите доступ к видео уроку.
Заключение
Итак, вы этом видео вы узнали как конвертировать файл из Figma в Photoshop. Как видите это элементарно и просто.
Доброго времени суток. Есть ли возможность импорта PSD файлов в Figma? И почему при экспорте в Figma в формате skethс бывают заметные баги в отображении?
Затем уже скетч перетащите в Фигму
Возможно, что-то не так с машиной, но при перегоне из .psd теряется почти вся текстура, включая шрифты.
Честно, по мне, так это все полный бред использовать. Есть photoshop, в нем лучше и открывать PSD макеты, так как это его родной формат, и не удивительно, что в других программах встречаются баги. Есть .sketch, соответственно так же лучше и открывать в Sketche, максимум можно импорировать в Avocode или Zeplin, так как импорт в эти программы вшит в скетч, что гарантирует более-менее адекватный результат.
У меня мака нет, поэтому приходится изворачиваться с открытием скетча.
Самый простой вариант для Вас попросить человека, у которого есть МАК, чтобы он через скетч, импортировал макет в Zeplin и все. Просто поверьте.
Не благодарите
UchihaBoy, это за один файл. А если макетов 8 штук в отдельных .psd, то $40 выходит «всего лишь» :)
HayPro, ну это специально) мол покупайте подписку на наше приложение)
Так в Цеплин попросите залить, если вам для фронта. Он умеет в psd.
Ну или откройте в Фотошопе, что, как бы, правильно :)
Артём Кузнецов, Я из 2021, 1 макет бесплатно, но кривовато. Скорей всего требует специальной подготовки макетов.
Как делать в 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".
Этому вопросу я посвятил видео, которое вы можете посмотреть ниже.
Важно! Для того, чтобы на практике понять, какие виды экспорта существуют, и чем они отличаются - рекомендую ознакомиться с готовыми шаблонами Figma. В них вы сможете применить различные виды экспорта. Ссылки на шаблоны: ссылка 1 и ссылка 2
Узнавайте о новых шаблонах, а также других полезных материалах в группе Вконтакте
Читайте также: