Як відкрити панель шарів фігма

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

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

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

Панель інструментів знаходиться ліворуч від робочої області Figma. Вона містить різні інструменти та функції, які ви можете використовувати для створення та редагування свого проекту. Саме тут ви знайдете панель шарів.

Відкриття панелі шарів у Figma: вичерпне керівництво

Для відкриття панелі шарів у Figma:

1. Відкрийте проект у Figma, у якому ви хочете працювати.
2. У правому нижньому кутку екрана ви побачите іконку із зображенням шару. Натисніть на неї.
3. Панель шарів з'явиться праворуч від екрана.

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

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

Якщо ви бажаєте групувати шари, виберіть кілька шарів, потім клацніть правою кнопкою миші та виберіть опцію "Згрупувати".Ви також можете створити багаторівневі групи, щоб організувати свій дизайн більш детально.

Важливо, що панель шарів дозволяє вам також налаштовувати властивості шарів, такі як прозорість, колір і розмір.

Інструменти панелі шарів у Figma забезпечують потужні можливості для керування вашим дизайном.

Запуск Figma та створення нового проекту

Для того, щоб відкрити панель шарів у Figma, спочатку необхідно запустити саму програму.

Після запуску програми Figma необхідно створити новий проект.

1. На головній сторінці Figma натисніть кнопку "Створити новий файл".
2. Виберіть тип проекту, який вам потрібний. Наприклад, "Дизайн інтерфейсу" або "Прототип".
3. Виберіть встановлені шаблони або почніть із порожнього полотна.
4. Вкажіть назву проекту та його опис, якщо потрібно.
5. Натисніть кнопку "Створити", щоб створити новий проект.

Тепер ви знаходитесь у створеному проекті та готові почати роботу з панеллю шарів у Figma.

Вивчення інтерфейсу Figma та його основних компонентів

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

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

Робота з панелями інструментів та налаштуваннями

У Figma є кілька панелей інструментів та налаштувань, які допомагають керувати проектом та працювати з елементами дизайну. Ось основні з них:

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

Щоб відкрити потрібну панель, потрібно вибрати пункт меню у верхній панелі.Однак, важливо пам'ятати, що деякі панелі відображаються лише за наявності вибраного елемента на полотні.

Відкриття панелі шарів та керування шарами у Figma

Отже, ось покрокова інструкція:

1. Відкрийте Figma та завантажте свій проект.
2. На верхній панелі виберіть вкладку "Шари".
3. Панель шарів відобразиться ліворуч від полотна.

Тепер ви можете керувати шарами за допомогою панелі шарів:

1. Додавання шару: клацніть правою кнопкою миші на порожньому місці в панелі шарів та виберіть "Додати шар".
2. Переміщення шару: перетягніть шар у потрібне місце на панелі шарів. Це також позначиться на полотні.
3. Зміна видимості шару: клацніть на вічко ліворуч від назви шару, щоб приховати або відобразити шар.
4. Зміна порядку шарів: перетягніть шар вище або нижче інших шарів на панелі шарів. Це змінить їхнє відображення на полотні.
5. Угрупування шарів: виберіть потрібні шари, клацніть правою кнопкою миші та виберіть "Групувати". Це допоможе впорядкувати шари та спростити роботу з ними.
6. Редагування шару: двічі клацніть на назві шару, щоб змінити його назву.

Таким чином, відкриття панелі шарів та управління шарами у Figma – це прості та корисні дії, які допоможуть вам організувати та покращити ваш проект.

Як повернути панель шарів у Фігма

Робота в Figma кипить, дедлайни підтискають, і тут - бац! - Зникла панель шарів. Знайомо? Не переживайте, це не кінець світла, а лише маленька технічна затримка. 🤏 У цій статті ми розберемосяяк повернути панель шарів та інші важливі елементи інтерфейсу Figmaщоб ви могли продовжити творити свої дизайнерські шедеври. ✨

Гарячі клавіші - ваші вірні помічники ⌨️

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

• Alt + 1: Вжух! панель шарівготовий продемонструвати всю ієрархію вашого дизайну.
• Alt + 2: Натисніть цю комбінацію, щоб викликати панель компонентівде зберігаються всі модулі вашого проекту.
• Alt + 8: Повернути панель дизайну так само просто, як натиснути цю комбінацію клавіш.
• Alt + 9: Працюєте над зразком? Панель прототипу повернеться на місце після натискання цих клавіш.

