Създайте адаптивно табло за управление с Figma

Figma е графичен инструмент за UI дизайнери. Той има прост интерфейс и ви позволява да си сътрудничите в работата с вашите съотборници. Ако искате да работите офлайн, можете да изберете да използвате настолното приложение. Като алтернатива, Figma работи на всяка операционна система (здравей, Windows), така че не е нужно да инсталирате нищо. И да започнете е лесно – можете да импортирате вашите предишни дизайни на оформление от Sketch.

• Изберете конструктор на уебсайтове: 16 топ инструмента

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

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

01. Регистрирай се

На първо място, трябва да се регистрирате в www.figma.com. Решете дали искате да използвате инструмента във вашия браузър или да изтеглите настолното приложение. За да изтеглите версията за настолен компютър, отидете в менюто за хамбургери в горния ляв ъгъл и щракнете върху „Вземете приложение за настолен компютър“ .

02. Създайте артборд и мрежа

Хит А за създаване на артборд. Можете да изберете една от предварително зададените настройки или да създадете свой собствен персонализиран размер. За този проект ще използваме Phone > iPhone 7 (375x667px). За да създадете мрежа, първо изберете артборда. След това в дясната странична лента намерете „Решетка на оформлението“ и натиснете „+“. Настройте брой колони: 6, улей: 16, полета: 8 и тип: Stretch.

03. Начертайте правоъгълник за фон

Да започнем с фона. Натиснете Р за да изведете инструмента Rectangle и да нарисувате правоъгълник #5F98FA без граници. Задайте размерите на 375x363, като използвате панела със свойства от дясната страна.

04. Добавете лента на състоянието

След това искаме да поставим лента на състоянието в горната част на екрана. Натиснете Р за задаване на ширина: 375, височина: 64, позиция (x: 0; y: 0). За нашата навигационна лента нека зададем градиентното запълване, като използваме панела за инспектор на свойства вдясно. Намерете опцията „Попълване“, натиснете визуализацията на цвета и изберете „Линеен“ от падащото меню. Цветът отгоре трябва да бъде #77A6F7, а отдолу #5A93F5 (непрозрачност 100 процента и за двете).

05. Импортирайте лента на състоянието на iOS

За съжаление, Figma не включва iOS UI елементи по подразбиране. Въпреки това има файл, наречен „Примерен файл“, който е дизайн на приложение за iOS, така че можем да заимстваме лентата на състоянието от него. Копирайте опцията за светлинна лента на състоянието, поставете я в текущия файл и я поставете на (x: 0; y: 0). Използване на инструмента за текст (T), щракнете върху таблото си, за да добавите заглавка към лентата за навигация. Избрах Avenir Heavy, 15px, #FFFFFF. Подравнете заглавието по хоризонтален център, y: 33.

06. Създайте икона за гръб

Отляво на лентата за навигация трябва да има икона „назад“. Ще създам това от нулата. Създайте правоъгълник 14x14px, добавете завъртане на 45 градуса, x: 14; y: 43. Дублирайте този правоъгълник и го поставете на x: 18; y: 43. Изберете двата правоъгълника и под горното меню отидете на Булеви групи > Изваждане на избора. След това се върнете в Булеви групи > Изравняване на селекцията или натиснете cmd+E.

07. Завършете иконата със стрелка

Нашата икона със стрелка е почти готова. Сега просто трябва да зададем ширината и височината на числови стойности – в моя случай width: 12px; височина: 20px. Последната стъпка е да зададете цвета на запълване на #FFFFFF.

08. Създайте графика

Сега ще създадем графика. Първо, ще въведем някои насоки. Изберете инструмента за правоъгълник (Р) и задайте x: 24 y: 147; ширина: 1; височина: 166; цвят на запълване #B3DCFF и непрозрачност 20%.

Дублирайте този правоъгълник четири пъти с полета от 80px. В долната част на всяка насока трябва да добавим етикет за дата, като използваме текстови слоеве („2 февруари“, „9 февруари“, „16 февруари“, „23 февруари“, „1 март“). Използвал съм Avenir Medium, на 11px, #C1D8FF.

09. Направете линията за данни

Използване на инструмента Pen (П) трябва да създадем вектор, който да представи линията с данни. Щракнете и плъзнете, за да създадете точка на Безие. Тази форма трябва да има щрих от 4 пиксела и без запълване, #FFFFFF.

Нека добавим падаща сянка, за да помогнем на линията да се открои: щракнете върху „+“ в секцията „Ефекти“ и изберете „Падаща сянка“. Използвайте следните настройки, за да направите гладка и елегантна сянка: размазване: 3px, y: 7px, #2951FF, непрозрачност: 100%.

10. Добавете подробности към графиката

В точките, където насоките се пресичат с линията за данни, ще добавим кръгове. Този път ще използваме инструмента Ellipse (О), които ще намерите в падащото меню, придружаващо инструмента Rectangle. Начертайте кръгове 8x8px на всяка пресечка и задайте цвета на запълване на #5F98FA. Трябва да добавим щрих: щракнете върху бутона „+“ до секцията с щрихи, задайте тегло: 2px и подравнете: Център.

11. Последни щрихи

