Лайфхак, Новини, Розробникам, Технології

10 прихованих можливостей графічного редактора Figma

28 Вересня, 2021

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

Порада 1: Як швидко створити квадроколо

Квадроколо – особлива форма значка, яка стає все більш популярною в UI-дизайні. Часто використовується в додатках iOS.

У Figma створити такий елемент просто.

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

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

Порада 2: Використовувати ім’я кольору замість HEX

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

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

Ім’я можна придумати будь-яке, наскільки вистачає фантазії. Не можна сказати щоб ця функція мала практичну користь, але вона точно додасть задоволення від використання програми.

Порада 3: Як швидко перейменувати фрейм

Як правило, для зміни імені фреймів використовують гарячі клавіші CTRL + R (для Windows) і CMD + R (для iOS). Насправді досить двічі клацнути на поточне ім’я фрейма на полотні, і воно буде доступне для редагування.

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

Порада 4: Як відрегулювати розмір текстового шару відповідно до вмісту

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

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

Порада 5: Як обійти обмеження при зміні розміру рамки

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

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

Щоб обійти це автоматичне налаштування, необхідно перетягувати край фрейма, утримуючи клавішу CTRL (для Windows) або CMD (для iOS). Завдяки цьому обмеження будуть ігноруватися. Зміна ширини або висоти фрейма ніяк не відіб’ється на елементах всередині.

Порада 6: Попередній перегляд елементів в режимі контурів

Режим контурів (outline) корисний, якщо потрібно переконатися, що структура компонента або фрейма виконана правильно.

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

Натисніть клавіші CTRL + Y (для Windows) або CMD + Y (для iOS), щоб активувати режим контурів. Натисніть ярлик ще раз, щоб вимкнути його.

Порада 7: Як копіювати і вставляти ефекти

Щоб скопіювати ефект або стиль в Figma, клацніть край рядка з параметром. Після цього скопіюйте за допомогою клавіш CTRL + С (для Windows) або CMD + С (для iOS), потім виберіть цільовий шар і натисніть CTRL + V (для Windows) або CMD + V (для iOS).

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

Така функція істотно заощаджує час.

Порада 8: Як групувати за допомогою фрейму

Використовуйте комбінацію клавіш CTRL + ALT + G (для Windows) або CMD + OPTION + G (для iOS) щоб об’єднати елементи всередині фрейму, а не тільки стандартну групу.

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

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

Порада 9: Як замінювати компоненти функцією стрілок

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

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

Порада 10: Як налаштувати перемикання між варіантами

Зазвичай варіанти компонентів відображаються у вигляді списків, що розкриваються. Щоб спростити роботу з варіантами з двох опцій, можна створити формат перемикача. Для цього один варіант назвіть «Так», «Правильно» або «Вкл.», А інший – «Ні», «Брехня» або «Викл.». Перемикач з’явиться автоматично.

10 прихованих можливостей графічного редактора Figma - tech, developers, news, lajfhak

Фото в тексті: Thalion

Додаткова порада: як переміщати компоненти між документами

До серпня 2021 року в Figma не було простого способу перенести компоненти в іншу бібліотеку. Для цього необхідно було відтворювати їх.

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

Підпишіться на e-mail розсилку Українського Спектру

«Український Спектр» в Telegram – коротко про головне один раз на день
Підписатись на канал

Ми у соціальних мережах:

Ми у соцмережах:

Слідкуйте за UAspectr у Facebook або ж читайте усе найцікавіше у нашому каналі в Telegram
Menu