Как да създавате и добавяте макети към вашите дизайни на Figma с помощта на плъгини

Ако сте дизайнер, който обича да демонстрира своите дизайни с помощта на макети, може да бъде лесно да ги създадете във Figma.

Вместо да запазвате своите дизайни на Figma и да преминавате към друга програма, за да създадете макет, можете лесно да изтеглите плъгини за макет във Figma. Има много опции за плъгини в различни стилове, но всички те са лесни за използване и интегриране в по-големи дизайни.

Как да намерите и изтеглите плъгини Figma

Изтеглянето и инсталирането на плъгин във Figma е едно и също, независимо дали използвате приложението или версията на браузъра. От Начална страница на браузъра Figma, щракнете Общност > Плъгини и джаджи, и потърсете в списъка или използвайте лентата за търсене.

От Приложението на Figma, началната страница ще предлага същата опция като браузъра, за да стигнете до страницата на общността. Но ако сте на страница за дизайн, тогава можете да щракнете върху логото на Figma Плъгини. Ако вече сте инсталирали плъгини, ще ги видите изброени тук.

За да намерите повече, изберете

Преглед на плъгини в общността. Това ще ви отведе до страницата на общността в приложението, където можете да търсите други плъгини.

На страницата на общността ще намерите малка реклама за всеки плъгин, датата на последната актуализация и колко често всеки плъгин е бил изтеглян. За повече информация относно всеки плъгин – като коментари от потребители и ръководства за употреба – щракването върху името му ще ви отведе до информационната страница на този плъгин.

След като намерите плъгин, който искате да изтеглите, щракнете върху синьото Инсталирай бутон.

Ако не сте сигурни какво да търсите, ето нашите пет най-любими плъгини за макет. Има още много, но е добре да започнете отнякъде.

• Глинени макети 3D
• Ъглови макети
• MockRocket - 3D макети
• Макет
• Vectary 3D елементи

Как да използвате макетни плъгини във Figma

Процесът на инсталиране на плъгини е един и същ, независимо от типа плъгин, който използвате, но може да има някои разлики в начина, по който се използват. Ето защо винаги е най-добре да прочетете страницата на общността на отделния плъгин за допълнителни подробности.

Във Figma можете да изберете готови размери на рамката за конкретни екрани, като iPhone 13 или голям или малък Android. Трябва да създадете своя дизайн за предвидения размер на устройството, вместо да се опитвате да преоразмерявате дизайните по-късно, за да пасне на вашия макет, но някои макети ще позволят малко различни размери с бр изкривяване.

Можете дори да използвате екранна снимка от вашето устройство, която ще бъде с идеален размер за макет на същото устройство.

Макетите обикновено са за статични дизайни на екрани, въпреки че можете направете видео макет във Photoshop. Ще се съсредоточим върху макети на Figma за преносими устройства, но вие можете създайте макет от нулата във Photoshop за други устройства. След като дизайнът на вашия екран е финализиран, можете да преминете към създаване на макета на продукта.

Ще ви покажем как да използвате три от предложените от нас плъгини: Clay Mockups 3D, Angle Mockups и Vectory 3D Elements. Да скочим направо.

Глинени макети 3D

С отворен дизайн, изберете рамката и след това отидете на Плъгини и изберете Глинени макети 3D. Това отваря прозорец, в който можете да изберете устройството за макета. Вашият дизайн трябва да се покаже на екрана на макета в този прозорец.

Можете да промените ъгъла на макета, както и цвета в този прозорец. След като сте доволни от това как изглежда, щракнете Запазване като изображение.

Можете да се върнете назад и да промените цвета или други аспекти по всяко време, като щракнете Редактиране на макет под плъгин в дясното меню. Сега можете да добавите своя плъгин към по-големи дизайни като презентации или вашето портфолио.

Ъглови макети

За да използвате Angle Mockups, трябва да създадете акаунт на Angle, за да изтеглите библиотеката на макетите от техния уебсайт. На Уебсайт на Angle, щракнете Впиши се, което ще изведе изскачащ прозорец, където можете да щракнете Регистрирай се и добавете вашите данни, за да създадете безплатен акаунт.

След като влезете, за да изтеглите макете, щракнете Макети > Изтеглете проба. За по-изчерпателен набор от макети можете да платите за премиум достъп, но извадката, предлагана с безплатния акаунт, е достатъчно добра.

След като го изтеглите, разархивирайте файла. Това съдържа мостри, които можете да използвате във Figma, Sketch и Adobe XD, както и някои безплатни тапети. Отвори ъгълFigma. Ще намерите два видеоклипа, които да ви помогнат с използването на макети, както и четири комплекта Figma файлове с различни макети.

За да импортирате файловете във вашия акаунт във Figma, отидете в браузъра Figma и щракнете върху вашия профил. Можете да получите достъп до това от приложението, като отидете на Файл > Отворете файлов браузър. Плъзнете и пуснете всеки Angle файл във Figma. След това отворете файла Angle, като щракнете двукратно върху него от страницата на браузъра Figma.

Намерете ъгъла на устройството, който искате да използвате за своя макет и го копирайте (° Сmd + ° С за Mac или ° Сtrl + ° С за Windows). Поставете го (° Сmd + V за Mac или ° Сtrl + V за Windows) в същата монтажна област като основния ви дизайн.

В палитрата на слоевете разгънете слоевете на макетния екран, докато не видите слоя с икона на картина, озаглавена Поставете Artboard тук. Изберете този слой. След това отидете на Plugins > Angle Mockups и изберете оригиналния си дизайн в изскачащия прозорец.

Това трябва да се покаже в прозореца за визуализация в ъгъла на вашия макет, но няма да покаже устройството на макета. Щракнете върху Приложи и вашият екран вече трябва да е върху макета на устройството под правилния ъгъл.

Vectary 3D елементи

Vectary 3D работи подобно на Clay Mockups 3D, въпреки че има по-малко опции за макети на устройства, тъй като също така предлага разнообразие от 3D активи. Отворете своя дизайн, изберете рамката и отидете на Плъгини > Vectary 3D елементи.

Намерете макета, който искате да използвате, в изскачащата библиотека, след което щракнете Зареждане на рамката. След като вашият дизайн се появи на екрана на устройството, щракнете Експортиране на изображение.

Сега имате 3D макет на вашия дизайн на устройството, което изберете. Можете лесно да го добавите към друг дизайн.

След като вашият макет е завършен, можете да го запишете като PNG файл, за да го използвате лесно в друг дизайн. Щракнете върху Файл > Експортиране. Изберете избраното от вас изображение за експортиране, след което щракнете Експортиране за вашия окончателен PNG.

Добавете реализъм към вашите дизайни с Figma Mockups

Има безброй приложения за създаване на макети за вашите дизайни. С различни плъгини на Figma можете да намерите голямо разнообразие от стилове за работа, които можете да добавите към вашите презентации, портфолио или да създадете само за забавление, за да покажете своята дизайнерска работа.

С няколко разлики в приложението, плъгините за макет на Figma са лесни за достъп и използване, така че защо да не опитате?

Как да създадете главни шаблони за презентации във Figma

Прочетете Следващото