Предполагая, что вы уже создали свой дизайн в Figma, перейдите в левый верхний угол и выберите Файл, затем выберите Экспорт из выпадающего меню. Вам будет предложено экспортировать в формат .png, .jpg, .svg или .pdf. В этом учебнике мы будем экспортировать в формат .png.
После выбора типа файла появится всплывающее окно, в котором можно выбрать место сохранения файла. Найдя подходящее место, нажмите «Экспорт», и ваш файл будет сохранен!
ПРО СОВЕТ: При экспорте CSS-кода из Figma не забудьте включить в экспорт весь соответствующий код. Сюда входят любые медиа-запросы, исходные файлы и любой другой необходимый код. Если этого не сделать, CSS может работать некорректно.
Теперь, когда мы сохранили наш дизайн в формате .png, мы можем открыть его в редакторе HTML-кода. Мы начнем с добавления некоторых основных HTML-тегов в наш код.