Як у Фігмі закруглити фігуру. Магія заокруглення у Figma: від базових прийомів до тонких нюансів 🎨

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

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

Перейдіть до вибраної частини, вибравши відповідне посилання:

🔴 Базові прийоми заокруглення: від квадрата до плавних ліній

🔴 Округлення кутів квадрата: просто та ефективно

🔴 Створення кривої: свобода творчості

🔴 Згладжування кутів: додавання м'якості та витонченості

🔴 Скруглення кутів: тонка настройка

🔴 Формула успішного округлення: математика краси

🔴 Формула: A - B = C

🔴 Тонкі нюанси: від півколів до «сквірклів»

🔴 Створення півкола: класичний прийом

🔴 Сквиркли: нестандартні форми

🔴 Висновки: майстерність заокруглення у Figma

🔴 FAQ: питання, що часто ставляться

🤛🏼 Коментувати

👋 Хочете зробити ваші фігури в Figma більш плавними та елегантними? Тоді вам знадобиться знання про те, як закруглити кути!
Ось покрокова інструкція, як це зробити:
1. Створіть квадрат: Почніть із найпростішого - створіть квадрат за допомогою інструмента «Прямокутник» (Rectangle Tool).
2. Знайдіть кола: Наведіть курсор на квадрат і з боків від нього з'являться маленькі кола. Це «ручки» заокруглення.
3. Регулюйте радіус: Якщо ви хочете закруглити лише один кут, просто перетягніть відповідний гурток.Для заокруглення всіх кутів одночасно, використовуйте поле «Радіус заокруглення» (Corner Radius) на панелі керування шаром.
4. Використовуйте розумний радіус: Якщо ви хочете закруглити всі кути однаково, просто введіть значення у поле «Радіус заокруглення». Якщо потрібно зробити округлення «розумним», тобто різним для різних кутів, просто перетягніть круги округлення окремо.
Додаткові поради:
✅ Використовуйте клавіатуру: Для швидкого заокруглення кутів, можна використовувати клавіші «стрілок» на клавіатурі.
✅ Експериментуйте! Не бійтеся пробувати різні радіуси заокруглення, щоб отримати ідеальний результат.
За допомогою цих простих дій, ви можете легко закруглити кути будь-якої фігури у Figma та зробити свій дизайн більш привабливим. 🎨

Базові прийоми заокруглення: від квадрата до плавних ліній

Заокруглення кутів квадрата: просто та ефективно

Крок 1: Створюємо квадрат. Почніть із простого: створіть квадрат за допомогою інструмента «Прямокутник».

Крок 2: Наводимо курсор. Як тільки квадрат створено, підведіть курсор до будь-якого його кутів. Ви побачите, що з боків квадрата з'являються кола - це і є елементи керування заокругленням.

Крок 3: Регулюємо радіус. Щоб змінити радіус заокруглення, натисніть і перетягніть одне з кіл. Чим більше ви перетягуєте, тим більший радіус заокруглення.

Крок 4: Індивідуальне заокруглення. Якщо ви хочете заокруглити лише деякі кути, ви можете натиснути на іконку поруч із пунктом, що відповідає за заокруглення в панелі керування шаром. Це дозволить вам вручну задати радіус заокруглення для кожного кута.

Додаткові поради:

• Заокруглення за замовчуванням. Figma дозволяє встановити стандартний радіус заокруглення для всіх нових фігур.Для цього перейдіть в меню "File" -> "Preferences" -> "Design" і встановіть значення в полі "Corner Radius".
• Заокруглення за допомогою гарячих клавіш. Для швидкого заокруглення всіх кутів квадрата можна використовувати гарячі клавіші: натисніть "R" та перетягніть курсор по квадрату.

Створення кривої: свобода творчості

Figma надає можливість створювати не тільки округлені кути, а й плавні криві.

Крок 1: Натискаємо Done. На верхній панелі інструментів оберіть інструмент «Перо». Натисніть кнопку "Done", щоб почати створювати криву.

Крок 2: Натискаємо Enter. Натисніть Enter, щоб завершити створення лінії.

