Как передать макет верстальщику из фигмы

Как экспортировать проект figma в html

Экспортирование в Figma

• Экспорт в JPG изображение. В настройках экспорта в данном формате вы сможете управлять масштабом, добавлять суффиксы, и при необходимости экспортировать насколько версий макета.
• Экспорт в PDF имеет свои особенности. В нем вы сможете выделять текст, который набран в макете. Кроме того, несмотря на большой вес таких документов, векторные объекты в нем прорисовываются с высокой точностью, независимо от масштабов приближения. Однако этот формат запрашивают редко при отправке макета.
• Экспорт в PSD – это перенос проекта в фотошоп. Так как фотошоп является более сложной программой, то и вписать для него интерпретатор будет достаточно сложно.
• Экспорт в SVG – это самый популярный вид загрузки макета. Для верстальщиков проще работать с данным форматом, так как он является векторным. Таким образом, картинка в этом формате будет иметь прорисовку нужного размера для разных устройств. Особенно эффективно использовать данный вид экспорта для мелких иконок.

Как экспортировать изображения из Figma

В настройках экспорта вы можете выбрать его размер и формат файла: PNG, JPG, SVG или PDF. Фото с прозрачностью сохраняют обычно в формате PNG, без прозрачности — в JPG, с векторными формами (логотипы, иконки) — в формате SVG.

How to Export Figma to HTML 2 min read

Exporting your Figma design to HTML is geared more toward developing high-fidelity prototypes and websites. In this article, we will guide you through how to do this, what it looks like, and just how easy it is.

How To Export Code?

You can export HTML code directly from Figma, or alternatively directly from Anima’s web app, here are three ways in which you can export HTML from Figma:

👉 Option (1): Exporting Code directly from Figma

1. Download the Anima for Figma plugin.
2. Select the components that you want to get the HTML code for.
3. Select “Export Code” at the bottom of the plugin panel.

Click “Export Code” on the bottom left corner on your Anima plugin in Figma

👉 Option (2): Exporting Code using Anima’s Web App

Here you can download the code for your designs directly from the Anima’s web app.
The interesting thing about this option is that it allows you to get code for a specific component as well, rather than the full design package.

Here’s how you can do it:

1. Sync your Figma design to your Anima project (Learn how to sync your design draft).
2. Select the screen you want to get the code of.
3. Switch to code mode, select any element and get the HTML code.

Choose an element and copy the HTML code

4. You can also simply click Download Code in the top right corner of the Anima web app, and download the full code package to your desktop.

Click on “Download Code” on the top right corner to get the full code package

What’s in the Code Package?

The downloaded Code Package saves on your computer as a zip file in your selected location. In this zip file, you can find all the files for your design (this includes the HTML, CSS, images, and fonts files).

Download the code package to your desktop to preview your files locally

Once the files are unzipped, you can preview them locally in the browser, you will also see all its Smart Layers and interactions, just like the final product!

From Figma to developer-friendly HTML code

Opening the files in a text editor will present to you a well-structured HTML and CSS code.

• For every designed screen you are provided with its HTML and CSS file.
• The screens with Breakpoints share the same HTML and CSS file.

Want to check out a sample Code Package? We thought you might be, click here to download!

Старт в Figma для верстальщика

Figma — это графический онлайн-редактор для дизайнеров интерфейсов и веб-разработчиков. Сейчас это удобная, бесплатная альтернатива Photoshop. Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

Регистрация и добавление нового макета

Чтобы начать пользоваться редактором, нужно зайти на сайт и зарегистрироваться. Можно войти через Google или просто создать аккаунт на сайте.

Форма регистрации

Затем вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для ознакомления с инструментами приложения. Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение .fig или .sketch . При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте.

После добавления макет появится в общем списке, и можно будет приступить к работе с ним.

Импорт нового макета

Структура макета и рабочие инструменты

Интерфейс в разделе работы с макетом состоит из нескольких блоков.

1. В боковой панели слева показана вся структура проекта. Можно проследить вложенность элементов и найти нужный. Каждый тип элемента обозначен отдельной иконкой — текст, изображение, составной блок.
2. Основная рабочая область в центре — для непосредственного взаимодействия с макетом.
3. В верхней части страницы расположено основное меню. Большая часть инструментов в нём предназначены для дизайна, но вам точно пригодится меню масштабирования, расположенное справа.
4. Боковая панель справа включает в себя три вкладки, но нам будут нужны только две из них — Design и Code. В этих вкладках находится вся доступная информация об элементе.

Работа с параметрами элементов

Основная задача верстальщика при работе с макетом — получить параметры элементов. Давайте разберём по пунктам, как это сделать в Figma.

Текст

Чтобы узнать все текстовые параметры, нужно выделить элемент и открыть вкладку Code в правой боковой панели. Там в списке свойств отобразятся все используемые параметры — название, размер, насыщенность и цвет шрифта, высота строки и остальные.

Работа с текстовыми элементами

Изображение

Свойства width и height во вкладке Code расскажут о размере изображения.

Работа с изображениями

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

Экспорт изображений

Цвет элемента

Во вкладке Code можно узнать фоновый цвет элемента — значение background .

Определение фонового цвета блока

Размеры элементов и расстояние между ними

Размер можно определить несколькими способами. Например, во вкладке Code посмотреть значения свойств width и height . Или просто выделить нужный блок — размер отобразится внизу элемента. Также можно узнать расстояние между любым элементом и соседними с ним. Для этого нужно выделить его, а затем наводить курсор на остальные элементы — будет появляться направляющая и значение.

Определение размеров элементов и расстояния между ними

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

Фигма — только один из навыков фронтендера

Научитесь работать с макетами в Фигме, и верстальщики скажут вам спасибо.

Figma – советы верстальщику

Figma – это графический онлайн-редактор для совместной работы дизайнеров и веб-разработчиков. В этой статье рассмотрим некоторые возможности Фигмы для удобства верстальщиков.

Как открыть файл *.fig

В разделе «Recent» жмём на «Import»:

После обработки файла, макет появится в списке.

Как получить CSS-стили элемента

К примеру, нужно узнать какие стили применены к заголовку:

Для этого, кликаем по нему, сразу видим его размеры в пикселях.

Далее, во вкладке «Inspect», в самом низу будут CSS-стили:

В данном методе удобно то, что можно скопировать только нужные свойства.

Способ №2

Через меню «Copy/Paste» → «Copy as CSS», в буфер помещаются все стили выделенного элемента.

Как сохранить изображения

Выделяем нужное изображение, открываем вкладку «Design», далее панель «Export».

Тут можно выбрать размер, формат файла (PNG, JPG, SVG, PDF) и сохранить файл или несколько файлов в разных форматах, что удобно для вёрстки под ретину.

Если выбрать несколько объектов, то они все сохранятся по отдельности, в одном архиве.

Как сохранить целый макет в PNG

Чтобы сохранить целый макет в картинку, достаточно выделить общий контейнер в меню слоёв и экспортировать в изображение:

Как измерить расстояние между объектами

Чтобы узнать отступы от ближайших элементов нужно выделить элемент и зажать Alt, дале навести курсор на соседний элемент.