Створіть відповідну інформаційну панель з фігурою

Jan 31, 2026

Як

Фігма - це графічний інструмент для дизайнерів UI. Він має простий інтерфейс і дає змогу співпрацювати над роботою з вашими товаришами по команді. Якщо ви хочете працювати в автономному режимі, ви можете скористатися використанням настільного додатка. Крім того, фігМА працює на будь-якій операційній системі (Hello, Windows), тому вам не доведеться нічого не встановлювати. І почати роботу легко - ви можете імпортувати попередні конструкції макета з ескізу.

Виберіть веб-сайт Builder: 16 Top Tools

У фігурі ви можете створити все, що потрібно для вашого інтерфейсу, з ілюстрованих векторних значків до спеціальних макетів. Багатокористувацьке редагування може заощадити багато часу для дизайнерських команд, оскільки це означає, що всі члени команди можуть одночасно працювати на тому ж макеті. І це навіть не всі його великі особливості.

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

01. Зареєструватися

Перш за все, вам потрібно зареєструватися www.figma.com . Вирішіть, чи потрібно використовувати інструмент у вашому браузері або завантажте додатку для робочого столу. Щоб завантажити версію настільної ПК, перейдіть до меню гамбургера у верхньому лівому куті та натисніть кнопку "Отримати настільний додаток".

02. Створіть кволотку та сітку

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Додайте базову сітку, щоб допомогти вам розташувати елементи гармонійно (натисніть на зображення, щоб збільшити)

Ударити А створити монтажну дошку. Ви можете вибрати один з пресетів або створити свій власний розмір. Для цього проекту ми будемо використовувати телефон & GT; iPhone 7 (375x667PX). Щоб створити сітку, спочатку виберіть монтування. Потім на правій бічній панелі знайдіть "макет Grid" і натисніть "+". Налаштуйте кількість колон: 6, жолоб: 16, поля: 8 і тип: Stretch.

03. Намалюйте прямокутник для фону

Почнемо з фону. Прес Г Щоб відкрити інструмент прямокутника та намалювати прямокутник # 5F98FA без кордонів. Встановіть розміри до 375x363 за допомогою панелі властивостей у правій стороні.

04. Додайте панель стану

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Встановіть градієнт для рядка стану за допомогою панелі «Властивості» справа на екрані. Тут ви можете налаштувати параметри кольору, щоб створити лінійний градієнт (натисніть на зображення, щоб збільшити)

Далі ми хочемо розмістити рядок стану у верхній частині екрана. Прес Г Щоб встановити ширину: 375, висота: 64, позиція (x: 0; y: 0). Для нашої навігаційної панелі давайте встановимо градієнт заповнення за допомогою панелі інспектора нерухомості справа. Знайдіть варіант "заповнення", натисніть на попередній перегляд кольорів та виберіть "Лінійний" у спадному меню. Колір у верхній частині повинен бути # 77A6F7, а внизу # 5A93F5 (непрозорість 100 відсотків для обох).

05. Імпортуйте панель стану IOS

На жаль, фігМА не включає елементи iOS за замовчуванням. Однак існує файл, який називається "зразковий файл", який є дизайном iOS, тому ми можемо запозичити рядок стану з цього. Скопіюйте параметр Status Status, вставте його в поточний файл і розмістіть його (x: 0; y: 0). Використовуючи текстовий інструмент ( Т ), натисніть на свою монтажну дошку, щоб додати заголовок до панелі навігації. Я пішов на Avenir Heavy, 15px, #ffffff. Вирівняйте заголовок горизонтальним центром, Y: 33.

06. Створіть задню іконку

Зліва від навігаційної панелі повинна бути значок "назад". Я збираюся створити це з нуля. Створіть прямокутник 14x14PX, додайте обертання 45 градусів, X: 14; Y: 43. Дублюйте цей прямокутник і покладіть його при X: 18; Y: 43. Виберіть обидва прямокутники, так і під головним меню перейти до булевих груп & GT; Відняти вибір. Після цього поверніться до булевих груп & GT; Вирівнювання, або натисніть cmd + e .

07. Завершіть значок зі стрілкою

Наша значок стрілки майже виконується. Тепер нам просто потрібно встановити ширину та висоту до числових значень - у моєму випадку шириною: 12px; Висота: 20px. Останній крок - встановити колір заповнення до #FFFFFFF.

08. Створіть графік

Тепер ми збираємося створити графік. По-перше, ми будемо покласти в деякі керівні принципи. Виберіть інструмент прямокутника ( Г ) і встановити X: 24 Y: 147; Ширина: 1; Висота: 166; Заповніть колір # b3dcff і непрозорість 20%.

