Як створити прокручуваний ресурс у 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. Відкриється вікно вибору кольору. Виберіть колір заливки та градієнт. Ви також можете ввести шістнадцятковий код, якщо знаєте точний відтінок.
   

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

FAQ

Чи є у Figma команда прокручування тексту?

На жаль, у Figma немає команди, щоб зробити текст прокручуваним. Однак ви можете завершити процес лише кількома клацаннями миші, використовуючи вищезгаданий метод.

Як визначити, який варіант переповнення я хочу?

Це залежить від типу тексту, який ви використовуєте, загального дизайну та його функції. Вертикальний стиль зазвичай підходить для перегляду великих текстів.

Який інтерфейс пристрою зазвичай потребуватиме прокручуваного текстового дизайну?

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

Чи є Figma найкращим вибором для створення прокручуваних дизайнів?

Figma є одним із найкращих інструментів для створення широкого діапазону форм, у тому числі прокручуваних дизайнів. А ще краще, Figma безкоштовна. Однак у вас можуть бути певні особисті переваги. Спробуйте поекспериментувати з кількома платформами, наприклад Adobe Illustrator, доки не знайдете інструмент, який найкраще підходить для вас.

Зробіть ваш дизайн зручним для прокручування

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

Чи легко вам було зробити свій вміст прокручуваним у Figma? Як щодо вибору правильного шрифту? Повідомте нам у розділі коментарів нижче.