Тёмный

Быстрый экспорт макета из Figma/XD/Sketch в HTML верстку 

Viachas Kul
Подписаться 660
Просмотров 79 тыс.
50% 1

Быстрый экспорт макета из Figma/XD/Sketch в HTML верстку
Ссылка на Плагин:
web.overlay-tech.com
www.figma.com/community/plugi...)
Мой макет:
www.figma.com/file/b5iPe8J63P...
Команда терминала:
MAC:
rm -rf "$HOME/Library/Application Support/Figma/"{Desktop,DesktopProfile}
WIN:
1) Open the Start menu and paste the %APPDATA%\\Figma command.
Press the Enter key to submit.
2) In the window, delete the DesktopProfile folder.
Браузеры, подробнее:
help.figma.com/hc/en-us/artic...
Документация:
faq.overlay-tech.com/designer... www.figma.com/community/file/...
Теги:
#figma, #html, #дизайн, #вебдизайн
Таймкоды:
0:00 Вступление
0:55 Подробнее о работе плагина
4:15 Процесс экспорта
6:00 Копируем код в HTML документ

Опубликовано:

 

8 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 66   
@odc539
@odc539 10 месяцев назад
07.2023 плагин Overlay сломан.. ошибка после авторизации
@detepl7463
@detepl7463 Год назад
А что делать, если этот плагин не определяет кнопки?
@user-ov6sl7mw7j
@user-ov6sl7mw7j 9 месяцев назад
помогите пожалуйста я на виндовс. Там в плагине есть окно с комбинацией, я делаю комбинацию и вместо выполнения экспорта кода открывается то же самое окно. Что делать?
@Mordolei_kala
@Mordolei_kala 3 месяца назад
Тоже самое
@bestofthebest8758
@bestofthebest8758 13 дней назад
все сделала как сказали, но у меня получается так, что нормальное отображение сайта только на 50% разрешения экрана, когда увеличиваю на 100% всё смещается , увеличивается и получается каша , из-за чего это ?
@Nguileon
@Nguileon Год назад
Добрый день, у меня экспорт идёт либо по одному компоненту либо никак, фреймы вообще не хочет экспортировать, я что то не так делаю? почти на всё выдаёт To start exporting components, select a component, then open Overlay with ⌘⌥P (Mac) or Alt+Ctrl+P (Windows)
@alaudinovbeslan
@alaudinovbeslan Год назад
аналогично
@YeAD1501
@YeAD1501 Год назад
Click Create component in the toolbar, or use the keyboard shortcut to turn your selection into a component: Mac: ⌥ Option ⌘ Command K. Windows: Ctrl + Alt + K.
@BROOKLAND_Detailing
@BROOKLAND_Detailing 6 месяцев назад
gooooooodd@@YeAD1501
@Lida_17
@Lida_17 5 месяцев назад
А почему я не могу экспортировать Desktop ?
@katrinfirefox1456
@katrinfirefox1456 2 года назад
Отличное видео, но уточните пожалуйста откуда вы взяли ссылку для тега
@viachas
@viachas 2 года назад
Импорт стилей из Google Fonts fonts.google.com/specimen/Roboto?query=roboto#glyphs
@user-xi1bp4ed7s
@user-xi1bp4ed7s 4 месяца назад
Такая ошибка вылазит Export ERROR Could not validate your component
@ytbravoone7575
@ytbravoone7575 Год назад
Привет почему у меня при запуске плагина появляется надпись to start exporting components, select a component, then open Overlay with я зарегался и в фигме тоже зарегался но нечего не получается
@bloody_roomchik
@bloody_roomchik Год назад
Нужно выделить полностью весь макет (Ctrl + A вроде)
@memestrooyy
@memestrooyy Год назад
тоже самое
@memestrooyy
@memestrooyy Год назад
ты уже решил проблему?
@bloody_roomchik
@bloody_roomchik Год назад
@@memestrooyy Попробуй выделить весь макет (Ctrl + A или кликнуть по фрейму который нужно конвертировать) и попробуй ещё раз
@memestrooyy
@memestrooyy Год назад
@@bloody_roomchik пробовал,но все равно тоже самое пишет
@atata_r0mk022
@atata_r0mk022 11 месяцев назад
как этот плагин справится с более сложной разметкой, например таблицы, формы с чекбоксами, селектами, инпутами?
@viachas
@viachas 11 месяцев назад
Ну ты можешь пометить компонент как инпут или чекбокс в принципе, так что наверное ок
@user-cq4df9md9d
@user-cq4df9md9d 7 месяцев назад
У меня проблема такая при использовании , что плагин просит выбрать компонент , хотя тот выбран , сталикивался с таким кто ?
@Mordolei_kala
@Mordolei_kala 3 месяца назад
Такаеже ситуация
@user-ru9tg5lv6g
@user-ru9tg5lv6g Год назад
Здравствуйте-это ссылка до сих пор работает? просто у меня выходит какая-то ошибка
@viachas
@viachas Год назад
Все должно работать
@brandonloose8505
@brandonloose8505 14 дней назад
05.2024 плагин не работает
@marl-minecraft9851
@marl-minecraft9851 Год назад
Почему overlay выдаёт вместо html - react, css - scss
@bear3xl48
@bear3xl48 Год назад
Можно выбрать при создании проекта
@alexsedoykin
@alexsedoykin Год назад
Ну в общем мы поняли
@nastya_lucif182
@nastya_lucif182 2 года назад
А как открыть окно что бы скачать шаблон? 4:14
@viachas
@viachas 2 года назад
Запустить плагин выбрав соответсвующий фрейм
@bc.infin1ty
@bc.infin1ty 9 месяцев назад
как запустить плагин? @@viachas
@evilwithin777
@evilwithin777 Год назад
У меня ошибка,не дает скопировать или копирует только как изображение
@viachas
@viachas Год назад
Попробуй не использовать компоненты
@TIMMER_PUBGM
@TIMMER_PUBGM 7 месяцев назад
Сейчас он работает
@silveringreviews
@silveringreviews 2 года назад
Эх, если бы он мог использовать tailwind css framework...
@coolhazer9436
@coolhazer9436 2 года назад
подробнее...
@pecher5150
@pecher5150 Год назад
ну у тебя по факту есть структура стилей её переделать совсем не проблема) к счастью
@stormbraker637
@stormbraker637 Год назад
Есть плагин для экспорта в тайлвинд
@logstik
@logstik 2 года назад
Как запустить Overlay?
@viachas
@viachas 2 года назад
Как и любой другой плагин в фигме
@user-sf9tw1by1u
@user-sf9tw1by1u 4 месяца назад
Тот же вопрос. А как запустить любой другой плагин в фигме? Потому что на видео объясняется, что нажимать потом, а как запустить плагин - нет( ​@@viachas
@viachas
@viachas 2 года назад
После апдейта Фигмы плагин стал плохо работать
@user-tq3kv2og1o
@user-tq3kv2og1o 2 года назад
Куда надо ввести код для очищение кеша
@viachas
@viachas 2 года назад
@@user-tq3kv2og1o У меня написано как это сделать через терминал на маке, на винде: 1) Close the Figma desktop app. 2) Open the Start menu and paste the %APPDATA%\\Figma command. Press the Enter key to submit. 3) In the window, delete the DesktopProfile folder. 4) Launch the Figma desktop app again. Source: help.figma.com/hc/en-us/articles/360040328553-Can-I-work-offline-with-Figma-
@user-tq3kv2og1o
@user-tq3kv2og1o 2 года назад
@@viachas Большое спасибо!
@konstantinreimer9341
@konstantinreimer9341 2 года назад
@@viachas Простите а вводить в кмд одну из вариаций на виндоус?
@viachas
@viachas 2 года назад
@@konstantinreimer9341 По этой ссылке help.figma.com/hc/en-us/articles/360040328553-Can-I-work-offline-with-Figma-#clear-data
@M718rs
@M718rs 2 года назад
А как открыть окно что бы скачать шаблон?
@MDREG
@MDREG 2 года назад
Для начала нужно зарегистрироваться в Figma, если вы про мой макет
@M718rs
@M718rs 2 года назад
На 4:14
@MDREG
@MDREG 2 года назад
@@M718rs Запустить плагин выбрав соответсвующий фрейм
@aham1082
@aham1082 11 месяцев назад
Ребята, объясните, зачем макеты из Figma конвертировать в Html?
@Relaxlifee
@Relaxlifee 11 месяцев назад
Чтобы посмотреть как он выглядит в жизни 😂
@hiirohomura3910
@hiirohomura3910 11 месяцев назад
А как по другому сделать из этих макетов полноценный рабочий сайт и запускать его в браузере? Для этого и нужен html код
@user-oc6zj8jh1q
@user-oc6zj8jh1q 9 месяцев назад
Ну смотри Figma позволяет делать макет сайта ,но не сам сайт. Чтобы ты мог повесить свой сайт в открытый доступ тебе нужно повесить его на хост. На хост тебе нужно залить исходники твоей верстки. Вопрос- каким образом ты импортируешь макет из figma на хост если у тебя нету исходников твоей верстки?
@averkom
@averkom 9 месяцев назад
Конвертация макетов из Figma в HTML имеет несколько целей. Во-первых, это позволяет визуализировать дизайн макета и увидеть, как он будет выглядеть на практике. HTML является основным языком разметки для создания веб-страниц, поэтому преобразование макета в HTML позволяет создать интерактивный прототип или рабочий сайт, который можно просматривать в браузере. Это важно для тестирования и предварительного просмотра внешнего вида и взаимодействия элементов макета перед его фактической разработкой. Во-вторых, конвертация в HTML позволяет создать исходный код, который может быть использован разработчиками для дальнейшей работы над макетом. Код HTML содержит информацию о структуре и компонентах макета, таких как заголовки, текст, изображения, кнопки и другие элементы интерфейса. Разработчики могут использовать этот код вместе с CSS (каскадные таблицы стилей) и JavaScript для создания функционального и адаптивного веб-сайта. Таким образом, конвертация макетов из Figma в HTML позволяет визуализировать дизайн, создать прототип или рабочий сайт для предварительного просмотра и тестирования, а также предоставляет исходный код, который может быть использован для дальнейшей разработки и внедрения.
@official_royce
@official_royce 6 месяцев назад
хорошо, но сайт ведь будет без адаптива, тогда нужно весь код переписывать?@@averkom
@YuriiAvram
@YuriiAvram Год назад
Доброго дня не зрозумів як ви вивели всі теги.??
@viachas
@viachas Год назад
Паглядзіце падрабязней у дакументацыі faq.overlay-tech.com/designer-faq а таксама ў файле прыкладу ў фігме www.figma.com/community/file/921066411285098081
@YuriiAvram
@YuriiAvram Год назад
Сбпробую дякую я починаючий
@WynautUA
@WynautUA Год назад
@@viachas це такий тролінг на український комент відписувати на білоруській?
@viachas
@viachas Год назад
@@WynautUA Чаму раптам, я не маю магчымасці на сваёй роднай мове адпавядаць на каментарыі?
@valerii7323
@valerii7323 8 месяцев назад
​@@viachasебу петух дерзит
Далее
Figma For Beginners: Explore ideas (1/4)
15:50
Просмотров 1,2 млн
skibidi toilet multiverse 038
06:38
Просмотров 3 млн
Figma For Beginners: Build prototypes (3/4)
7:46
Просмотров 345 тыс.
Figma теперь в VS Code???
8:24
Просмотров 69 тыс.
Figma tutorial: Intro to variables
14:51
Просмотров 489 тыс.
Create a Figma Design System - Fundamentals (Part 1)
13:43