• Shift +/: Ця комбінація дозволяє миттєво приховати чи показати бічні панелі, щоб максимально використати простір екрану для роботи.
• Права кнопка миші на полотні > Show/Hide UI: Альтернативний спосіб керування бічними панелями через контекстне меню.

• Ctrl + \ (Windows) / ⌘ + \ (MacOS): Ці комбінації дають змогу тимчасово приховати бічні панелі, щоб ніщо не відволікало увагу від вашої роботи під час презентації.

• Shift+Enter/Enter: Швидке перемикання між батьківськими та дочірніми шарами для зручної навігації за проектом.
• Shift+R: Увімкнення/вимкнення лінійки для точного позиціонування елементів.

Якщо гарячі кнопки не допомогли 🤔

Іноді буває, що гарячі клавіші не спрацьовують.

1. Перезапустіть Figma: Найпростіший і найефективніший спосіб вирішити проблему.
2. Перевірте налаштування Figma: Переконайтеся, що в налаштуваннях програми не вимкнено гарячі клавіші та відображення необхідних панелей.
3. Поновіть Figma до останньої версії: Розробники постійно працюють над покращенням програми та виправленням помилок, тому встановлення останніх оновлень може допомогти вирішити проблему.
4. Зв'яжіться з технічною підтримкою Figma: Якщо нічого не допомагає, фахівці підтримки завжди готові допомогти вам розібратися з труднощами, що виникли.

Повертаємо сітку на місце 📏

Сітка – незамінний інструмент для створення акуратних та гармонійних макетів. Якщо вона зникла, повернути її можна так:

1. Виділіть кадр, в якому ви хочете відобразити сітку.
2. на панелі налаштувань знайдіть блок Layout Grid.
3. Натисніть на значок плюс, щоб увімкнути сітку.

Висновок 🙌

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

FAQ:

• Що робитиякщо я не пам'ятаю всі гарячі клавіші?
• Не біда! Ви завжди можете знайти повний список гарячих клавіш у довідковій системі Figma чи на офіційному сайті.
• Чи можна налаштувати власні гарячі клавіші?
• До жаль, на даний момент Figma не надає можливості настроювати власні гарячі кнопки.
• Що робитиякщо проблема не вирішується перезапуском Figma?
• Спробуйте очистити кеш браузера або перевстановити програму Figma. Якщо проблема зберігається, зверніться до технічної підтримки.
• Де я можу знайти більше інформації про роботу у Figma?
• На офіційному сайті Figma ви знайдете детальну документацію, відеоуроки і форум, де можна поставити запитання досвідченішим користувачам.

Фігма славиться своїми гарячими клавішами, і керування панелями не є винятком. ⌨️ Ось кілька комбінацій, які повернуть вам контроль над інтерфейсом:

• Alt + 1: Вуаль! ✨ Панель шарів знову перед вами.
• Alt + 2: Бажаєте сфокусуватися на компонентах? 🧩 Ця комбінація покаже або приховає панель компонентів.
• Alt + 8: Час дизайну! 🎨 Поверніть панель дизайну на місце.
• Alt + 9: Настав час вдихнути життя у ваш проект! 🚀 Панель прототипу повернеться на першу вимогу.

Запам'ятайте ці комбінації, і ви завжди керуватимете своїм робочим простором у Фігмі як справжній профі! 😎

Усі права захищені © 2015-2024.

Покроковий посібник з роботи у Figma. Урок створення мобільного додатка

Покрокове керівництво по роботі у Figma. Урок зі створення мобільного додатку

Редакція ・ Серп 1

Якщо ви дизайнер, що робить перші кроки у світі UI-дизайну і шукає відповідний інструмент, який допоможе вам створювати красиві, функціональні інтерфейси, ви не помилитеся, вибравши Figma. Я завжди говорив, що немає кращого способу вивчити інструмент дизайну, ніж просто зануритися в нього і створити щось. І вгадайте що? Саме цим ми і займемося у цій статті, я покажу, як створити в Figma простий екран мобільного додатка.

Ознайомлення з інтерфейсом Figma

