Вземи запис на това обучение + всички материали
Пропуснал си това обучение? Вземи 4.5 часа запис, материали и допълнителна информация.
Даниела Борисова – моите 5 най-използвани плъгини за Figma
В тази гост-статия Даниела Борисова ни споделя в детайли кои са Figma плъгините, които най-често използва и как те правят работата ѝ по-опримизирана и ефективна...
LinкedIn профил
Здравейте, аз съм Даниела,
продуктов дизайнер с +4 години опит.
Занимавала съм се с продукти в сферата на Education Technology (EdTech), SaaS, а към момента работя по такива в сферата на уеб хостинга.
Завършила съм Националната художествена гимназия и академия, а след това различни програми за дизайн, които ми помогнаха да науча основните принципи и да намеря първия си про-боно стаж. Започнах с графичен дизайн, но бързо след това открих себе си в продуктовия дизайн.
Обичам професията си, защото винаги ме изненадва, винаги има нещо ново, което не съм опитала, и това е вълнуващо, а хората, нашите потребители, са най-интересни.
Обичам да споделям знания, да говоря пред публика, и да чувам обратната връзка, затова стартирах и собствена инициатива в Linkedin – Your UX BFF. Там всяка седмица споделям неща, които уча ежедневно от реалната работна среда.
Освен споделянето на знания за дизайн, обичам да говоря и пиша и за съвременно изкуство, и го правя винаги, когато имам възможност. В изкуството търся онези автори, които не са толкова познати, често за тях няма информация на български език, а посланията им за света са толкова силни. Отскоро се занимавам и с менторство, и въпреки, че аз съм в ролята на ментор, вярвам, че уча наравно с хората, на които помагам.
Моите пет най-използвани Figma плъгини
В работата си като продуктов дизайнер винаги съм търсила прости, но ефективни решения, включително при избора на софтуер и инструменти. Работя с Figma от повече от 5 години и през това време съм тествала най-различни плъгини.
С времето и опита научих за себе си, че нямам нужда от всеки плъгин, който излиза, а по-скоро от няколко, които са наистина полезни, спестяват време, и правят работата ми по-лесна. Плъгините, които ползваме са тясно свързани с работата, която ежедневно изпълняваме и се различават за всяка специалност и всеки дизайнер.
Споделям моите пет плъгина за Figma, които най-често използвам и препоръчвам.
Всички плъгини са безплатни и работят с free, professional и enterprise плановете на Figma и могат да бъдат свалени от Community Tab.
1. Stark – Contrast & Accessibility Checker
Stark – Contrast & Accessibility Checker е плъгин, достъпен за Figma, Adobe XD и Sketch, предназначен да ни помага да достигнем стандартите за уеб достъпност, зададени от WCAG (Web Content Accessibility Guidelines) в продуктовия дизайн.
Едни от основните функции на Stark са Contrast Checker (проверка на контраст), Vision Simulator (симулатор на зрението), настройките за типография и поставянето на landmarks или ориентири.
1.1 Stark – Contrast checker
За да проверим контраста на два цвята е необходимо да селектираме frame, който съдържа и двата цвята един върху друг. Stark Contrast Checker дава информация за нивата на контраст, базирана на WCAG стандартите за strong (AA) и excellent (AAA) accessibility.
Stark използва препоръчителните съотношения за текст (АА – 4.5:1 и ААА – 7:1), но не включва параметъра за съотношение на контраст на не-текстово съдържание, който е 3:1 за АА и ААА. Stark предоставя предложения за корекции на цветовете, и така ни помага да подобрим четливостта и достъпността.
1.2 Stark – Vision simulator
Друга ключова функционалност е Vision Simulator (Симулатор на зрението), който ни позволява да имитираме различни зрителни нарушения или моментни обстоятелства, които биха могли да затруднят потребителите – далтонизъм, размазано виждане, двойно виждане или ярка светлина, която затруднява видимостта.
Тази функция е едно полезно напомняне, че потребителите имат различни нужди, намират се в различна среда, и е много важно да вземаме предвид тези обстоятелства, когато създаваме продукти.
1.3 Stark – Typography
Stark ни предоставя информация за препоръките за размер на типографията спрямо стандартите за достъпност. Ако размера на типографията (кегел) е по-малък от 12px той нарушава стандартите за достъпност.
За да използваме тази функция е необходимо да стартираме Stark, да изберем Typography от опциите и да селектираме текстово съдържание / text layer. Stark веднага ще разпознае размера на текста и ще ни даде информация дали отговаря на стандартите и най-добрите практики. В случай, че не, Stark дава предложения как да го коригираме. Можем да увеличаваме и намаляваме размера на текста в прозореца на плъгина, използвайки бутоните, предназначени за това.
1.4 Stark – Touch targets
Друга много полезна функционалност е Touch targets. Тази функция измерва размера в px на интерактивните елементи, които потребителя трябва да може да докосне на мобилно устройство и таблет и ни дава информация за препоръчителните минимални размери за Android и iOS операционни системи.
1.5 Stark – Landmarks
Landmarks или ориентирите са начин за определяне на роли в структурата на дадена уеб страница. Landmarks могат да бъдат например header, навигационното меню, основното съдържание на страницата, footer и тн. Структурната информация, предавана визуално на потребителите, трябва да бъде представена програмно в HTML документа с помощта на landmarks или ориентири.
Използването на правилните ARIA labels (Accessible Rich Internet Applications) за всеки landmark е ключово за безпроблемното навигиране за потребители, които използват клавиатура или екранен четец. Така те могат да прескачат от един на друг ориентир, например от header на navigation без да минават през всички опции на тези елементи.
Бележка {dev} blondie; – а ако искаш да разбереш защо уеб достъпността е толкова важна, виж в тази статия.
2. Content Reel
Content Reel е безплатен плъгин за Figma, който ни позволява да обогатяваме дизайните си с реалистично съдържание – текст, аватари и икони. Използването на реалистична информация в мокъпите е препоръчителна и много добра практика особено при презентация пред клиенти, тъй като им помага да получат много по-ясна представа как ще изглежда готовия продукт. Освен това предава усещането за завършен дизайн, за сметка на използването на еднакъв dummy текст като Lorem ipsum, който често кара дизайна да изглежда като темплейт и създава усещане за незавършена работа.
2.1 Content reel – text
Content Reel позволява лесно и бързо да добавяме текстова информация като имена на хора, имейли, имена на компании, контакти, адреси и тн, селектирайки едно или няколко текстови полета наведнъж.Тази функция спестява време при работа с множество текстови полета.
Достатъчно е да селектираме едно поле, след това да зададем Select all matching layers команда на Figma, да отворим плъгина, да изберем типа текстово съдържание и Content Reel автоматично ще запълни селектираните полета. Ако имаме нужда от дълъг dummy текст, аз използвам Chat GPT.
2.2 Content reel – avatars
Друга често използвана от мен функция е добавянето на аватари – особено полезно при създаването на потребителски профили или списъци с потребители. Отново имаме възможност да селектираме както един placeholder така и няколко наведнъж.
3. Iconify
Iconify е безплатен open-source плъгин за Figma, който съдържа над 200 000 векторни икони, събрани в над 150 библиотеки. Iconify ни позволява да изберем икони с лиценз, който разрешава лична употреба, или такъв за комерсиална употреба. За разлика от други плъгини, които изискват плащане за използване на SVG, Iconify винаги импортира иконите в този формат. SVG е векторен формат, който ни гарантира, че иконите ще запазят еднакво добро качество при преоразмеряване и няма да се пикселизират.
3.1 Iconify – избиране на икони
След като изберем иконата имаме разширени настройки, които ни позволяват да изберем размер, да заключим съотношението на размера на страните (aspect ratio), да променим цвета на иконата, както и да я импортираме като компонент или като frame.
Друг плюс на Iconify е, че запомня последната страница, от която сме добавили икона, като по този начин ни улеснява при навигирането обратно до същата страница.
3.2 Iconify – персонализация на цветовете
Iconify ни позволява да импортираме икона като преди това изберем необходимия ни цвят. Цветовете, които използва плъгина са онези, които сме задали като променливи и стилове.
4. Unsplash
Unsplash е инструмент за дизайнери, които искат бързо и лесно да добавят висококачествени изображения към проектите си, без да напускат Figma.Unsplash дава достъп до милиони безплатни изображения, които са подходящи както за лична, така и за комерсиална употреба.
Плъгина има и premium версия, Unsplash Plus, която отключва допълнителни библиотеки.
След като го инсталираме от Figma Community Tab, можем да търсим изображения по ключови думи или по категории, както и да задаваме предпочитанията си за ориентация и лиценз.
Плъгинът спестява време като свежда добавянето на изображение до един клик.Друг плюс е, че можем да добавим изображения както във frames с геометрични форми като правоъгълник или квадрат, така и в такива с неправилна форма.
Изображенията се появяват като Fill на избрания frame и това ни позволява да използваме и вградените настройки за редактиране на изображения на Figma.
5. Material Theme Builder
Material Theme Builder е плъгин за Figma, който ни помага като създава за нас персонализирани теми, базирани на Material Design 3. Плъгина генерира за секунди цветова палитра, изградена от променливи (variables) и семантични токени с всички необходими цветове и техните подтонове, които биха били напълно достатъчни за разработването на даден дизайн. Палитрата включва primary, secondary, tertiary, error, neutrals и system colors за светла и тъмна тема и отговаря на WCAG стандартите за уеб достъпност. Освен цветовата схема, Material Theme Builder генерира и типография с всички необходими стилове.
Единственото, което трябва да направим е да зададем source цвят и плъгина ще генерира цялата палитра за светла и тъмна тема. Source цвета може да бъде избран от color picker или от изображение по избор, което дава възможност за персонализация на темата.
Заключение
Плъгините са изключително мощни инструменти, които ни помагат да оптимизираме работата и да пестим време и усилия. За всеки проблем има плъгин и именно това може да бъде объркващо и прави избора труден.
Всеки дизайнер има различни нужди и навици на работа, а инструментите са там, за да ни помагат, затова е важно да изберем подходящите за нас.
