Как открыть psd макет в figma

С Photoshop на Figma: как UI-команда Rush Royale поменяла основной рабочий инструмент

Всем привет, меня зовут Евгений Иванов, я дизайнер интерфейсов в студии IT Territory. В этом тексте я расскажу, как перенести рабочий процесс UI-дизайна в Figma на примере готового проекта, какие подводные камни при этом встретятся, в чем плюсы и минусы этого перехода.

Как мы использовали Photoshop и Figma раньше

В 2020 году, когда Rush Royale только разрабатывалась, Photoshop был основным инструментом UI в индустрии. Figma не обладала еще достаточным количеством функций для комфортной работы с таким уровнем артового наполнения. При этом для UX наша студия использовала Figma с самого начала разработки игры.

Когда я пришел на проект, мне передали все наработки по UI в отдельных PSD-файлах. Приступая к работе над фичей, нужно было:

• изучить UX-макеты в Figma, прочитать дизайн;
• среди имеющихся файлов найти экраны и элементы, которые подойдут для работы;
• сделать UI в Photoshop;
• выложить превью готового дизайна в Figma и согласовать его с командой;
• после финализации загрузить PSD и новые спрайты в облачное хранилище. Добавить ссылки на хранилище в Figma, чтобы программисты нашли все, что нужно.

Для одного специалиста на проекте это нормально. Я постепенно запомнил, где все находится, и мог четко и быстро следовать этому плану. Но что делать, если команда растет?

С появлением второго человека стало понятно, что нельзя ввести его в курс дела, просто сбросив гору файлов. Поэтому пришлось делать какие-то наброски UI kit’a, что в Photoshop, конечно, непросто. Файл с кнопками весит 2,5 Гб, а мы работали с огромным количеством контента. Выстроить из таких файлов удобную и понятную систему было сложно.

При этом наша команда продолжала расти — к концу года нас стало уже четыре специалиста на проекте. Количество фичей и их объем тоже увеличились. Общий вес PSD-исходников приблизился к 100 Гб. Ориентироваться в таком объеме было сложно, несмотря на тщательную сортировку по фичам. Ребятам приходилось постоянно спрашивать меня, где что находится, какой макет брать в работу. А мне, соответственно, следить за тем, какие экраны они меняют, чтобы быть в курсе, где актуальные версии.

Большой объем данных и неудобство работы с ними — одна из причин, которая подтолкнула нас к переходу в Figma.

Вторая причина — это проблемы команды программистов при сборке интерфейса в Unity. Photoshop не очень удобен для просмотра размеров и параметров объектов. Тем более, что на каждый экран вам нужно скачивать тяжелый PSD-файл.

Временным решением этой проблемы стал Zeplin — это web-инструмент с плагином для Photoshop, который позволяет просматривать ваши макеты с необходимыми для верстки данными: отступами, размерами, шрифтами и так далее. Для переноса макета в Zeplin каждый экран нужно разобрать на спрайты и потом уже экспортировать через плагин.

Из-за этого решения наша команда начала тратить на разработку UI-фичи на 40% больше времени. На крупных фичах этот перенос ощущался особенно неприятно — уходило много времени на рутинную работу. Программисты были рады интеграции Zeplin в наши процессы — они получили ту функциональность, которая была им нужна. Мы же понимали, что хотим отказаться от Zeplin из-за лишней траты времени и малой полезности этого инструмента для UI-дизайнеров.

Как мы перешли на Figma

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

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

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

Для нас же стало очевидно, что полностью перерисовать проект в Figma, чтобы все было на векторных фигурах — невыполнимая задача. И нужно что-то делать.

И мы нашли выход — плагин 9-slice, который копирует нарезку спрайтов из Unity. Вот как это работает: закидываем спрайты в Figma прямо из проекта, с помощью 9-slice делаем их тянущимися во все стороны и собираем макеты. Так перенос одного экрана не занимает много времени. Плюс названия спрайтов совпадают с проектными. И чем больше спрайтов заведено в Figma, тем быстрее процесс переноса. Именно этот плагин помог нам решиться на полный перенос проекта в Figma.

Чтобы сделать это, мы собрали скриншоты всех экранов Rush Royal в один файл. И начали поэтапно переносить, начиная с наиболее востребованных макетов, заканчивая какими-то второстепенными экранами.

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

После переноса стала заметна разница в работе. Помимо того, что мы упростили пайплайн разработки, мы облегчили себе рутинные задачи. Теперь все рабочие экраны в одном проекте и не нужно заниматься перезаписью файлов, переносом их в Zeplin и сохранением спрайтов. Я думаю, что экономия времени получилась в два раза!

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

Еще один плюс работы в Figma — наличие библиотеки компонентов, auto layout, различные плагины, которые открыли нам массу возможностей.

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

