Как да направите актив с възможност за превъртане във Figma

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

Тази статия ще обясни как да направите дизайните на Figma да могат да се превъртат.

Поставяне на превъртащ се текст във фигура

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

Ето как се прави:

1. Създайте основна форма. За този пример препоръчваме да направите вертикален правоъгълник. Можете да направите това, като изберете инструмента за правоъгълник в лявата странична лента или използвате командата “R”. Задръжте наляво, щракнете върху точка на платно и начертайте формата.
   
2. В дясната странична лента, под раздела за дизайн, поставете отметка до опцията „съдържание на клипа“.
   
3. Изберете инструмента за текст, за да създадете текстово поле и го поставете в превъртащата се рамка. Въведете или копирайте и поставете всяко съдържание, което използвате.
   
4. Изберете рамката и отидете в раздела прототип от дясната страна на вашия интерфейс. След това изберете опцията „превъртане при преливане“ и стила, който предпочитате. Тук ще изберем „вертикално превъртане“.
   

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

• Хоризонтално превъртане – Потребителите могат да накарат текста си да се превърта отляво надясно в някои примери. Тази опция е за предпочитане, ако създавате проекти във формат за ландшафтен дизайн.
• Без превъртане – Ако искате да заключите съдържанието си на място, изберете опцията без превъртане.
• И в двете посоки – Създайте дизайн с много съдържание и превъртайте както вертикално, така и хоризонтално.

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

Как да проектирате вашите скролируеми компоненти

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

Как да промените шрифта на вашия скролируем дизайн

Първото нещо, което трябва да направите, е да промените шрифта на вашия превъртащ дизайн. Figma предлага широка гама от стилове, от които да избирате. Ето най-простият метод:

1. Изберете съдържанието във вашата скролираща рамка, което искате да промените.
   
2. Придвижете се до падащото меню горе вляво и го изберете.
   
3. Превъртете шрифтовете, докато намерите този, който искате да използвате.
   

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

Някои съображения включват:

• Идея на дизайна – Изборът на типография трябва да съответства на намерението на вашия дизайн. Ако искате да предадете ясно много информация, насочете се към по-малко декоративни, но елегантни шрифтове.
• Други компоненти – Вашият шрифт е визуален елемент като всеки друг във вашия дизайн. Трябва да съответства на рамката и другите компоненти, които включвате.
• Цялостна естетика и брандиране – Общото усещане за марката също трябва да повлияе на избрания от вас шрифт. Например услугата за доставка на цветя няма да включва същия шрифт като целевата страница на SAAS.

Въпреки че изборът на правилния шрифт може да изисква известно експериментиране, някои конкретни примери за шрифтове са най-надеждните опции:

• Roboto – Ако искате да играете на сигурно, използвайте Roboto. Смята се за универсален и неутрален шрифт с много приложения. Тъй като е толкова лесно за разбиране, мнозина избират Roboto за инструкции и целеви страници.
• Poppins – За приятелско, но модерно и изчистено излъчване изберете Poppins. Този шрифт е по-заоблен и прави текста привлекателен и лесен за четене.
• Raleway – Когато проектирате за изтънчена луксозна марка, може да помислите за Raleway. Като цяло е тънък, но има различни вариации на теглото и цялостен елегантен вид.
• Lato – приятелски настроен, надежден и сериозен са правилните думи за описание на този шрифт. Дизайнерите могат да използват Lato за заглавия и текстове на параграфи, където четливостта и яснотата са от първостепенно значение.

Също така ще искате да вземете предвид избрания от вас размер на шрифта и стил на текст. Обикновено удебеленият шрифт се използва за заглавия или подчертаване на сегменти, докато курсивът се използва за кавички.

Промяна на цвета на формата на рамката

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

Ето как можете да промените цветовете на рамката си:

1. Изберете рамката, която искате да редактирате.
   
2. Слоят ще се появи в дясната странична лента. Придвижете се до секцията „попълване“.
   
3. Изберете „+“, за да добавите запълване.
   
4. Ще се отвори прозорец за избор на цвят. Изберете цвета на запълване и градиента. Можете също така да въведете шестнадесетичен код, ако знаете точния нюанс.
   

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

ЧЗВ

Има ли текстова команда за превъртане във Figma?

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

Как да реша коя опция за преливане искам?

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

Какъв интерфейс на устройството обикновено се нуждае от превъртащ се текстов дизайн?

Добър пример биха били макети на дизайн за приложение. Потребителите могат да създадат телефон като обща рамка, докато превъртащият се текст може да бъде интерфейс на приложението.

Дали Figma е най-добрият избор за създаване на скролируем дизайн?

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

Направете вашите дизайни с възможност за превъртане и лесни за използване

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

Лесно ли ви беше да направите съдържанието си с възможност за превъртане във Figma? Какво ще кажете за избора на правилния шрифт? Уведомете ни в секцията за коментари по-долу.