За да завършим секцията с графиката, просто трябва да добавим стойности към нашите пресечни точки. С инструмента Текст (T) изберете Avenir Black, 11px, #1F4991.

12. Три информативни карета

Под линейната графика ще създадем три клетки, които показват повече информация. Използване на инструмента за текст (T) нека създадем нашето първо заглавие: „Прогнозна стойност на вашите акции“: x: 16; y: 391, Avenir Medium, 15px, #5D7EB6. Отдясно на клетката поставете стойността '$1,115', стил на текста: Avenir Heavy, 22px, #5F98FA, подравняване на текста: ляво, x: 287; y: 387.

13. Изработка на разделител

Начертайте правоъгълник с височина 1px и обхваща цялата ширина на екрана (#F5F5F5; x: 0; y: 435) – това ще действа като разделител между клетките. Изберете заглавие, стойност и разделител и създайте група (cmd+G).

14. Добавяне на заглавия

Дублирайте тази група, така че да имате три групи с 24px вертикално разстояние между тях. Променете второто заглавие на „Общ брой членове“, а заглавието на третата група на „Регистрирани приятели“ и актуализирайте съответните стойности.

15. Начертайте и подравнете друг правоъгълник

Сега ще добавим призив за действие. Начертайте правоъгълник под последната клетка, ширина: 195; височина: 44, разстояние по оста Y от последния разделител 21px.

С помощта на инструментите за подравняване подредете правоъгълника по хоризонтален център. След това задайте цвят на запълване на #5F98FA и кръглост на 22 (ще намерите това поле след „Завъртане“ в панела със свойства). След това добавете ефект на падаща сянка (цвят: #ABDAFF; непрозрачност: 100%; y: 5; размазване: 11).

16. Поставете малко текст върху бутона

Добавете текст към бутона с помощта на инструмента за текст (T): 'Вземете повече споделяния!' Задайте това в Avenir Black, 15px, #FFFFFF. Подравнете текста по центъра на бутона. Накрая групирайте всички елементи заедно и ги наименувайте правилно.

17. Направете го отзивчив

Сега ще коригираме нашето оформление, така че да отговаря на различни iPhone (320x568, 375x667 и 414x736). За да направим това, трябва да използваме ограничения, които ще намерите в менюто Свойства вдясно.

18. Правилно оформление

Ако изберете „Наляво“ или „Надясно“ в хоризонталното падащо меню, групата ще се закачи към избраната от вас страна на екрана и няма да се разтяга. Ако изберете „Център“, групата или слоят ще се разтегне, така че да запълни ширината на екрана. Трябва да накараме лентата на състоянието да плава на мястото си, така че искаме опцията „Right&left“ (или задръжте „cmd“ и щракнете върху лявата и дясната лента на диаграмата).

19. Тествайте го

Нека опитаме това. С избраната лента на състоянието натиснете опцията „Надясно и наляво“. Изберете артборд и вместо iPhone 7 изберете iPhone 7 Plus. Работи правилно, дори ако изберете размера на iPhone SE.

20. Проверете всеки слой

Нека разгледаме останалите слоеве. За фона на лентата за навигация искаме да използваме „Дясно+Наляво“. За заглавие на лентата за навигация: „Център“. За иконата със стрелка назад е най-добре да използвате опцията „Наляво“ – по този начин стрелката ще бъде закачена в лявата част на екрана.

21. Задайте линейната графика

Сега нека настроим линейната графика. За насоките, датите и пресечните кръгове искаме да използваме „Център“. За линията за данни и фона ще използваме „Right&Left“. В секцията с допълнителни данни искаме да използваме „Left“ за всяко заглавие, „Right“ за всяка стойност и „Right&Left“ за разделителните линии. За групата бутони CTA нека зададем „Център“.

22. Задайте вертикални ограничения

Последната стъпка е да зададете вертикалните ограничения. Лентата на състоянието, лентата за навигация, линията с данни и кръговете на пресичане и свързаните заглавия трябва да бъдат зададени на „Най-горе“. Фонът на графиката, датите и насоките трябва да бъдат зададени на „Център“. Всяка група от допълнителни данни трябва да бъде настроена на вертикален „Център“, а групата бутони с CTA трябва да бъде настроена на „Долу“.

23. Накарайте го да работи за всеки размер на екрана

Нека дублираме артборда два пъти и зададем единия на размера на iPhone 7 Plus, а другия на размера на iPhone SE. Във версията Plus ще трябва да намалите празнината между последната клетка с допълнителна информация и бутона CTA, като изберете групата клетки и увеличите нейната височина от 195 на 225. Във версията SE ще видите, че информационните клетки препълват бутона CTA, така че трябва да изберем групата клетки и да намалим височината й до 150.

24. Готово!

Ей честито! Завършихме целия екран на приложението във Figma. Засега просто проверете дали всичко е направено и можете да се отпуснете и да се почувствате като експерт.

Тази статия първоначално беше представена в нетно списание брой 288; купете го тук.

Свързани статии:

• Новата концепция на Behance изглежда като убийствено приложение
• Проектиране за социално въздействие
• 8 съвета за опитни интервюта за работни места в областта на технологиите