Крок 3: Натискаємо на Esc. Натисніть Esc двічі. Перше натискання дозволить завершити створення кривої всередині векторного об'єкта, а друге дозволить вам продовжити малювання нової лінії в рамках того самого шару.

Додаткові поради:

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

Згладжування кутів: додавання м'якості та витонченості

Заокруглення кутів: тонка настройка

Крок 1: Активуємо згладжування. Натисніть іконку радіуса заокруглення кута, щоб відобразити докладні налаштування радіуса для кожного кута.

Крок 2: Шукаємо Corner Smoothing. Під іконкою меню з трьома точками ви знайдете параметр Corner Smoothing (Згладжування кутів).

Крок 3: Регулюємо згладжування. Перетягніть повзунок, щоб встановити рівень згладжування. Чим вище значення, тим плавнішим буде округлення.

Додаткові поради:

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

Формула успішного заокруглення: математика краси

Згладжування кутів — це візуальний ефект, а й математичний розрахунок.

Формула: A - B = C

• A - Радіус заокруглення зовнішньої фігури.
• B - Відстань між внутрішньою і зовнішньою фігурою.
• C - Радіус заокруглення внутрішньої фігури.

Приклад:

У вас є квадрат зі стороною 100px і радіусом заокруглення 20px. Ви хочете створити у ньому внутрішній квадрат зі стороною 80px.

• A = 20px
• B = (100px - 80px) / 2 = 10px
• C = A - B = 20px - 10px = 10px

Таким чином, радіус заокруглення внутрішнього квадрата має бути 10px.

Додаткові поради:

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

Тонкі нюанси: від півколів до «сквірклів»

Створення півкола: класичний прийом

Крок 1: Перефарбовуємо коло. Створіть коло за допомогою інструмента "Овал". Перефарбуйте його у чорний колір.

Крок 2: Затискаємо Shift. Наведіть курсор на коло. З'явиться маленький гурток. Затисніть клавішу Shift.

Крок 3: Перетягуємо центральною осі. Перетягніть коло по центральній осі кола. В результаті ви отримаєте півколо.

Додаткові поради:

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

Сквиркли: нестандартні форми

«Сквіркли» - це нестандартні форми, які поєднують у собі плавні криві та заокруглені кути.

Крок 1: Додаємо Corner Smoothing. Створіть фігуру із закругленими кутами. Натисніть іконку радіуса заокруглення кута, щоб відобразити докладні налаштування.

Крок 2: Регулюємо згладжування. Знайдіть параметр Corner Smoothing і перетягніть повзунок, щоб задати рівень згладжування.

Додаткові поради:

• Експериментуйте. Створіть кілька «сквірклів» із різними рівнями згладжування, щоб знайти оптимальний варіант для вашого проекту.
• Використовуйте сквиркли для створення унікальних елементів. «Сквіркли» відмінно підходять для створення кнопок, іконок та інших елементів інтерфейсу.

Висновки: майстерність заокруглення у Figma

Округлення кутів у Figma – це не просто технічна навичка, це мистецтво. Правильне заокруглення дозволить вам створювати елегантні, сучасні та привабливі проекти.

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

FAQ: питання, що часто ставляться

• Як зробити заокруглення кутів у всіх фігур за замовчуванням? Перейдіть в меню "File" -> "Preferences" ->"Design" і встановіть значення в полі Corner Radius.
• Як створити ідеально круглий кут? Встановіть радіус заокруглення рівним половині ширини чи висоти фігури.
• Як зробити заокруглення тільки в одного кута? Натисніть на значок поруч з пунктом, що відповідає за заокруглення в панелі керування шаром, і встановіть радіус заокруглення тільки для цього кута.
• Як згладити кут за допомогою Corner Smoothing»? Натисніть на іконку радіуса заокруглення кута, щоб відобразити докладні налаштування, знайдіть параметр «Corner Smoothing» та перетягніть повзунок, щоб встановити рівень згладжування.
• Як створити півколо? Створіть коло, перефарбуйте його в чорний колір, затисніть клавішу Shift і перетягніть кружок центральною осі кола.