Еще одно преимущество — история версий. Наверное, такое бывало с каждым дизайнером — Photoshop упал и уничтожил вашу работу. Figma сохраняет каждое действие, поэтому молиться на Ctrl+S больше не нужно. Если вы в понедельник встали не стой ноги и испортили свой пятничный макет, всегда можно зайти в историю и вытащить любой вариант макета, который у вас был. В Photoshop приходится записывать дополнительные файлы, чтобы сохранить разные варианты.

Плагин 9-slice не позволяет редактировать нарезанные спрайты. Поэтому дальнейший процесс перехода на Figma выглядит так: спрайты лучше делать сразу в Figma, но собирать их по схеме 9-slice, не прибегая к помощи плагина. Тогда вы сможете тянуть объект во все стороны, сохраняя форму так же, как это делается с плагином. При этом объект все еще можно будет редактировать, а варианты позволят вам добавить новые цвета и параметры.

Корректно открыть psd макет в figma

Добрый день никак коректно не получается сконвертировать макет psd в sketch. Запиши пожалуйсто отдельный урок, через сайт на авакоде нормально не конвертирует! В вопросах ответах, понятного и внятного ответа не нашел! В сети также нормальной инфы не нашел, или к уроку выложите уже полноценый макет в sketch файле.

Алексей Цой
3 years ago

Добрый день. Нужно учитывать, что этот макет изначально был создан в формате растра. И при переводе в векторную графику у него могут быть потери. Это нормально 🙁

Для работы только с растровыми макетами (psd) используйте Photoshop

Для векторных макетов — Sketch, Figma

Универсальные инструменты для всего — Avocode, Zeplin, Marsy

Иван Петриченко
3 years ago

у меня такой же вопрос, только с небольшим дополнением — я вовсе не могу бесплатно сконвертировать psd в sketch на сайте avocode . Не знаю с каких пор , но конвертация одного макета стоит денег — 5$

Если в уроке работаем с figma сделайте пожалуйста макет в векторе , а по растровой графике отдельный урок с photoshop

Алена Инденко
3 years ago

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

Функция экспорта в Figma

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

Основные вопросы:

Как делать в Figma экспорт элементов или групп? Какие виды объектов можно экспортировать в figma и как сохранить в фигме работу?

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

Экспорт в JPG

Экспорт макет в формат изображения JPG является самым популярным. В настройках экспорт вы можете управлять масштабом экспорта, добавлять суффиксы к имени, он будет вписан после имени файла, а также если вы хотите экспортировать несколько версий макетов (версия для клиента, для портфолио, для behance), то просто нажмите на знак плюса и настройте нужные опции.

Экспорт в PDF

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

Но у этого формата есть особенности экспорта:

1. Вы можете выделять текст, который набран в макете;
2. Все векторные объекты прорисовываются идеально независимо от масштаба приближения.

Казалось бы преимущества очевидны, но на практике, лично я еще ни разу не сталкивался с просьбой предоставить макет в формате PDF.

Экспорт в PSD

Очень частый вопрос: как открыть psd в Figma, или как загрузить psd в Figma? К сожалению, в Figma не предусмотрен экспорт в программу Adobe Photoshop. Так как фотошоп более сложная программа, то и интерпретатор для него будет сложно написать. Поэтому разработчики, по моему мнению, просто не хотят тратить время на разработку данного решения. Да оно и не нужно особо, так как все больше людей переходит на специализированный для веб-дизайна софт.

Экспорт в SVG

Данный метод является популярным при экспорте иконок для верстки сайта. Так как SVG — это векторный формат, то для верстальщика намного проще использовать не картинки формата PNG для разных разрешений, а одну иконку, которая будет прорисовываться на нужный размер, на разных размерах устройства. Поэтому данный метод используйте для экспорта иконок, а также мелких графических элементов.

Экспорт в HTML

Функции экспорта в html в программе Figma нет. Но есть подсказки для верстальщика в виде свойств каждого объекта. Они находятся в левой вкладке «Code». Здесь вы получите полный список CSS свойств для верстки сайта, а также параметры для разработчиков на iOS и Android.

Один из вопросов, который волнует начинающих пользователей: как сохранить проект в фигма?

Сохранение проекта в Figma происходит с помощью экспорта файла с расширением «.fig». Для этого нужно в главном меню выбрать пункт «Save as».

Этому вопросу я посвятил видео, которое вы можете посмотреть ниже.

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.

Как открыть PSD в Figma?

Доброго времени суток. Есть ли возможность импорта PSD файлов в Figma? И почему при экспорте в Figma в формате skethс бывают заметные баги в отображении?

• Вопрос задан более трёх лет назад
• 138718 просмотров

Комментировать
Решения вопроса 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 и все. Просто поверьте.