Фигма је одличан алат који брзо постаје омиљен међу УКС/УИ и веб дизајнерима. Можете брзо и лако креирати респонзивне веб дизајне користећи овај бесплатни алат заснован на претраживачу.
Док већина људи креира своје дизајне од нуле у Фигми, можете бити инспирисани стварним веб локацијама и лако креирати Фигма дизајн директно са постојеће ХТМЛ странице. Ево како да то урадите.
Зашто бисте требали креирати Фигма дизајне из ХТМЛ-а
Постоји много разлога због којих бисте можда желели да реплицирате постојећи веб дизајн као Фигма дизајн. Ово преко Фигма додатка штеди време, омогућавајући вам да се фокусирате на фино подешавање свог дизајна.
Вежбање веб дизајна поновним креирањем постојећих веб страница је одличан начин да учите од мајстора. Такође можете да користите алатку за дизајн ХТМЛ то Фигма ако сте претходно дизајнирали и објавили веб страницу којој сте изгубили приступ. Уместо да га редизајнирате од нуле, можете уштедети време тако што ћете га поново претворити у Фигму да бисте поново радили на њему.
Сада када знате зашто овај алат може бити згодан, време је да научите како функционише.
Како претворити било коју веб локацију у Фигма дизајн
Да бисте започели било који рад на дизајну заснованом на Фигми, морате да отворите Фигма и да се пријавите или региструјете. Можете користити верзију претраживача, Фигма, или преузмите десктоп апликацију; обоје раде на исти начин за овај пројекат.
Отвори а Нова датотека дизајна да започнете свој ХТМЛ за Фигма пројекат дизајна.
Корак 1: Преузмите хтмл.то.десигн додатак
Да бисте могли директно да конвертујете веб локацију уживо у Фигма дизајн, требаће вам додатак. На Фигми постоји безброј додатака који ће вам помоћи у дизајну, укључујући додатке за прављење макета за телефоне и уређаје. Можете касније да додате свој конвертовани дизајн веб локације у макету ако то желите.
Да бисте преузели додатак, изаберите Фигма мени (лого Фигма) > Плугинс > Пронађите још додатака. Алтернативно, можете изабрати Ресурси > Плугинс. Из било које опције унесите у траку за претрагу хтмл.то.десигн.
Пронађите опцију коју пружа дивРИОТС и изаберите Трцати. Ово отвара додатак као оквир за дијалог на вашем Фигма платну.
Корак 2: Налепите УРЛ веб локације
Додатак хтмл.то.десигн је бесплатан, али нуди про верзију. Можете у потпуности да завршите свој процес дизајна са бесплатном верзијом.
Пронађите веб локацију на којој желите да направите Фигма дизајн. Требало би да користите јавну веб локацију - не веб страницу којој се може приступити само пријављивањем. Користићемо нашу почетну страницу, МакеУсеОф.цом.
Копирајте пуну УРЛ адресу и налепите је у оквир за увоз на Фигми, замењујући чувар места Аппле веб локације.
Корак 3: Учитајте свој дизајн
Након што налепите УРЛ веб локације, отворите Подешавања испод оквира за увоз да бисте изабрали величину дизајна. Можете да увезете дизајн за различите уређаје, али ћете имати бољи успех при одабиру десктоп уређаја ако сте користили УРЛ адресу за десктоп и бољи успех користећи УРЛ за мобилне уређаје за мобилне уређаје.
Постоје и прилагођене опције за уређаје или величине које нису доступне као подразумеване опције. ми бирамо МацБоок Про 14” са Светлост тема.
Када одредите свој уређај и погледате подешавања, изаберите Увоз да оживите свој ХТМЛ дизајн у Фигми. Сачекајте док се трака оптерећења не заврши да би се Фигма дизајн попунио.
У зависности од тога коју веб локацију сте користили, можда ћете приметити искачући оквир који објашњава да су нека слова морала бити замењена. Ово ће бити због ауторских права за лиценциране типове слова. Фигма ће их заменити фонтовима којима имате приступ.
Изађите из свих искачућих прозора, а затим изађите из дијалога додатака да бисте видели свој нови дизајн у пуном облику.
Корак 4: Уредите свој Фигма дизајн
Одавде можете почети да уређујете своју Фигма веб страницу на било који начин. Као што је поменуто, ова функција ХТМЛ за Фигма вам омогућава да сазнате како су постојеће веб странице дизајниране да вас инспиришу да креирате сопствену од нуле. Можете користити основни дизајн са веб странице и направите презентацију користећи прелазе у Фигми, или једноставно научите како веб странице постављају други дизајнери.
У левом менију ћете пронаћи слојеве. Пошто је ово конвертовано директно из ХТМЛ-а, слојеви могу бити детаљнији — или чак збуњујући — од онога на шта сте навикли када сами дизајнирате. Изаберите одељак у дизајну да бисте пронашли истакнуте слојеве у левом менију.
Можете да замените слике, поново откуцате наслове и основни текст или преместите ствари унутар изгледа тако што ћете двапут кликнути на аспект дизајна. Додатак хтмл.то.фигма не реплицира поставке анимације или прелаза приликом кликања на везе или промене страница. Можете их додати сами.
Како претворити приватну веб страницу
Већина процеса креирања приватне веб странице – оне којој је потребан налог за приступ – у односу на јавну веб страницу је исти. Међутим, уместо да налепите УРЛ, морате да користите Цхроме екстензију која генерише датотеку.
За почетак отворите Фигму и додатак хтмл.то.фигма на исти начин као и раније.
Корак 1: Преузмите и покрените додатак за Цхроме
Ово проширење можете да користите само са Гоогле Цхроме-ом, па отворите Цхроме да бисте започели. У дијалогу додатка Фигма изаберите Цхроме додатак—или отворите проширење овде у вашем Цхроме прегледачу.
Изаберите Додај у Цхроме > Адд Ектенсион да додате екстензију свом претраживачу.
Са додатком екстензије, идите на приватну веб локацију или страницу на којој желите да поновите дизајн — ми користимо Инстаграм страницу — и изаберите проширење. Скупљена проширења се налазе испод иконе комада слагалице у вашем претраживачу.
Питаће вас да ли желите да снимите целу страницу или само оно што се види. Изаберите свој избор и снимак ће се појавити у вашим преузимањима као .х2д датотека.
Корак 2: Превуците генерисану датотеку у додатак Фигма
Идите на апликацију Фигма или на Фигма локацију у свом претраживачу и превуците преузету .х2д датотеку у оквир. Датотека ће се учитати и генерисати на исти начин као и опција јавне веб локације.
Као и са јавном верзијом веб странице, можете двапут да кликнете на аспекте дизајна да бисте их уредили или да кликнете на мени са леве стране да видите где се појављују на изгледу.
Можда бисте желели да додате нове елементе дизајна у дизајн веб странице, нпр Фигма ефекат мат стакла, или чак можете реплицирати делове дизајна веб странице као а мастер шаблон за Фигма презентације. 2022. Адобе је купио Фигму, тако да можемо очекивати забавније начине коришћења Фигме у будућности.
Користите било коју веб локацију за инспирацију у својим Фигма дизајнима
Иако је Фигма првенствено за дизајнирање веб локација или УКС/УИ страница од нуле, то је одлична прилика да се постојеће веб странице попуне да бисте видели како су направљене. Такође можете да направите свој веб дизајн као реплику постојећег сајта ако нисте сигурни одакле да почнете са празног листа.
Још један сјајан разлог зашто би требало да користите додатак хтмл.то.фигма је ако сте већ дизајнирали веб локацију којој сте изгубили приступ. Можете попунити страницу у Фигми и почети изнова, а да не морате поново да почнете.