Пам'ятайте: заокруглення кутів – це лише один із елементів дизайну. Використовуйте його у поєднанні з іншими інструментами Figma, щоб створювати унікальні та оригінальні проекти.

Інструкція із закруглення кутів фігури у додатку Фігма

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

У цьому докладному посібнику ми розповімо вам, як закруглити кути у фігури у Фігмі. Почнемо зі створення фігури. Ви можете вибрати прямокутник або овал, залежно від того, яку форму ви хочете створити. Розміри фігури можна задати за допомогою інструментів Фігми.

Щоб закруглити кути фігури, вам доведеться перейти до панелі властивостей Фігми. Знайдіть розділ «Кути» та задайте бажаний радіус закруглення в пікселях. Ви можете побачити, як кути вашої фігури починають закруглюватись на макеті. Якщо вам знадобиться змінити радіус закруглення, ви завжди можете повернутися до панелі властивостей і відредагувати значення.

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

Відео: Як заокруглити кути у фігмі Завантажити

Короткий опис Фігми

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

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

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

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

Відео: Як у Фігмі закруглити один кут. Фігма – уроки для початківців! Завантажити

Кути та їх значимість у дизайні

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

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

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

Закруглені кути можуть надати фігурі м'якості та доброзичливості. Вони часто використовуються для створення дружнього та привабливого дизайну.

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

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

Відео: Як заокруглити кути у фігур у FIGMA. Робимо зірки у Фігма за 3 хвилини

Роль кутів в естетиці дизайну

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

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

Прямі кути, з прямими кутами 90 градусів, можуть надавати відчуття структурованості та порядку. Вони часто використовуються в корпоративному дизайні та дизайні інтерфейсів.

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

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

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

Привабливість закруглених кутів

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

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

3. Створення гармонійних переходів та плавності. Закруглені кути дозволяють створити плавні переходи між елементами та усунути різкі межі. Це допомагає досягти більш природного вигляду та більш гармонійного поєднання різних елементів у дизайні.

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

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

Відео: 4 СПОСОБИ ОБ'ЄДНАТИ У FIGMA.З'єднуємо елементи, шари, кадри, фігури, вектори, об'єкти у фігмі. Завантажити

Можливості Фігми для закруглення кутів

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

• Закруглення кутів прямокутників: Фігма дозволяє встановити радіус закруглення для кожного кута прямокутника окремо або всіх кутів відразу. Це дозволяє створювати різноманітні форми та елементи дизайну.
• Закруглення кутів довільних фігур: У Фігмі можна створювати фігури довільної форми і закруглювати кути так само, як і у прямокутників. Це дає більшу свободу створення оригінальних дизайнів.
• Автоматичне закруглення кутів: Фігма має функцію автоматичного закруглення кутів, що дозволяє створювати закруглені кути без необхідності ручного налаштування. Це особливо зручно при роботі з великою кількістю фігур або створення інтерфейсів.
• Інтерактивні закруглені кути: У Фігмі можна створювати фігури з інтерактивними закругленими кутами, які змінюються під час взаємодії з користувачем. Наприклад, кути можуть бути закруглені тільки при наведенні курсору на фігуру або при натисканні на неї. Це додає динамічність та взаємодію в дизайн.
• Експорт та використання: Фігма дозволяє експортувати фігури із закругленими кутами у різні формати та використовувати їх в інших програмах або на веб-сторінках. Це спрощує процес роботи та співробітництво з різними фахівцями.

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

Відео: 🔥 Фігури у Figma: прямокутник, еліпс, полігон, зірка. Як із них швидко робити іконки? Завантажити

Інструменти для редагування фігур

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

Ці інструменти в комбінації дозволяють створювати та редагувати різноманітні форми та фігури у Фігмі з легкістю.

Використання кривих Безьє

Для початку роботи з кривими Безьє необхідно вибрати інструмент Pen (перо) з панелі інструментів. Потім ви можете клацнути та додати точки для створення кривої. Клацніть ліву кнопку миші ви можете додати прямі сегменти кривої, а утримуючи кнопку і рухаючи мишу, ви можете створити криві сегменти.

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

