Служба підтримки 24/7:

+38 (097) 806-01-89

E-mail для замовлень:

info@armedsoft.com

Графічний редактор Figma

Лютий 28, 2020

Графічний редактор Figma

Одним із інструментів для створення web-дизайну у сфері IT є Figma, популярність якого зростає останніми роками. Це так званий сервіс, який дозволяє організувати спільну роботу в режимі реального часу. Даним редактором можна користуватись як онлайн через браузер, так і, встановивши програму на ПК.

З допомогою Figma можна розробляти:

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

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

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

  • обмежена кількість проектів - до 3-ьох;
  • збереження старих версій впродовж 30-ти днів;
  • доступ для редагування мають лише двоє користувачів.

З платними тарифами та їх умовами можна ознайомитись, перейшовши за наступним  посиланням https://www.figma.com/pricing/.

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

Графічний редактор Figma

Щоб обрати шаблон, під який буде реалізовуватись web-сайт, настикаємо на вкладку у вигляді решітки, де по замовчуванню обрано Frame:

Потім в правій області екрану з’явиться список шаблонів уже із заданими розмірами:

Також, Ви помітите три основні доступні функції: дизайн, прототип та перегляд css коду.

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

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

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

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

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

Якщо Вам потрібно дізнатися параметри якогось об’єкту, необхідно скористатися вкладкою Code. Спочатку виділяєте елемент, після чого клікаєте по Code.

Властивості width та height відображають ширину та висоту виділеного об’єкту. 

В разі необхідності завантаження зображення, виділяєте його, натискаєте вкладку Design та Export.

У випадаючому списку є можливість вибору формату скачуваного зображення: PNG, SVG, JPG та PDF.

Жоден дизайнер не може уявити свою роботу з даним редактором без плагінів, які значно спрощують процес розробки, дозволяють створювати анімацію і не тільки. Ознайомитися з ними можна на офіційному сайті https://www.figma.com/community. Нижче охарактеризуємо деякі з них. 

Brandfetch - при введенні адреси сайту, шукає лого та вставляє його в потрібний блок (формат svg та png).

Brands Colors - пошук та відтворення фірмових кольорів брендів.

Remove BG - відповідає за видалення заднього фону зображення. 

Charts - даний плагін забезпечує створення діаграм, які можна додавати і редагувати у Figma.

Figmotion - робота з анімацією.

Mapsicle - розташування карти, налаштування рівня масштабування тощо.

Image Palette - на основі підібраних зображень створює гармонійну кольорову гаму із 5-ти кольорів. 

Nounproject - пошук іконок та додавання їх до проекту.

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

Інші записи

Рекомендовані вам

  • Січень 27, 2020
    olga.hrytsayuk
    352
    Корисні інструменти для web-дизайнера (UI | UX)

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

  • Вересень 25, 2019
    admin
    666
    Використання сітки у вебдизайні (UI | UX)

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