Найпрекрасніше в Figma – це чистий та інтуїтивно зрозумілий інтерфейс. Я використав практично всі існуючі інструменти дизайну, і згодом інтерфейс багатьох з них почав здаватися трохи роздутим. Інтерфейс Figma щільний та компактний, і його приємно використовувати щодня. Дозвольте мені провести швидкий огляд інтерфейсу Figma.

Панель інструментів

• Move (V)
• Scale (K)
• Frame (Aабо F)
• Rectangle (R)
• Line (L)
• Arrow (Shift+L)
• Ellipse (O)
• Place Image (Shift+Ctrl+Kабо Shift+Cmd+K)
• Pen (P)
• Text (T)
• Hand (Натиснітьабо утримуйтеSPACE)

Панель шарів (Layers Panel)

У лівій частині екрана знаходиться панель шарів.

Вона дає вам легкий доступ до шарам, компонентам і сторінкам, що використовується всередині поточного файлу Figma.

Будь-які кадри, групи або об'єкти, які ви додаєте на полотно, відображатимуться на панелі шарів.

Панель компонентів (Assets Panel)

Усередині панелі компонентів у вас буде легкий доступ до всіх ваших компонентам.

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

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

Полотно (Canvas)

Тут представлені ваші проекти.

Все просто, тому рухаємось далі…

Панель властивостей (Properties Panel)

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

Вкладка «Дизайн» (Design)

Вкладка «Дизайн» дозволяє легко переглядати, додавати, видаляти або змінювати властивості елементів дизайну.

Шар, який ви в даний час обрали, визначатиме, які параметри доступні вам на вкладці «Дизайн».

Вкладка «Прототип» (Prototype)

Вкладка «Прототип» дає доступ до всіх функцій прототипування, які може запропонувати Figma, і дозволяє застосовувати переходи між кадрами, оживляючи статичні дизайни.

Вкладка «Inspect»

Вкладка «Inspect» на панелі властивостей дозволяє побачити елементи вашого дизайну в коді, в наступних форматах:

Android

Проектування екрана мобільного додатка

Зверніть увагу: перш ніж ми заглибимося в цей розділ, переконайтеся, що ви завантажили елементи дизайну, необхідні для виконання завдань у цій статті. (Там також є готовий файл, який ви можете посилатися).

Відкривши Figma, створіть новий документ, клацнувши значок плюса (+) у верхньому правому кутку екрана.

На екрані виберіть варіант iPhone 11 Pro / X та натисніть Create File.

Потім, коли кадр не вибраний, клацніть ім'я файлу на панелі інструментів і перейменуйте його на «Mobile App Screen».

Мініатюра картки

Виберіть інструмент «Прямокутник» (R), намалюйте фігуру приблизно 375px в ширину та 406px у висоту та помістіть її у верхній частині кадру. Ви також можете двічі перевірити її правильність, переконавшись, що для неї встановлено значення 0 по осях X та Y на панелі властивостей.

На панелі властивостей клацніть по іконці Independent Corners та виберіть 30 для радіусів заокруглення лівого нижнього та правого нижнього кутів прямокутника.

Тепер давайте помістимо зображення всередині нашої фігури, використовуючи дуже корисну функцію.Place Image».

Використовуючи клавіші Shift + Ctrl + K або Shift + Cmd + K, виберіть файл preview.jpg з папки Images, а потім натисніть на фігуру, щоб вставити зображення прямо в неї.

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

На панелі «Заливка» (Fill) клацніть піктограму «Плюс» (+), щоб додати нову заливку. Solid.