Якщо потрібно змінити радіус закруглення, ви можете використовувати ручки, які з'являться при виборі точки. Просто перетягніть ручку, щоб змінити форму кривої.

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

Використання кривих Безьє – це зручний спосіб надати вашим фігурам у Фігмі більш органічний та гладкий вигляд. Цей інструмент дозволяє вам легко та ефективно працювати з формами та створювати унікальні дизайни.

Масштабування підсумкової фігури

Після того, як ви закруглили кути фігури у Фігмі, ви можете змінити її розміри, щоб досягти потрібного ефекту. Масштабування фігури дозволяє збільшити або зменшити її розмір без втрати якості.

Для масштабування фігури у Фігмі вам знадобиться використовувати інструменти Scale або Free Transform. Інструмент Scale дозволяє масштабувати фігуру пропорційно, зберігаючи її вихідні пропорції.

Щоб масштабувати фігуру за допомогою інструмента Scale, виберіть потрібну фігуру та натисніть клавішу S на клавіатурі.

Щоб масштабувати фігуру за допомогою інструмента Free Transform, виберіть потрібну фігуру та натисніть клавішу F на клавіатурі. Потім ви побачите вузли на кутах фігури, які можна перетягувати, щоб змінити її розміри. Рухайте вузли, щоб збільшити або зменшити фігуру в потрібних напрямках. Якщо потрібно зберегти пропорції фігури, утримуйте Shift під час масштабування.

Інструмент

Клавіша

Дія

Як у фігмі заокруглити лише один кут

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

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

Спосіб 1: задаємо Round у властивостях об'єкта

1. Виберіть фігуру, у якій потрібно закруглити кути.
2. У верхній панелі інструментів знайдіть та натисніть на кнопку «Властивості» (Properties) або натисніть на клавіатурі поєднання клавіш «Ctrl» + «Enter» (для Windows) або «Cmd» + «Enter» (для Mac).
3. У панелі «Властивості», що відкрилася, знайдіть розділ «Кути» (Corners) .
4. Встановіть бажаний радіус закруглення кутів, переміщуючи повзунок або вводячи потрібне значення в полі Радіус (Radius) .

Спосіб 2: заокруглення під час створення фігури

Заокруглити краї у фігури можна також під час її створення. Для цього потрібно виконати таке:

1. Створіть фігуру через інструмент.
2. Після цього помістіть курсор всередину фігури, як на фото вище.Усередині області фігури з'являться маленькі кола з написом Round при наведенні
3. Затисніть коло і рухайте мишею вгору/вниз, щоб змінити розмір закруглення.

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

Як зробити заокруглення кутів у Figma

Сьогодні ми розберемо як закруглити кути квадрата у фігмі, тим самим створивши фігуру - супереліпс 1. Створюємо квадрат

2. Наведіть на нього курсор і з боків квадрата з'являються круги. Завдяки цим колам ви можете регулювати радіус заокруглення, просто тягніть їх до центру квадрата доки не досягнете бажаного заокруглення.

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

Який пункт за який кут відповідає

• Підбірка плагінів для роботи у Figma
• Як встановити шрифти у Figma якщо ви працюєте у браузерній версії
• Гід по 10 популярним безкоштовним фотостокам

Як заокруглити один кут трикутника у Figma/Photoshop?

у мене при наведенні та при натисканні на фігуру не висвічуються ці точки для закруглення.

Інші відповіді

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

У Figma можна зробити заокруглення певних кутів за допомогою вбудованої функції. При натисканні на квадрат праворуч (я обвів його червоною лінією). Нижче з'явиться меню з градусами кутів

Схожі питання

Сквирклморфізм (Squirclemorphism) у дизайні інтерфейсів

Ви помітили зростання популярності цього тренду? Останні роки багаті на нові стилі UI дизайну. Починаючи з простого плоского дизайну, Material дизайну та закінчуючи неоморфізмом, та глассморфізмом. Хоча я не такий гарний мисливець за трендами, як Michal Malewicz, я впевнений, що знайшов дещо . Давайте поринемо у світ сквирклів (супереліпсів)!

