Дизайн на материали + Фигма стилове =

Направих UI комплект, за да започнете

Илюстрация, направена за Фигма от Питър Барнаба

Често когато мислим за дизайнерски системи, се сещаме за строго контролирана колекция от компоненти, модели и указания, за да гарантираме последователност в целия продукт. В контекста на един продукт или марка това има много смисъл, но какво да кажем за система за дизайн на платформа, която ще бъде възприета от много различни марки / продукти?

Изтеглете този UI комплект за дизайн на материали за Figma тук.

Материалната система на Google е изправена пред това предизвикателство от самото си създаване. Приемането му гарантира далеч по-последователно изживяване както в Google, така и в родните Android приложения. Това каза, въпреки че тези преживявания превъзхождат използваемостта, те са по-малко успешни в превръщането в запомнящи се разширения на марката. Има недостатъци, когато всички използват един и същ набор от компоненти.

Тематичните възможности в материалния дизайн. Източник: Material.io

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

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

Въведете Фигма стилове

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

Страница за конфигуриране за персонализиране на темата за материали.

Ето един поглед в това, което е възможно

Имах щастието да получа ранен достъп до Figma Styles и се вълнувах от възможностите за използването им за Material Design. Така че създадох комплект за интерфейс на материалите, използвайки стилове, за да улесним изграждането на приложения за материали. Въпреки че това не е официален комплект или партньорство, мисля, че това показва колко добре работят тези неща заедно.

Цветове на материалите - използвах стил на запълване за всички основни и вторични цветове на приложението, всички нива на ударение за типография и редица образи за цветове на повърхността. Промяната на темата да съответства на цветовете на вашата марка е толкова лесно, колкото да изберете нови цветове. В документа включих и страница за достъп до палитрата Материали на склад. Освен това можете да използвате новия цветен инструмент на Google като отправна точка.

Осъществяване на глобалните промени в цвета да повлияят на няколко компонента наведнъж.

Тип на материала - създадох текстови стилове за всички стилове, посочени в спецификацията Material Design. По подразбиране те са зададени на Roboto, но могат лесно да бъдат предефинирани, за да използвате шрифта на вашата марка. Промяната на стил в различен шрифт незабавно ще разпространява промените в цялата система. Имайте предвид, че може да се наложи да направите някои корекции на размера и разстоянието, за да прецизирате размерите в цялата система. Тъй като комплектът се развива, смятам да включа някои препоръки за предварително определен размер, които работят за някои от най-популярните шрифтове в Google.

Някои от стиловете, определени в комплекта.

Material Elevation - Създадох библиотека от предварително зададени стилове на сенки за всички възвишения. Промяната на котата на елемента е толкова лесно, колкото и избора на подходяща кота - това значително опростява процеса на прилагане на Материални сенки, които понякога са сложни комбинации от до три различни сенки.

Material Grid - Материалът се основава на 4dp базова линия, така че създадох и стил за това. Можете да приложите това към всеки кадър или компонент и, разбира се, можете да добавите свои собствени решетки за десктоп, мобилни устройства и таблети и да ги приложите според нуждите.

Комбиниране на стилове с компоненти

Material Design насърчава дизайнерите да контролират формите на UI компоненти, за да отразяват по-добре личността на марката. Те дават на потребителите възможност да персонализират ъглите на повърхността, вариращи от остри правоъгълни ъгли, до изрязване на 45 градуса, до различни нива на закръгленост.

Използване на вложени компоненти за извършване на глобализирани промени във формите на картите и бутоните.

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

След това тази промяна се отразява в цялата система (забележете: в някои случаи това ще отнеме няколко секунди, докато промяната се разпространи през стотици компоненти). Тъй като можете да получите достъп до вложени слоеве във всеки компонент на компонента, ако има конкретни места, където искате да промените стила, можете да направите тази промяна като отмяна във всеки случай.

Дизайнът на материалите също ви дава възможност да променяте между 5 различни стила на иконите. За да поддържаме теглото на комплекта, създадохме 5 отделни листа стикер документи за всеки стил на иконата, допълнени с компоненти за всяка икона. Можете да копирате желаните икони от тези файлове или още по-добре, да ги публикувате като споделена библиотека на вашия екип и да ги изтеглите във вашите проекти.

Интересувате ли да опитате Figma Styles?

Ако искате да изпробвате бета Figma Styles, регистрирайте се тук (EDIT: Figma Styles вече е достъпен за всеки, който може да използва. Просто се регистрирайте за Figma). Потребителите на бета версия ще получат достъп до комплекта Material UI и съпътстващите библиотеки с икони.

Ако все пак трябва да поддържате предишната итерация на Material Design, ще ви покрием с друг напълно размит UI комплект, който е създаден да използва силата на стиловете. Потребителите на бета версия също ще имат достъп до този комплект.

Не сте опитвали Фигма преди? Виж това.