Дублюйте цей прямокутник чотири рази 80px поля. У нижній частині кожного керівництва, нам потрібно додати етикетку дати за допомогою текстових шарів ("лютий 2", "лютий 9", "лютий 16", 23 лютого "," MAR 1 '). Я використовував Avenir Medium, на 11px, # C1D8FF.

09. Зробіть лінію даних

Використання інструменту для пера ( Р ) Нам потрібно створити вектор, щоб представити лінію даних. Натисніть і перетягніть, щоб створити точку bézier. Ця форма повинна мати 4PX інсульт і не заповнити, #FFFFFF.

Давайте додати тінь для падіння, щоб допомогти виділити лінію: натисніть кнопку "+" на розділ ефектів та виберіть "Тінь". Використовуйте наступні налаштування, щоб зробити гладку та елегантну тінь: blur: 3px, y: 7px, # 2951FF, непрозорість: 100%.

10. Додайте деталь на графік

Use the Text tool to add values to the places the guidelines intersect with the data line — Використовуйте текстовий інструмент для додавання значень до місць, які перетинаються з лінією даних

У пунктах, де керівні принципи перетинаються з лінією даних, ми збираємося додавати кола. На цей раз ми будемо використовувати інструмент еліпса ( O ), який ви знайдете у спадному меню, що супроводжує інструмент прямокутника. Намалюйте кола 8x8PX на кожному перехресті, і встановіть колір заповнення на # 5F98FA. Нам потрібно додати інсульт: натисніть кнопку "+" поруч із розділом інсульту, встановіть вагу: 2 пік та вирівнювання: Центр.

11. Остаточні дотики

Щоб завершити графічний розділ, нам просто потрібно додавати значення до наших точок перехрестя. З текстовим інструментом ( Т ) Виберіть Avenir Black, 11PX, # 1F4991.

12. Три інформаційні коробки

Нижче графік Line ми збираємося створювати три клітини, які відображають більше інформації. Використовуючи текстовий інструмент ( Т ) Давайте створимо нашу першу заголовку: "Орієнтовна вартість ваших акцій": 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. Додавання заголовків

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Під графіком буде три клітини, що показують ключові дані (натисніть на зображення, щоб збільшити)

Дублюйте цю групу, щоб у вас є три групи з вертикальною відстані між ними 24px. Зміна другого заголовка до "Всього членів" та третьої групи заголовок до "Друзі підписалися" та оновлюйте відповідні значення.

15. Намалюйте та вирівняти інший прямокутник

Тепер ми збираємося додати дзвінок до дії. Намалюйте прямокутник під останньою клітиною, шириною: 195; Висота: 44, Y-ось відстань від останнього сепаратора 21px.

Використовуючи інструменти вирівнювання, складіть прямокутник горизонтальним центром. Потім встановіть колір заповнення на # 5f98fa та округлість до 22 (ви знайдете це поле після "обертання" на панелі «Властивості). Після цього додайте ефект тіну (колір: #abdaff; непрозорість: 100%; y: 5; blur: 11).

16. Покладіть текст на кнопку

Додайте текст до кнопки за допомогою текстового інструменту ( Т ): "Отримайте більше акцій!" Встановіть це в Avenir Black, 15px, #FFFFFF. Вирівняйте текст центром кнопки. Нарешті, група всіх елементів разом і назвати їх належним чином.

17. Зробіть його чутливим

Тепер ми збираємося відрегулювати наш макет, щоб він реагувати на різні iPhones (320x568, 375x667 та 414x736). Для цього ми повинні використовувати обмеження, які ви знайдете в меню властивостей справа.

18. Отримання макета прямо

Якщо ви виберете "LEFT" або "Право" на горизонтальному випадок, група буде натиснути на вибрану сторону екрана, і не буде розтягуватися. Якщо ви вибираєте "Центр", група або шар буде розтягуватися, тому він заповнює ширину екрана. Нам потрібно зробити стану плавати на місці, тому ми хочемо "праворуч & amp;", щоб залишитися "(або утримуйте" cmd "та натисніть ліву та правову панель на діаграмі).

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

Давайте спробуємо це. За допомогою вибраної панелі стану натисніть кнопку "Праворуч & amp; left". Виберіть аргулювач і, замість iPhone 7, виберіть iPhone 7 Plus. Він працює належним чином, навіть якщо ви виберете розмір iPhone SE.

20. Перевірте кожен шар

Давайте розглянемо решту шарів. Для фон навігації, ми хочемо використовувати "праворуч + ліворуч". Для навігаційної смуги титул: "Центр". Для значок "Стрілка", найкраще використовувати параметр "Left" - таким чином, стрілка буде прикріплена до лівої сторони екрана.

21. Встановіть графік лінії

Тепер давайте встановимо графік лінії. Для керівних принципів, дати та перехрестя, ми хочемо використовувати "Центр". Для лінії та фону даних ми будемо використовувати "Праворуч & amp; ліворуч". У додаткових розділах даних ми хочемо використовувати "ліворуч" для кожного заголовка, "право" для кожного значення, а "праворуч & amp; ліворуч" для ліній сепаратора. Для групи кнопки CTA давайте встановимо "центр".

22. Встановіть вертикальні обмеження

Останній крок - встановити вертикальні обмеження. Бар, панель навігації, лінії даних та перехрестя та пов'язані з ними назви повинні бути встановлені на "Top". Фон графі, дати та керівних принципів слід встановити до "Центру". Кожна група додаткових даних повинна бути встановлена на вертикальний "центр", а група кнопки CTA повинна бути встановлена на "нижню".

23. Зробіть роботу для кожного розміру екрана

Давайте два рази дублюємо монтажну дошку, і встановити один до розміру iPhone 7 плюс, а інший до розміру на iPhone SE. У версії Plus, вам доведеться зменшити розрив між останньою клітиною додаткової інформації та кнопкою CTA, вибравши групу клітин та збільшуючи висоту від 195 до 225. На версії SE ви побачите, що інформаційні клітинки переповнюються Кнопка CTA, тому ми повинні вибрати групу клітин і зменшити його висоту до 150.

24. Все зроблено!

Гей, Вітаємо! Ми закінчили весь екран програми у фігМА. Наразі просто перевірити все зроблено, і ви можете сидіти і відчувати себе як експерт.

Ця стаття була спочатку представлена чистий журнал випуск 288; Купуйте його тут.

Пов'язані статті:

Нове концепція принципу виглядає як програма вбивця
Проектування соціального впливу
8 порад до інтерв'ю Ace Tech Jobs