Сквіркл? Що це таке?

Це не прямокутник із закругленими кутами і не коло. Ця постать унікальна, але має велике значення. Вперше вона була помічена в цифровому дизайні з появою iOS 7. До ікон додатків була застосована маска у формі сквіркла. З того часу дизайнери полюбили цю фігуру. Якщо ви хочете дізнатися формулу, що лежить в її основі, ознайомтеся з описом з Вікіпедії або дослідженнями Figma Engineere.

Світанок сквирклморфізму

Спочатку сквіркл використовувався для відтворення іконок iOS-додатків. Як я вже згадував, різниця між стандартним прямокутником із закругленими кутами та супереліпсом була невеликою, але помітною. Ми завжди прагнемо того, щоб наші дизайни виглядали сучасно, тому ми хотіли, щоб до іконок додатків була застосована маска у вигляді цієї нової фігури. Згодом дизайнери зрозуміли, що його можна використовувати для інших елементів. Деякі з нас почали використовувати його у кутах карток, інші зробили елегантні іконки. Це був лише початок. Тепер ви можете всюди зустріти сквіркли в різних формах у UI дизайні.Маска у формі супереліпса застосовується до цілих сторінок мобільних додатків! Шот від Fireart Studio Повсюдне поширення сквірклів спонукало мене назвати цей тренд - Сквірклморфізм (Squirclemorphism)! Що цікаво, сам стиль полягає лише у використанні форми супереліпса. Він може бути пов'язаний із нейоморфними або глассморфними елементами.

Ви можете побачити їх у Instagram

Спочатку я помітив, що супереліпси стають все популярнішими в Instagram, тому що в стрічці повно нових витворів. На Dribbble я зазвичай шукаю певні елементи або категорії, і було важче помітити новий висхідний тренд. Aweka Design Дизайн від Amjad

Ви можете побачити їх на Dribbble

Я люблю переглядати дизайни на Dribbble, щоб знайти натхнення чи цікаві стилі та композиції. Введіть "squircle" у пошуку Dribbble, і ви побачите сотні результатів. Шот від Cuberto Шот від Halo Lab Як ви, напевно, помітили, більшість дизайнів створюються тільки для демонстрації навичок своїх творців. Вони не використовуються у реальних додатках.

Сквіркли в Figma

За промовчанням закруглені кути вказують на правильний радіус. Але це стосується лише закруглених прямокутників, а не супереліпсів. Щоб домогтися особливої ​​форми, потрібно додати «Corner Smoothing» (Згладжування кутів) до радіуса заокруглення кута. Щоб активувати згладжування, ви повинні натиснути іконку радіуса заокруглення кута, щоб відобразити докладні налаштування радіусу для кожного кута. Потім під іконкою меню з трьома точками ви знайдете параметр Corner Smoothing. Клацніть по ньому, і ви побачите спливаюче вікно з повзунком. Створення сквирклів у Figma Якщо ви хочете досягти ефекту, подібного до iOS, встановіть значення приблизно на 60%, для максимального ефекту використовуйте 100%. Все просто!

Сквіркли в Sketch

Створювати сквіркли в Sketch ще простіше. Коли у вас є шар у формі прямокутника із закругленими кутами, все, що вам потрібно зробити, це перейти на панель Inspector (та, що праворуч) і вибрати список «Radius (Round Corners»). Змініть параметр на "Smooth Corners". Все, ваш сквіркло готовий!! Створення сквірклів у Sketch

Висновок

Останніми місяцями з'явилося багато трендів. Сквирклморфізм розпочався з невеликого елемента – іконок додатків iOS7. Зараз він застосовується практично до всіх елементів, що мають закруглені кути. Очевидно, що не всі сквіркли хороші в реальних додатках, але ця тенденція, безумовно, надихає. Що ви думаєте про сквирклморфізм? Ви використовуєте фігури зі згладженими кутами? Переклад статті blog.prototypr.io