Импорт и экспорт форматов в Фигме. Конвертирование дизайн-макетов в разные форматы
Есть большой список программ в которых 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. Можно посмотреть на странице плагина. Вот так это выглядит:
Отдельное внимание нужно уделить следующему инструменту для экспорта дизайн-макетов в готовые проекты. С помощью данного приложения вы НЕ сможете преобразовать файл из одного дизайн формата в другой. Оно предназначено для конвертирования дизайн-макета в готовый интерактивный проект. Таким образом вы сможете создать дизайн в Figma, Sketch или др. Приложении и на основе него сделать готовую HTML страничку или Android приложение. При этом вы получите не сплошной HTML, а проект созданный c использованием фреймворка (Например с помощью React). Естественно звучит это все слишком хорошо, чтобы быть бесплатным.
Если вам нужен бесплатный рабочий способ, с помощью которого можно преобразовать дизайн из одного формата в другой, то конвертируйте в SVG, после чего вы можете использовать этот файл в любом редакторе. Минусы данного подхода очевидны – далеко не вся информация может быть сконвертированна (например древовидная структура).
Если же вам в первую очередь нужно качество и вы не готовы делать постобработку дизайн-макетов, то пользуйтесь платными плагинами.
Считаете ли вы SVG формат приемлемым для перемещения из одного редактора в другой ? Напишите об этом в комментариях.
My experience importing PDF files into Figma
Figma has taken the design world by storm. According to the UX Tools 2020 Design survey, Figma was the most used tool in 2020 for UI Design, User Flows, Prototyping, Handoffs, Design Systems and Versioning. While Figma is a well-loved product, in my opinion, it is missing a few key features. Namely the ability to easyily import PDF files without ending spending hours on fixing import issues afterwards.
If you think this is a small inconvenience, you’ve never had a client who only sent assets in PDF format. You are lucky, my friend. Many people have asked for this feature and Figma claims they are working on it.
Since we have no idea when Figma will launch a PDF to Figma importer, I set out to figure out how to hack together a workaround. It was painful. I ran into many dead ends, but in the end, I found one hack and one proper solution (I found the proper solution after I spent 2 long hours converting files ��).
Grab a cup of coffee, and join me on this PDF to Figma journey.
The PDF File
I’m creating some screens for a dating app. On one of the screens, you can answer questions to spark conversation with a match. We have the questions broken down into a few different categories.
The layout is set, but I need to add the icons. The icons were created in-house and sent to me… via PDF. Even worse, they sent me a 15 page PDF, which it turns out, is even harder to work with.
A swing and a miss
I didn’t realize that Figma just totally rejects PDF files, so at first, I tried to drag and drop the PDF into Figma. I got this lovely error message.
So, I did what everyone does when they get an error message, I went to Google. It turns out that Figma only accepts Figma files, Sketch files, and image files (PNG, JPG, GIF). This was discouraging and I had to say goodbye to any possibility of having beautiful layers for these icons.
Strike two
After lowering my standards for this design, I thought I’d simply convert the PDF into a PNG and then import it. I opened my PDF in Mac Preview and saved the file as a PNG. I then dragged and dropped the PNG file into Figma. It worked! … kind of.
The file that I’m working with has over a dozen pages, and when I converted it to PDF using Mac Preview, it imported a single PNG of the first icon, but that was it. The rest of the images were nowhere to be found.
Strike three
At this point, I was pretty frustrated so I started googling again. This led me to install the free version of Adobe Acrobat. When I tried to convert the PDF to a PNG it opened up a webpage trying to sell me the paid version of Adobe Acrobat. Another dead end.
Fifth time’s a charm
I was about to take a break and try again later when I tried one more converter. An online PDF to PNG converter called Cloud Convert.
I’m sure there are many free PDF to PNG converters online, but Cloud Convert worked well for me. It was fast and it put all of my images into a folder. Now I could finally import these images into Figma with a simple drag and drop!
Unfortunately, the struggle wasn’t over yet.
Making the PNG work with your design
I’m used to working with layers, not static PNGs. It took some work to get these icons to fit inside my design. Each rectangle should have a corresponding icon. I also wanted to add some creative elements inside the rectangles.
My PNG icons have some text. Luckily, it’s at the bottom, so I can just crop it out. I created a rectangle mask to crop my image. Then I placed the image on my artboard.
I repeated this for all the icons that had the same background color as my design. Two of my icons have a different background so I needed a more precise mask. I used the pen tool to carefully outline the icon shape. Then I filled in the shape and created a mask. This wasn’t a simple process, I had to go back to clean up the edges a couple of times before I was happy with it.
In the above image, you can see my final design. The quality is not great. When you zoom in, you can see some rough edges, but it does the job. I’m not too concerned about getting this design pixel-perfect. If you are creating a high-fidelity design, you will be disappointed with this method.
This process took me two hours. If I had to do it again, I think it would take me about an hour since I would get to skip all the trial and error. Even so, an hour is a long time to import and place a few icons.
A final attempt at having layers (strike six?) — SVG
After all this, I still wasn’t satisfied with my design, so I decided to try one last hack. Figma said that they don’t support SVG files, but I wanted to give it a try anyways. I used Cloud Convert again and converted my PDF into SVG format. Amazingly, Figma allowed me to import the SVGs, and the images had layers! It felt like a triumph for about 3 seconds. I realized very quickly that the icons were messed up beyond repair. Not just a little fuzzy or misaligned; they were full on Picassos.
A more elegant solution
I was trying to find the cheapest way to stick these icons onto my design. Though this hack was free and it worked for this specific PDF file, it’s not my best work.
If I had to do it over again, I would use a product I found called Magicul, in particular their PDF to Figma converter. It’s pretty simple, it just takes a PDF file and converts it into a Figma file. All the layers and colors are there. It costs $50 to convert up to 50 artboards. I decided to try it out, and I think it was worth the price. Here’s what I was able to create in just a few minutes with the icons in a vector format. (I was playing around to see what all I could do with these imported images, this isn’t a real design.)
I could pull out different elements inside of the icons and play with them to create a more interesting design. I imported the images and played around with the different layers for less than 10 minutes, and got the image above.
The conclusion — Hack it or Make It Elegant?
The PDF to PNG hack will work for some people. You should use this hack if…
If you are more worried about money than time.
- If you’re okay with a low-fidelity design.
- If you don’t mind some extra work resizing, creating masks, and using the pen tool.
- If your PDF image doesn’t need to be altered in any major way.
For most freelancers, I think it’s worth it to use Magicul because…
- Your designs will look more professional.
- You will save yourself time and frustration.
- If you bill the $50 to your client (which I highly recommend if they insist on giving you PDF assets) then it’s free!
I hope this helps some of you guys. Working with PDF and Figma surely isn’t as easy as it should it. Let’s hope Figma is working on a solution ��♂️
FAQ Figma. Ответы на самые популярные вопросы
Покупать фигма совсем не обязательно. Это бесплатная программа. Ты можешь зарегистрироваться в ней на официальном сайте фигма.ком, скачать там десктопную версию пользоваться на здоровье бесплатно. Платить нужно только тем, кто работает в команде и нужен доступ большому количеству пользователей к библиотеке компонентов и стилей. Тогда придется выложить по 15 долларов за пользователя в месяц. Такой подход больше настроен для больших команд, студий и корпораций.
Программа фигма, как научиться в ней работать
Один из самых популярных вопросов. Есть замечательный курс по фигме, в котором все четко и подробно расскажут и ты научишься работать в программе.
Figma как экспортировать
Экспортировать в фигме можно в несколько разрешений и несколькими способами.
Способ номер один. Выделяешь фрейм, справа в панели в самом низу есть вкладка export там выбираешь нужный формат и место для сохранения
Экспорт в фигма
Способ номер два. Клик правой клавишей на объекте и выбираешь формат для копии и эта копия сохраняется у тебя в буфере обмена. Теперь можешь постить ее куда хочешь
Как экспортировать из Figma
Figma или adobe xd
Если ты читаешь это на страничке сайта, посвященного фигме, то у меня для тебя есть ответ — Figma.
Figma как сохранить проект
Проекты в фигма можно вообще не сохранять. Они все и сохранены в облаке и доступ к ним есть по ссылке. Но есть еще один способ сохранить проект в формате .fig. Как это сделать показано на картинке
Figma как сохранить проект
Тень в фигме. Как настроить тень в Figma
Тень в фигме прячется в разделе effect. Там есть, как ниспадающая, так и внутренняя. Кстати, ты можешь применять к одному объекту сразу несколько теней, что очень круто.
Тень в фигма
Как верстать из Figma
Верстать из фигмы довольно просто. Когда ты делишься проектом с верстальщиком он может посмотреть код каждого элемента в макете, расстояния и многое другое, что ему нужно. Фотошопу такое и не снилось. Так же он может удобно нарезать макет на картинки и иконки. + ко всему ты всегда можешь выгрузить свой макет в zeppelin, а там уже верстак знает что делать. Все css свойства объектов можно посмотреть в отдельной вкладке справа вверху, там же можно посмотреть свойства для ios и android
Как верстать из Figma
Отмена в фигме, как отменить действие
Так же, как и везде ctrl+z. Если ты не знал — фигма помнит твои изменения в макете 30 дней. Так что откатиться таким способом можно далеко. Но для большего удобства есть контроль версий.
История версий в Figma
Figma или Фотошоп
Однозначно Фигма. Без вариантов.
Как поделиться макетом в Figma
Тут ты можешь выбирать с какими правами делиться макетом — только просмотр или с возможностью редактирования. Так же можно через имейл приглашать людей в проект.
Как ставить комментарии в фигме
Для того, чтобы ставить комменты в фигме есть отдельная пиктограмма. По клику на ее ты можешь видеть комменты других участников проекта.
Как сохранить макет себе
Сохранить макет в фигма себе просто. Дублируешь его к себе в черновики и там ты уже в праве распоряжаться им как хочешь. При этом все внесенный тобой изменения не будут отражаться в оригинальном макете.
Как скрыть рабочие поля в Figma
Чтобы посмотреть только ui своей работы без рабочих полей жми ctrl+\ (англ раскладка)
Как создать вертикальный текст
Есть пара вариантов:
- Напиши, что хотел и сожми текстовый блок до размера одной буквы. Весть твой текст выстроится в один ряд.
- Просто переверни строку на 90 градусов,потянув за уголок с зажатым shift, чтобы поворот был более плавным. Или сразу задай нужный угол наклона текстового блока в панеле справа. Так у тебя получится поставить текст вертикально, но все буквы будут последовательно идти друг за другом,
Как в фигме написать текст по кругу
НИКАК. Тот же ответ на вопрос «Как искривить текст, как расположить текст на кривой, на дуге и тд. Пока что такой фичи не завезли.
Пока то есть кривой и сырой плагин для таких целей, но глобально ответ на этот вопрос остается прежним — никак. вот тут смотри про плагин
http://figmaweb.ru/kak-razmestit-v-figma-tekst-po-krugu-ili-krivoj/
Как измерить расстояние между объектами
Выделяешь объект, зажимаешь alt и смотришь расстояния до интересующих тебя блоков. Помни, что для текста расстояния меряются от текстового блока, а не от букв.
Как удалить направляющие
Либо обратно перетащить их за пределы рабочей области, либо выделить и нажать del.
Как сохранить проект в Figma
Все, что ты делаешь автоматически сохраняется в облаке, отдельно сохранять ничего не нужно. Ты можешь поделиться ссылкой на свой проект, что по сути и является передачей файла. Так же можешь воспользоваться другим способом — сохранить файл .fig. В меню слева вверху выбери пункт save as fig и твоя работа сохранится отдельным файлом, который можешь отправлять кому угодно. Все изменения внесенные в проект никак не отразятся на этом файле — он останется таким, каким был сохранен.
Как открыть несколько окон Figma?
В десктопном клиенте Figma на macOS — File → New window.
При работе в браузере — просто открой несколько вкладок с Figma
В десктопном клиенте Figma на
Windows — Ctrl + Shift + N
Как загрузить в Figma изображение в большом разрешении?
Фигма принимает изображения максимально 4096х4096. Если ты попытаешься загрузить большее разрешении, оно все равно ужмется до 4096х4096.
Как отключить Google Fonts в Figma?
Сними галочку напротив пункта «показать гугл шрифты»
Как макет из Фигмы сохранить в формате psd для фотошоп?
Глупая и странная затея. Есть костыль, конечно, но лучше отказаться от общения с заказчиком, которые требует от тебя таких извращений.
Решение: из фигмы сохраняем в svg или pdf, открывает это в иллюстраторе или афинити и уже оттуда сохраняем в psd
Как в Figma объединить слои
Объединить в группу ctrl+g сразу во фрейм ctrl+alt+g. Можно еще воспользоваться булевыми операциями и сделать union. Разные способы объединения слоев хороши для разных задач.
Как в фигме вставить скопированный текст
Ты, конечно, удивишься — ctrl+v. Чтобы вставить текст без стилей, а точнее сказать, чтобы он принял на себя стили того текстового блока куда ты его вставляешь ctrl+shift+v
Как поделиться макетом figma
Кликаешь на кнопку Share у себя в рабочей области
Далее во всплывающем окне кликаешь на ссылку Copy Link. Все. ссылка скопирована у тебя в буфер обмена. Можешь отправлять ее куда угодно и кому угодно.
49 комментариев к “FAQ Figma. Ответы на самые популярные вопросы”
Раньше верстал из Фотошопа. Последние пол года в коллективе работаю в Фигме. Фигма в подметки не годится Фотошопу.
чем именно фигма хуже для верстальщика?
Может не хуже. Но верстальщику, который умеет уже все делать в фотошопе, нужно учиться делать все в фигме. например, дизайнер не всегда понимает как вообще можно сделать то, что он нарисовал на сайте. Верстальщику нужно это все придумывать. И часто какие-то элементы, которые дизайнером задумывались как отдельные приходится кидать на фон. Для этого их нужно объединять как-то с фоновыми изображениями. Наверно в фигме есть возможность это сделать, перегруппировать и экспортировать, но это нужно глубоко изучать фукционал.
2. есть небольшой фон, размещенный посреди блока. Как экспортировать его чтобы фон был нужной ширины, скажем 1920 пикселов, при этом все незанятое пространство заполнялось прозрачным фоном? Я не нашел такой возможности. Может плохо искал.
3. Выбор элементов не совсем удобный. Если есть один слой с элементами и на него дизайнер накладывает другой слой (например фигурный фон залезает) то элементы предыдущего фона выбрать можно только справа в слоях.
4. работа с текстовыми блоками. Если там смешанный стиль, как выделить отдельно разные части и понять какой стиль применен?
5. расстояние между блоками. Выделить и держа альт навести на соседний блок. Расстояние показывается на панели красными цифрами. Если оно маленькое, то разобрать ничего невозможно. То-же касается и этой надписи на фоне. То-же и расстояний от элемента до края. Приходится либо пользоваться отдельной программой-линейкой, либо экспортировать картинку полностью, кидать в фотошоп и там замерять инструментом-линейкой…
Есть еще ряд неудобств, но больше всего бесит уверенность дизайнеров, которые утверждают что переход на фигму — это радость и панацея для верстальщика и он должен дизайнеру ноги целовать за то, что ему в фигме отдали дизайн на верстку.
Вижу большинство конкретных и личных нюансов. некоторые из них можно решить прост вы не знаете как. например, меряйте расстояние прямоугольником. кстати и дизайнерам не удобно смотреть красные расстояния на красном фоне)) понятно дело, что фигма не для верстки как и фотошоп.. прост вы привыкли к нему. авокод — вот это сила.
Вообще, советую не использовать дефолтный файл, который вам дают, а копировать себе со всеми правами и у вас отпадут все описанные проблемы.
Правильный дизайнер интерфейсов, должен знать минимальные правила вёрстки, тогда и проблем с передачи макета верстальщику не будет.
Фигма простой и мощный инструмент. Если бы она была так не удобна, то не была бы так популярна. ФШ это дед.
Учите фигму, там всё просто и супер удобно. Я ФШ оставил только для красивых картинок.
Понятно дело, что фигма не для верстки как и фотошоп. — это ваша же цитата. Так вы нам и расскажите чем именно она хуже.
Может ваша программа и очень хорошая, но надо быть чуток скромнее — и люди будут к вам снисходительнее.
>Фигма в подметки не годится Фотошопу.
Категорические поддерживаю.
Даже странно видеть, как некоторые неумные люди пытаются еще заявлять, что фигма лучше, а потом искать всяческие отмазки на вопрос — а как в фигме сделать (тут берется любой из примеров того, что в фотошопе делается легко и быстро)?
Загрузка...