У спливаючому меню введіть наступне значення Hex (#): 303030 та встановіть непрозорість (opacity) на 50%.

Нарешті, давайте додамо легку тінь (drop shadow) до мініатюри та додамо глибини нашому дизайну.

На панелі «Effects» клацніть значок плюс (+), виберіть «Drop Shadow» у меню вибору, а потім налаштуйте наступні параметри ефекту.

Панель навігації (Navigation Bar)

Для панелі навігації ми вставимо пару іконок.

Відкривши папку Icons, просто перетягніть кадр наступні іконки, по одній.

Виділивши обидві іконки, перейдіть на панель «Selection Colors» та змініть Hex-значення кольору на білий (FFFFFF).

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

Потім, вибравши обидві іконки, перейдіть на панель властивостей та виберіть «Align Vertical Centers» (Alt + V).

Коли обидві іконки все ще виділені, використовуйте клавіші Ctrl + G або Cmd + G, щоб згрупувати їх, і Ctrl + R або Cmd + R, щоб перейменувати.Це просто додасть акуратний і організований вид на панелі шарів.

Завжди перейменовуйте та групуйте по ходу справи.

Тепер, утримуючи Alt, помістіть цю нову групу в 56px від верхнього краю основного кадру.

Повідомлення

Як бачите, для іконки закладки ми вибрали версію із заливкою, ніби користувач щойно додав публікацію до закладок.

Давайте додамо просте повідомлення, яке може відображатись користувачеві при натисканні на іконку закладки.Ненав'язливий візуальний сигнал, що показує, що дія (натискання на іконку) була розпізнана та виконана.

Інструментом «Прямокутник» (R) намалюйте фігуру розміром 131px x 33px, а потім закругліть кути до 24.

На панелі «Заливка» (Fill) задайте Hex-значення (#) 303030 і зменшіть його непрозорість до 60%.

На панель «Ефекти» (Effects) додамо цьому маленькому повідомленню легке розмиття фону, щоб додати візуальний інтерес і трохи більшого контрасту між зображенням та текстом, який ми скоро розмістимо в ньому.

На панелі «Ефекти» клацніть піктограму плюс (+) і в меню вибору виберіть Background Blur (Розмиття фону).

Клацніть піктограму параметрів ефекту (Effect Settings) та змініть силу розмиття (Blur Strength) на 6.

Настав час написати трохи тексту і налаштувати ще кілька властивостей, чи не так?

Використовуючи інструмент «Текст» (T), додайте новий текстовий елемент та надрукуйте слово «Bookmarked» (Додано в закладки).

Потім на панелі властивостей тексту (Text Properties) застосуйте наступне…

• Шрифт (Font) - Lato
• Вага (Weight) - Regular
• Розмір (Size) - 14
• Вирівнювання тексту (Text Align) - Center
• Вирівнювання (Align) - Middle
• Заливка (Fill) - #FFFFFF

Вибравши текст і шар фігури, використовуйте параметри вирівнювання (Alignment) у верхній частині панелі властивостей, щоб вирівняти елементи як по горизонталі, так і по вертикалі щодо один одного.

Використовуйте клавіші Ctrl + G або Cmd + G, щоб згрупувати їх, і Ctrl + R або Cmd + R, щоб перейменувати.

Потім, нарешті, використовуйте Ctrl + Click або Cmd + Click, щоб вибрати групу сповіщень та зображення, а потім скористайтеся параметрами вирівнювання, щоб вирівняти сповіщення по горизонталі та вертикалі всередині зображення.

Аватар + іконки соціальних мереж

Давайте розмістимо аватар, ім'я автора та іконки соціальних мереж на свої місця.

Виберіть інструмент Еліпс (O) і намалюйте фігуру розміром 48 x 48px. Ви також можете утримувати клавішу Shift, щоб зберегти пропорції.

Використовуючи клавіші Shift + Ctrl + K або Shift + Cmd + K, щоб використовувати інструмент «Помістити зображення» (Place Image), виберіть avatar.png із папки «Imagesі помістіть його всередині фігури.

Виділивши фігуру, перейдіть на панель властивостей та додайте наступне…

Stroke –

Drop Shadow –

Давайте додамо ще кілька текстових шарів як імені автора, так дати публікації статті .

Використовуючи інструмент «Текст» (T), створіть 2 нових текстових шари, відредагуйте текст відповідним чином, а потім застосуйте до імені автора такі властивості.

А для дати публікації використовуйте наступне…

• Шрифт (Font) - Open Sans
• Вага (Weight) - Regular
• Розмір (Size) - 12
• Вирівнювання тексту (Text Align) - Left
• Заливка (Fill) - #7D7D7D

Використовуючи клавішу Alt, розташуйте текстові шари відносно один одного, даючи їм невеликий простір.

Потім використовуйте інструменти вирівнювання, щоб вони були вирівняні з лівого краю відносно один одного, і, нарешті, згрупуйте їх (Ctrl+G або Cmd + G).

Вирівняйте цю нову групу на 16px праворуч від аватара, а потім, вибравши нову групу та аватар, натисніть Alt + V, щоб вирівняти їх по вертикалі щодо один одного.

Давайте додамо пару іконок соціальних мереж.

Як і раніше, просто перетягніть по одній іконці Instagram та Twitter у свій дизайн і, використовуючи комбінацію інструментів вирівнювання та клавіші Alt, вирівняйте їх по вертикалі щодо один одного (Alt + V) та розмістіть їх. на відстані 16px.

Згрупуйте іконки (Ctrl + G або Cmd + G) і перейменуйте (Ctrl + R або Cmd + R).

Виділивши групу іконок соціальних мереж, групу текстових шарів та аватар, використовуйте Alt + V, щоб вирівняти їх по вертикалі щодо один одного.

Згрупуйте (Ctrl + G або Cmd + G) всі ці елементи разом, а потім помістіть цю нову групу на 32px від лівого та правого краю кадру та на 32px від нижнього краю зображення.

Заголовок + контент

Давайте додамо невеликий заголовок та фрагмент контентущоб ще трохи доповнити наш дизайн .

Використовуючи інструмент «Текст» (T), створіть простий заголовок, а потім на панелі властивостей застосуйте наступне…

• Шрифт (Font) - Lato
• Вага (Weight) - Bold
• Розмір (Size) - 21
• Висота рядка (Line Height) - 32
• Вирівнювання тексту (Text Align) - Left
• Вирівнювання (Align) - Top
• Заливка (Fill) - #212121

Потім, використовуючи інструмент "Текст" (T) ще раз, створіть абзац контенту, який буде відображатися під заголовком з наступними властивостями .

• Шрифт (Font) - Open Sans
• Вага (Weight) - Regular
• Ращмер (Size) - 16
• Висота рядка (Line Height) - 28
• Вирівнювання тексту (Text Align) - Left
• Вирівнювання (Align) - Top
• Заливка (Fill) - #7D7D7D

Ми встановили колір цього блоку тексту на темно-сірий (#7D7D7D), щоб він красиво контрастував із заголовком, додавав трохи візуального інтересу, але все ще був доступний на білому тлі для користувачів із ослабленим зором.

Утримуючи клавішу Alt, наведіть курсор на два шари, щоб побачити відстань між ними, та розмістіть їх на відстані 8px один від одного.

Не забудьте згрупувати (Ctrl + G або Cmd + G) і перейменувати (Ctrl + R або Cmd + R), а потім розмістіть цю нову групу на 32px від лівого краю кадру і на 32px від нижньої частини аватара групи.

Форма коментаря

ОК. Давайте підіб'ємо підсумки і додамо в наш дизайн невелику форму / поле коментаря.

Знову викликавши інструмент «Прямокутник» (R), намалюйте фігуру розміром 263 x 40px, задайте їй радіус заокруглення кутів 24 та заливання #E4E4E4.

Вставте текстовий шар (T), змініть формулювання (наприклад, «Додати коментар…»), а потім додайте наступні властивості…

• Шрифт (Font) - Lato
• Вага (Weight) - Regular
• Розмір (Size) - 16
• Вирівнювання тексту (Text Align) - Left
• Вирівнювання (Align) - Middle
• Заливка (Fill) - #707070

Виділивши і фігуру, і текстовий шар, вирівняйте їх по вертикалі щодо один одного (Alt + V), а потім згрупуйте (Ctrl + G або Cmd + G) їх і перейменуйте (Ctrl + R або Cmd + R).

Перетягніть у свій дизайн кружок зі стрілкою вправо, а потім за допомогою інструмента Scale (K) змініть його розмір пропорційно до 40 x 40px щоб він мав ті ж розміри за висотою, що й поле, яке ми щойно створили.

Помістіть іконку на 8px праворуч від поля коментаря, а потім, вибравши групу полів та іконку, вирівняйте їх по вертикалі відносно один одного (Alt + V).

Ну, нарешті. Згрупуйте 2 елементи (поле коментаря та іконку). І помістіть цю нову групу на 32px від нижньої частини тексту, а також від лівого та правого країв кадру.

Ось і все, наш маленький екран мобільного додатка готовий.

Я вже багато разів казав: починайте проектувати, а потім ще проектуйте. Це найкращий спосіб вивчити новий інструмент та одночасно покращити свої дизайнерські навички.

Дякую, за прочитання статті.