Як малювати лінії у Figma: створюємо дизайн покроково
Фігма є одним із найпопулярніших інструментів для дизайну інтерфейсів та прототипування. Якщо ви хочете стати професіоналом у цій галузі та освоїти цей популярний інструмент, рекомендуємо курси «Figma» та «Основи Figma».
Як зробити пунктир: покрокове керівництво
Figma є досить простою у використанні програмою, в якій можна створити макет на будь-який смак. З несуттєвих мінусів можна відзначити вагу програми, вона може зависати та глючити на слабких ПК та ноутбуках, тому цей нюанс варто враховувати заздалегідь. Давайте розберемося, як намалювати плавний пунктир.
1. Почніть із створення звичайної лінії у Figma, використовуючи інструмент «Лінія» з панелі інструментів.
2. Перейдіть до створеного елемента та перейдіть до панелі властивостей. Тут ви побачите параметри та елементи, які можна вибрати та налаштувати.
3. Перейдіть до розділу Контур і знайдіть опцію «Dashed» (пунктирна). Встановіть галочку поруч із цією опцією. Якщо не можете знайти опцію, спробуйте перейти в пошук або пошукати статті на тему UI дизайн. Зазвичай можна знайти відповідь у них або пошукати коментар від рядового користувача, який пояснить те саме, але більш простою мовою.
4. Поставте курсор у поле «Dash pattern» (порядок пунктування) та введіть послідовність значень для визначення розмірів та проміжків між ними. Наприклад, якщо ви хочете створити пунктир з довжиною 5 пікселів і проміжком 2 пікселя, введіть «5, 2».
5. Натисніть «Enter» або натисніть будь-де за межами поля введення, щоб застосувати зміни. Тепер ваші елементи будуть відображені у пунктирному стилі.
Хочете навчитися працювати у Figma, але не знаєте, з чого почати? На безкоштовному курсі «Основи Figma» ви зробите перші кроки у графічному дизайні. Дізнайтеся основи роботи з програмою та почніть створювати свої власні проекти прямо зараз!
Як зробити хвилясті лінії: малюємо хвилі у Figma крок за кроком
Лінії - основа макета, на якій будується загальна картина логотипу, макета сайту та багато іншого. Цим стилем можна підкреслити найголовніше, розбавити макет, виділивши об'єкт іншим кольором та багато іншого. Розповідаємо, як створити хвилі за допомогою плагіну Get Waves.
1. Клацніть правою кнопкою миші на будь-яке порожнє місце, оберіть "Plugins", потім - "Saved plugins", а потім потрібен вам плагін. У нашому випадку це Get Waves.
2. За допомогою цього плагіна ви можете відрегулювати амплітуду та довжину хвилі вашої хвильової лінії, граючи з повзунками та іншими характеристиками.
Це найпростіший і зручний спосіб створити хвилясті лінії у Фігмі.
Перші кроки у графічному дизайні можуть здаватися складними та заплутаними. Щоб ви змогли швидше розібратися в широкому функціоналі програм, ми радимо пройти одні з найкращих курсів дизайну від ProductStar — «Основи продуктового дизайну: Figma».
Малюємо криві: налаштування кривих у Фігмі
Створення кривої у Figma – це дуже просто. Давайте створимо криві покроково у новому проекті.
1. Відкрийте Figma та виберіть інструмент "Перо" з панелі інструментів. Цей інструмент позначений значком, який виглядає як наконечник перової ручки.
2. Почніть малювання об'єкта, клацнувши на полотні та утримуючи кнопку миші. Перемістіть вказівник у потрібне місце на полотні, щоб визначити напрямок та довжину об'єкта.
3. Тепер, щоб зробити лінію кривою, утримуйте Shift на клавіатурі і клацніть на іншому місці полотна.Після цього ви побачите, що вона стала кривою, а на кінцях з'явилися точки, що управляють.
4. Переміщуйте ці керуючі точки, щоб змінити форму кривої, використовуйте будь-які кути. Можна клацнути та перетягнути саму точку або користуватися шляхом їх розтягування та перетягування. Використовуйте ці точки, щоб підігнати її під потрібну форму.
5. Якщо вам потрібно додати ще одну криву до намальованої, просто повторіть кроки 2-4. Коли ви створюєте другий об'єкт, вона автоматично стане пов'язаною з першою, маючи спільні точки керування. Це дозволяє створювати плавні переходи.
6. Ви можете налаштувати інші параметри, такі як товщина, колір, закруглення та інші панелі властивостей. Просто виберіть створену лінію та відредагуйте потрібні параметри. Також можна додати текст зверху або знизу, щоб звернути увагу користувачів на головну інформацію.
7. Щоб завершити малювання кривих, клацніть на полотні в будь-якому місці за межами об'єкта або натисніть клавішу Esc на клавіатурі.
Створюємо лінії у різних стилях у Figma
Сайт Figma пропонує широкий вибір стилів для ліній, окрім пунктирних та хвилеподібних. На панелі властивостей можна налаштувати параметри фігури, такі як ширина, тип, округлення та багато іншого. Шар за шаром можна створювати унікальне зображення за допомогою плагінів, кадрів та елементів з меню налаштувань. Ви можете експериментувати з цими параметрами, щоб створити макет, який відповідає ТЗ вашого дизайну.
Фігма надає багато можливостей для створення різноманітних стилів. Користуйтеся цими функціями, щоб створювати ефектні та професійні інтерфейси, які залучать користувачів з різних сфер роботи та соціального статусу.Тепер, коли ви знаєте, як створювати криві об'єкти у Фігмі, ви можете використовувати їх для створення більш складних форм та елементів дизайну.
Спеціально для вас ми зібрали окрему добірку кращих онлайн-курсів по Figma на ринку та порівняли їх за ціною, тривалістю та відгуками студентів.
Криві та перо у Figma
Для новачків інструмент перо може здатися складним, тому що він малює не зовсім логічно на перший погляд. Крім того, щоб його освоїти, необхідно трохи потренуватися, і придбати навичку. Але для створення гарного сучасного дизайну без цього інструмента не обійтись. Розглянемо, як працює перо, і як створювати криві лінії у Фігмі.
Для прикладу створимо два векторні об'єкти. Нехай це будуть два кола різних розмірів. Якщо виділити ці об'єкти, то згори з'явиться вкладка об'єднання групи. Вона має кілька функцій. "Union selection" - це об'єднання двох елементів.
Друга функція цього списку «Subtract selection». Вона дозволяє відняти верхній шар, саме той об'єкт, який був накладений на інший. При цьому верхній шар нікуди не подіється, з ним також можна взаємодіяти.
Функція «Intersect selection» залишає лише область перетину двох об'єктів.
"Exclude selection" - видалення області перетину двох об'єктів.
Остання функція цього розділу – «Flatten selection». Гарячі клавіші Ctrl+E. Вибравши цей інструмент, ваші фігури поєднаються в один векторний об'єкт. При переміщенні ви не зможете їх відокремлювати.
Натиснувши на цей об'єкт, ви зможете редагувати його за допомогою кривих ліній. Таким чином виходитимуть фігури будь-яких форм.
Зміна векторних об'єктів відбувається за допомогою точок.Затискаючи лівою кнопкою миші точку, ви можете тягнути за напрямні лінії в сторони, щоб досягти потрібного вигину.
Крім того, Фігма підтримує редагування файлів SVG. Наприклад, якщо ви завантажите логотип, текст або будь-яку іншу картинку в цьому форматі, то вона додасться як векторний об'єкт, який редагується так само.
Тепер розглянемо, як використовувати інструмент "Перо" (Pen). Гаряча клавіша "P".
Для прикладу ми звернемо увагу не лише як використовувати цей інструмент, але й як його можна застосувати на практиці, наприклад, під час створення дизайну сайту? Допустимо вам необхідно зробити хвилястий перехід між секціями в лендінгу. Для цього виберіть функцію "Перо". Потім проведіть рівну лінію від краю кадру, затиснувши ліву кнопку миші приблизно до середини полотна.
Далі не відпускаючи ліву кнопку миші, за допомогою напрямних ліній зробіть необхідний вигин вгору.
Після цього відпустіть ліву кнопку миші та знову затисніть її. Таким чином, вигин продовжиться на одній лінії з початковою точкою. Зрештою, у вас вийде хвиляста лінія, що з'єднує дві точки.
Далі за допомогою Shift ви можете продовжити малювати прямі лінії тим же Пером по краях кадру.
Зрештою, у вас вийде цілісна фігура, яку можна надалі редагувати.
Наприклад, у правій частині інтерфейсу ви можете скористатися додатковими функціями, і провести обведення елемента, або додати заливку будь-яким кольором.
Згодом у таку фігуру можна вставити текст. За таким самим принципом можна створювати кнопки, панель меню сайту або інші декоративні елементи. Цей об'єкт можна зберегти, щоб верстальник міг використовувати його у створенні сайту. Таке тло зберігається у вигляді зображення SVG.
Які ще існують варіанти використання інструменту «Перо»? розглянули у попередньому уроці. Далі клацніть на цю фігуру лівою кнопкою миші, щоб активізувати інструмент «Перо». елемента з'являться лінії, а сама фігура набуде крапок, рухаючи за які ви зможете видозмінювати фігуру.
Наприклад, якщо потягнути за верхню точку, то із квадрата у вас вийде постать схожа на будинок.
Отже, з цього уроку ви довідалися, як створювати криві лінії, а також використовувати інструмент «Перо», що дозволить вам створювати привабливі дизайнерські елементи.
Корисні посилання:
- Безкоштовний відеокурс Figma від GeekBrains;
- Професійний курс Figma 2.0 для новачків SkillBox;
- Повноцінний онлайн курс з веб-дизайну з нуля від SkillBox.
