Экспорт параметров и графики из Figma
Нужно получить из макета всё необходимое для стилизации: параметры шрифтов, размеры и отступы, параметры теней и скруглений и так далее. Также нужно экспортировать всю графику, в оптимальном формате и оптимальном соотношении качество/вес.
Зачем нужен этот навык:
Входные данные для вёрстки сайта — обычно макет, часто в формате Figma. Верстальщик получает макет и самостоятельно открывает его в браузере или же в графическом редакторе Figma, извлекает информацию и графику, полученные параметры прописывает в HTML и CSS. Без этого умения готовую вёрстку просто не сделать. Графический редактор Figma стал очень распространённым, и дизайнеры часто в нём делают макеты сайтов, так как редактор работает в браузере и не зависит от операционной системы.
Расположение относительно других навыков:
Это стартовый навык, который является фундаментом для остальных навыков. В дереве навыков он находится на самом верху, а значит осваивать его можно сразу после получения базовых знаний по HTML и CSS.
Минимальные требования для освоения:
Пройдено три части тренажёра Знакомство с HTML и CSS:
- Ссылки и изображения,
- Основы CSS,
- Оформление текста.
Состав навыка
Подготовительный материал
Дополняет базовые знания, полученные в курсах для новичков, всем необходимым для начала отработки кейсов.
Углублённая теория
Углублённая теория и методики общим объёмом 30 страниц.
Включает следующую информацию:
- Обзор интерфейса и основных функций Фигмы, которые нужны для работы верстальщика.
- Методики получения данных о тексте, определения цвета элементов, работы с эффектами, измерения расстояний и экспорта графики
Демонстрационные кейсы
Два демонстрационных кейса, по одному для лёгкого и сложного уровня.
Показывают как применять описанные выше инструкции по работе с макетами.
В каждом кейсе в качестве входных данных мы получаем дизайн-макет. Затем, используя предложенную методику, пошагово извлекаем необходимые параметры и графику. На выходе получаем список параметров и папку с изображениями. Все шаги детально описаны.
Так выглядит страница демонстрационного кейса:
Пошаговые разборы кейсов
Один разбор для каждого демо-кейса.
Разборы кейсов выполнены в виде подробных текстовых демонстраций с поясняющими иллюстрациями и примерами кода.
Так выглядит один из шагов разбора кейса сайта «Архитектурный блог»:
Тренировочный материал
Кейсы с возрастающей сложностью и эталонными решения, на которых вы и тренируете навык.
Четыре тренировочных кейсов: 1 лёгкого уровня, 2 среднего уровня и 1 сложного уровня.
В качестве входных данных вы получаете дизайны страниц, на выходе должны получиться снятые параметры макетов и графика.
Для тренировочных кейсов разборы более компактные и включают эталонное решение от авторов, которое можно сравнить со своим.
Так выглядит страница тренировочного кейса:
Экспортирование в Figma
Благодаря экспорту в Фигме можно вывести готовый созданный дизайн не только в едином изображении, но и с нарезанным макетом для верстки интерфейса. Также программа предлагает интеграцию с другими программами для дальнейшего создания сайта.
Для интеграции необходимо выбрать в основном меню раздел «Integrations». В онлайн версии в этом разделе будет одна программа – «Dribbble», в десктопной версии будут еще две дополнительные интеграции с «Zeplin» и «Avocode» — программы для верстки. Чтобы интегрировать свой проект, его необходимо выделить. Далее проект загрузится в выбранную вами программу.
Чтобы экспортировать проект используйте настройки в правой панели меню в разделе «Export».
Здесь есть несколько функций. Например, вы можете выставить размер экрана. Рядом находится раздел, в котором прикрепляется суффикс к имени файла. Это необходимо в том случае, если вы собираетесь экспортировать несколько версий макетов.
Еще одна функция – это выбор формата для экспорта.
Экспорт доступен в четырех форматах:
- Экспорт в JPG изображение. В настройках экспорта в данном формате вы сможете управлять масштабом, добавлять суффиксы, и при необходимости экспортировать насколько версий макета.
- Экспорт в PDF имеет свои особенности. В нем вы сможете выделять текст, который набран в макете. Кроме того, несмотря на большой вес таких документов, векторные объекты в нем прорисовываются с высокой точностью, независимо от масштабов приближения. Однако этот формат запрашивают редко при отправке макета.
- Экспорт в PSD – это перенос проекта в фотошоп. Так как фотошоп является более сложной программой, то и вписать для него интерпретатор будет достаточно сложно.
- Экспорт в SVG – это самый популярный вид загрузки макета. Для верстальщиков проще работать с данным форматом, так как он является векторным. Таким образом, картинка в этом формате будет иметь прорисовку нужного размера для разных устройств. Особенно эффективно использовать данный вид экспорта для мелких иконок.
Хотя экспорт макета в HTML недоступен, все же в разделе «CSS» верстальщик может просмотреть подсказки в виде свойств каждого объекта. Для этого необходимо выделить определенный фрейм или элемент, и просмотреть его «Code». Кроме того, в этом разделе доступна возможность увидеть параметры для разработчиков макетов для iOS и Android.
Итак, это заключительный урок данного цикла, из которого вы узнали о возможностях интеграции и экспорта проектов. Уделив внимание каждому из уроков, вы приобретете базовые навыки создания дизайна в Фигме. Практический опыт и профессионализм придет уже непосредственно при работе с программой.
Полезные ссылки:
- Бесплатный видеокурс по Figma от GeekBrains;
- Профессиональный курс Figma 2.0 для новичков от SkillBox;
- Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.
Export your Figma designs to HTML using TeleportHQ Design to Code
Generate code from your designs by exporting from Figma to TeleportHQ. Convert your prototypes into developer-friendly HTML and CSS code, or directly into React, Vue, Next, Nuxt and Angular. Get the plugin. It’s Free!
Code instantly generated for your preferred development environment
Copy element layers from Figma to TeleportHQ and instantly generate code for React, Next, Vue, Nuxt or Angular and plain HTML and CSS.Our Figma plugin offers a smooth transition from prototype or design to a clean code export.
Export to React
Export to Next
Export to Angular
Export to Vue
Export to Nuxt
How to export Figma to HTML & CSS (Video tutorial)
Watch this short video tutorial on how to convert Figma design to HTML and CSS. Follow these easy steps and you will be ready to export a Figma design in no time.
Generate code in 5 different JavaScript frameworks including React, Angular or Vue using TeleportHQ.
TeleportHQ Design to Code Features
Our Figma export plugin offers a straightforward approach to converting Figma designs to HTML and CSS with the main focus on the designer-developer hand-off.
Instant code generation
Assets inventory
Export to CodeSandbox
Export to TeleportHQ from Figma
Deploy your project as a website to Vercel
TeleportHQ is now available for Figma and helps you export to HTML and CSS
Create a free account to find out why TeleportHQ is the best website builder for developers. The free plan includes 1 project and free hosting.
Get the plugin. It’s Free!
How to export your Figma design to HTML code?
In order to export your work from Figma you first need to install TeleportHQ Design to Code. Once you have the plugin installed you are ready to convert any Figma design to HTML by following 4 simple steps.
STEP 1
Launch the plugin
Launch the Figma export plugin by following this steps: Right click > Plugins > TeleportHQ Design to Code Get the plugin. It’s Free!
Select your frame Launch the Figma export plugin by following this steps: Right click > Plugins > TeleportHQ Design to Code
Export your design To convert a Figma design to code, click on the button “Export to TeleportHQ” and a project will be created automatically in TeleportHQ with the output. If you’re updating existing projects, use the button «Copy Layers to Clipboard» to copy and then paste in your existing TeleportHQ project.
Export any Figma frames to HTML and CSS and validate your designs in minutes
TeleportHQ simplifies the designer-developers process by allowing you to quickly export HTML, CSS, or import figma to React, Vue or other developer-friendly supported code flavours.\nAutomatically convert your design into a production-ready code, for a faster developer handoff.
From Figma to Website in minutes by using TeleportHQ Design to Code Get the plugin. It’s Free!
Как перенести макет из figma на сайт?
Для того чтобы перенести макет из Figma на сайт, вам нужно выполнить следующие шаги:
- Экспортировать изображения из Figma: Если у вас есть в макете какие-то элементы, которые вы хотите использовать на сайте, вам нужно экспортировать их из Figma в формате PNG, JPEG или SVG. Для этого вы можете выбрать нужные элементы в Figma и выбрать пункт «Export» из меню или использовать комбинацию клавиш «Shift + Command/Control + E».
- Создать HTML и CSS файлы: Вам нужно создать HTML и CSS файлы для вашего сайта. HTML будет содержать структуру вашего сайта, а CSS будет отвечать за его оформление.
- Использовать полученные изображения на сайте: Когда вы получили изображения из Figma и создали HTML и CSS файлы, вы можете использовать изображения на вашем сайте. Для этого вам нужно добавить тег
в HTML код, указав путь к изображению в атрибуте src.
- Перенести стили из Figma в CSS: Если вы хотите перенести стили элементов из Figma на ваш сайт, вы можете скопировать CSS-код из Figma и вставить его в ваш CSS файл. При этом вы должны изменить пути к изображениям, если они были экспортированы в другую папку.
- Адаптировать макет под разные экраны: Если ваш макет не был создан с учетом адаптивности, вам нужно будет адаптировать его под разные экраны. Для этого вы можете использовать медиа-запросы в CSS, чтобы изменять стили элементов в зависимости от ширины экрана.
Важно отметить, что перенос макета из Figma на сайт может быть сложным процессом, особенно если вы не знакомы с HTML и CSS. Если у вас есть возможность, лучше доверить эту работу профессионалам.