Figma е страхотен инструмент, който бързо се превръща в любим сред UX/UI и уеб дизайнерите. Можете да създавате адаптивен уеб дизайн бързо и лесно с помощта на този безплатен инструмент, базиран на браузър.
Докато повечето хора създават своите проекти от нулата във Figma, вие можете да се вдъхновите от реални уебсайтове и лесно да създадете дизайн на Figma директно от съществуваща HTML страница. Ето как да го направите.
Защо трябва да създавате Figma дизайни от HTML
Има много причини, поради които може да искате да възпроизведете съществуващ уеб дизайн като дизайн на Figma. Правенето на това чрез приставката Figma спестява време, което ви позволява да се съсредоточите върху фината настройка на вашия дизайн.
Практикуването на уеб дизайн чрез пресъздаване на съществуващи уеб страници е чудесен начин да се учите от майсторите. Можете също да използвате инструмента за проектиране HTML към Figma, ако преди това сте проектирали и публикували уеб страница, до която сте загубили достъп. Вместо да го преработвате от нулата, можете да спестите време, като го конвертирате обратно във Figma, за да работите върху него отново.
Сега, след като знаете защо този инструмент може да бъде полезен, време е да научите как работи.
Как да конвертирате всеки уебсайт в дизайн на Figma
За да започнете работа по дизайн, базирана на Figma, трябва да отворите Figma и да влезете или да се регистрирате. Можете да използвате версията на браузъра, Фигма, или изтеглете настолното приложение; и двамата работят по един и същи начин за този проект.
Отворете a Нов дизайн файл за да започнете вашия проект за проектиране от HTML към Figma.
Стъпка 1: Изтеглете приставката html.to.design
За да можете директно да конвертирате уебсайт на живо в дизайн на Figma, ще ви трябва плъгин. Във Figma има безброй плъгини, които да помогнат с вашите проекти, включително добавки за създаване на макети за телефони и устройства. Можете да добавите вашия преобразуван дизайн на уебсайт към макет по-късно, ако желаете.
За да изтеглите приставката, изберете Меню на Figma (Лого на Figma) > Плъгини > Намерете още добавки. Като алтернатива можете да изберете Ресурси > Плъгини. От която и да е опция въведете в лентата за търсене html.to.design.
Намерете опцията, предоставена от divRIOTS, и изберете Бягай. Това отваря приставката като диалогов прозорец на вашето платно на Figma.
Стъпка 2: Поставете URL адреса на уебсайта
Приставката html.to.design е безплатна, но предлага професионална версия. Можете да завършите процеса на проектиране изцяло с безплатната версия.
Намерете уебсайта, за който искате да направите дизайн на Figma. Трябва да използвате публичен уебсайт, а не уеб страница, която може да бъде достъпна само чрез влизане. Ще използваме нашата начална страница, MakeUseOf.com.
Копирайте пълния URL адрес и го поставете в полето за импортиране на Figma, като замените контейнера за уебсайт на Apple.
Стъпка 3: Заредете вашия дизайн
След като поставите URL адреса на уебсайта, отворете Настройки под полето за импортиране, за да изберете размера на дизайна. Можете да импортирате дизайна за различни устройства, но ще имате по-добър успех при избора на настолно устройство, ако сте използвали URL адрес за настолен компютър и по-добър успех, като използвате мобилен URL адрес за мобилни устройства.
Има и персонализирани опции за устройства или размери, които не са налични като опции по подразбиране. Ние избираме MacBook Pro 14" с Светлина тема.
След като посочите устройството си и настройките за преглед, изберете Импортиране за да оживите вашия HTML дизайн във Figma. Изчакайте, докато лентата за зареждане завърши, за да се попълни дизайнът на Figma.
В зависимост от уебсайта, който сте използвали, може да забележите изскачащ прозорец, обясняващ, че някои шрифтове трябва да бъдат заменени. Това ще се дължи на авторските права за лицензирани шрифтове. Figma ще ги замени с шрифтове, до които имате достъп.
Излезте от всички изскачащи прозорци, след това излезте от диалоговия прозорец на приставката, за да видите новия си дизайн в пълната му форма.
Стъпка 4: Редактирайте своя дизайн на Figma
Оттук можете да започнете да редактирате вашата уеб страница на Figma по какъвто начин пожелаете. Както споменахме, тази функция от HTML към Figma ви позволява да научите как съществуващите уеб страници са проектирани, за да ви вдъхновят да създадете свои собствени от нулата. Можете да използвате основния дизайн от уебсайта и създайте презентация с помощта на преходи във Figma, или просто научете как уеб страниците се настройват от други дизайнери.
В лявото меню ще намерите слоевете. Тъй като това е преобразувано директно от HTML, слоевете може да са по-подробни или дори объркващи от това, с което сте свикнали, когато проектирате сами. Изберете секция в дизайна, за да намерите маркираните слоеве в лявото меню.
Можете да замените изображения, да въведете отново заглавия и основен текст или да преместите неща в оформлението, като щракнете двукратно върху аспекта на дизайна. Приставката html.to.figma не репликира настройките за анимация или преход при кликване върху връзки или смяна на страници. Можете да ги добавите сами.
Как да конвертирате лична уеб страница
По-голямата част от процеса на създаване на частен уебсайт - такъв, който изисква акаунт за достъп - спрямо публична уеб страница е един и същ. Въпреки това, вместо да поставите URL адреса, трябва вместо това да използвате разширение за Chrome, което генерира файл.
За да започнете, отворете Figma и плъгина html.to.figma по същия начин, както преди.
Стъпка 1: Изтеглете и стартирайте разширението за Chrome
Можете да използвате това разширение само с Google Chrome, така че отворете Chrome, за да започнете. От диалоговия прозорец на приставката Figma изберете Разширение за Chrome-или отворете разширението тук на вашия браузър Chrome.
Изберете Добавете към Chrome > Добавяне на разширение за да добавите разширението към вашия браузър.
С добавеното разширение отворете частния уебсайт или страница, чиито дизайн искате да възпроизведете – ние използваме страница в Instagram – и изберете разширението. Свитите разширения се намират под иконата на парче пъзел във вашия браузър.
Ще ви попита дали искате да заснемете цялата страница или само това, което се вижда. Направете своя избор и след това заснемането ще се появи във вашите изтегляния като .h2d файл.
Стъпка 2: Плъзнете генерирания файл в приставката Figma
Отидете във вашето приложение Figma или сайта на Figma в браузъра си и плъзнете изтегления .h2d файл в полето. Файлът ще се зареди и генерира по същия начин като опцията за публичен уебсайт.
Подобно на версията на публичната уеб страница, можете да щракнете двукратно върху аспекти на дизайна, за да ги редактирате, или да щракнете върху менюто отляво, за да видите къде се показват в оформлението.
Може да искате да добавите нови дизайнерски елементи към дизайна на уеб страницата, като например ефект на матирано стъкло Figma, или дори бихте могли да копирате части от дизайна на уеб страницата като a главен шаблон за презентации на Figma. През 2022 г. Adobe придоби Figma, така че можем да очакваме повече забавни начини за използване на Figma в бъдеще.
Използвайте всеки уебсайт за вдъхновение във вашите дизайни на Figma
Въпреки че Figma е предимно за проектиране на уебсайтове или UX/UI страници от нулата, това е чудесна възможност да попълните съществуващи уеб страници, за да видите как са създадени. Можете също така да направите своя уеб дизайн реплика на съществуващ сайт, ако не сте сигурни откъде да започнете от празен лист.
Друга чудесна причина, поради която трябва да използвате плъгина html.to.figma, е ако вече сте проектирали уебсайт, до който сте загубили достъп. Можете да попълните страницата във Figma и да започнете отново, без да се налага всъщност да започвате отново.
