Светът на нововъзникващите дизайнерски инструменти е невероятно вълнуващ. Обещаващите нови програми стартират с бърза последователност, но има по-специално такава, която бавно се превърна в най-добрия избор за по-големи и най-вече разпределени дизайнерски екипи.

Фигма има потенциала да подкрепи целия процес на проектиране от край до край. Първите скици, събиране на обратна връзка, сътрудничество, готови за тестване прототипи и предаване на разработчици са напълно в рамките на възможностите му. Figma също така опростява работата на продуктовите мениджъри и ръководителите на проекти, както и на всички други заинтересовани страни.

И така, какво определя Фигма освен конкуренцията? Има няколко ключови аспекта, но всички те могат да бъдат проследени до факта, че Figma е уеб-базирана. Това повдигна много вежди, когато инструментът беше пуснат за първи път, но в крайна сметка, той проправи пътя за гъвкавостта и уникалните функционалности на Figma.

Какво е основополагащо за безпроблемния процес на дизайн на продукта?

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

1. Достъпност и сътрудничество . Независимо от инструментите, които екипът използва, трябва да има начин за съвместна работа, представяне на проекти, събиране на обратна връзка и поддържане на заинтересованите страни. Всички тези функции са налични във Figma.
2. Гъвкавост за повторение и създаване на резултати . Figma е гъвкава и може да се използва като съвместна дъска за скициране на първоначални идеи и повтаряне на всичко - от телени рамки до макети с висока точност.
3. Възможност за изграждане на прототипи и тестване . Проектиране на мобилно приложение? Създайте и публикувайте интерактивни прототипи и ги тествайте директно на смартфони - всички от Figma.
4. Установяване на един източник на истината . Figma е отличен начин за дефиниране на системи за дизайн на продукти, които се намират изцяло онлайн. По подразбиране това е един източник на истина. Вече не се чудите: „Това ли е най-новата версия?“
5. Гладко предаване . Просто споделете връзка с разработчиците и те ще имат достъп до цялата информация, необходима за внедряване на червените линии на дизайна, измерванията и графичните активи, готови за експортиране.
6. Многофункционалност за персонализиране и подобряване . API на плъгините на Figma позволява на екипите да напишат свои собствени приставки или да се включат в по-широката потребителска общност и да разширят инструмента с нови функционалности.

1. Достъпност и сътрудничество

Вземете екипа на борда

Нека разгледаме по-подробно как Figma допринася за шестте ключови области, обхванати по-горе. Новите потребители може да искат да създадат безплатен акаунт в Figma, да създадат екип и да гледат започнете с Figma . След като бъде създаден екип, поканете членове на екипа и съответните заинтересовани страни да се присъединят.

Налични са три нива на достъп. Това е доста обяснимо, но обикновено правата за редактиране се дават на дизайнерския екип, а правата за преглед - на всички останали. Това включва разработчици и други заинтересовани страни, които трябва да могат да следват процеса на проектиране и да предоставят обратна връзка.

Подобни опции за споделяне са налични на ниво екип (показано по-горе), ниво проект и ниво файл. Ако нивата на достъп не са посочени, те се разпространяват от екип на проект и от проект във файлове.

Тъй като Figma се предлага в браузъра, няма значение как някой е поканен или на каква система е. Докато устройството и браузърът, които използват, отговарят на минимални изисквания , те могат да влязат направо с връзка и интерфейсът се променя според това дали имат права за редактиране или преглед.

Вграждане на файл на проекта

Файловите проекти на Figma могат да бъдат вградени в софтуер на трети страни. Например споделен документ Dropbox Paper може да се използва за представяне на текущото състояние на проект.

За да вградите файлове на проекти, задайте видимостта на файла на Всеки с връзката - може да преглежда , копирайте кода за вграждане и вградете файла на проекта във всеки софтуер на трета страна, който поддържа embed.ly .

Обратна връзка и ревизии

Друга ключова функционалност за процеса на проектиране на продукта е възможността за разпространение на дизайни, събиране на обратна връзка и управление на ревизии. Всеки, който има връзка към Figma, може да види последната версия и да коментира директно точката, за която иска да даде обратна връзка.

За да маркирате членове на екипа, използвайте символа @ и системата ще представи списък с имена, от които да избирате. По този начин се уведомяват членовете на екипа и след като обратната връзка бъде обработена, дискусиите могат да бъдат приключени, като кликнете върху Разрешете .

За да поддържате екипите подравнени, има приятна интеграция който може да публикува дискусия от файлове Figma в определен канал Slack.

Сътрудничество в реално време

Една от най-интригуващите функционалности на Figma е това, което те наричат мултиплейър . Той позволява на няколко члена на екипа да отварят и работят по файл за дизайн едновременно. Всички, които работят по файла, се виждат в горния десен ъгъл на страницата и техните аватари се именуват и могат да се кликват.

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

Мултиплейърът е полезен при дистанционно представяне, тъй като дава възможност на всички, свързани към файла, да следват изгледа на презентатора. Той също така позволява на екипите да заобикалят допълнителни програми и да използват Figma като онлайн дъска (макар и специфични решения, като гледам , в крайна сметка може да е по-подходящ за работата).

За тази цел е препоръчително да се създадат персонализирани компоненти, които да репликират конкретни активи като виртуални бележки след нея или елементи на диаграма.

2. Гъвкавостта за повторение и производство на продукти

След като членовете на екипа са поканени и първоначалните скици са в ход, Figma може да се използва за итерация. Основната причина, поради която е създадена Figma, е дизайн на интерфейса —С завършване на бялата дъска екипите могат да преминат към карти на потоци и телени рамки. Отново е умно да се изграждат библиотеки на компоненти, които могат да бъдат използвани повторно за тези задачи. The официална колекция от шаблони осигурява вдъхновение и аранжировки за дизайн, от които да започнете.

3. Възможността за изграждане на прототипи и тестване

Съвсем лесно е да създадете интерактив прототипи с Фигма. Когато файлът Figma е отворен с права за редактиране, е възможно да превключвате между режим на проектиране и прототипиране. Веднъж в режим на прототип, е възможно да щракнете върху елемент, за да го направите интерактивен, независимо дали от сцената или страничната лента на слоевете.

С елемент, избран в режим на прототип, отстрани се появява малък кръг. При плъзгане се появяват сини линии и тя може да бъде пусната на екрана или състоянието, за да покаже резултата от взаимодействието.

В Figma се предлагат общи преходи, което улеснява създаването на прототипи с висока точност. Всъщност екипът на Figma наскоро пусна a интелигентна функция за анимиране и плъзгане . Интелигентният анимационен аспект интерполира движението на подобни елементи, докато плъзгачът е нов тип взаимодействие. И двете драстично подобряват качеството на интерактивните прототипи.

Потребителско тестване

Отново, връзката е всичко, което е необходимо за разпространение на прототипи на Figma, дори за тестване на потребители. Кликването върху малката икона за възпроизвеждане горе вдясно стартира прототипа и се генерира нов URL адрес. Възможно е да копирате URL адреса или да използвате синьото Споделете прототип бутон. След като потребителите отворят връзката, те се представят с интерактивен прототип и могат да оставят коментари при желание.

Тестване на мобилни устройства

Проектите за мобилни устройства са представени с макет на действително устройство, обграждащо прототипа. Ако е необходим повече реализъм за тестване на взаимодействието, най-добре е да изтеглите Приложение Figma Mirror за специфично тестване на устройство.

4. Установяване на единен източник на истината

История на версиите

Не би ли било чудесно, ако файловете на проекта са винаги актуални и постоянно архивирани? Тази функционалност е включен в Figma по подразбиране . Всеки файл се записва автоматично, докато работи по него, и Figma създава нов запис в историята на версиите след 30 минути бездействие. Създава се дневник на всички автоматично запазени версии и всяка версия може да бъде възстановена, ако е необходимо.

Разбира се, автоматичното създаване на версии не е единствената опция за спестяване на работа. Възможно е да запазите версия ръчно или да редактирате конкретна версия в историята на версиите.

Системи за проектиране и библиотеки с компоненти

Друг аспект, в който Figma блести, е как позволява на дизайнерите да създават, организират и разпространяват библиотеки на компоненти. Всеки файл може да бъде публикуван като библиотека и всеки цвят, стил на текст, ефект, решетка или компонент е на разположение за използване в други файлове на Figma.

Когато се правят промени в който и да е елемент в библиотеката, редакциите могат да бъдат публикувани и разпространени във файлове, които използват тези елементи. Дизайнери работи върху тези файлове, след това може да реши да приеме редакции или не.

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

Компонентите и библиотеките могат да бъдат вложени за създаване на усъвършенствани системи за дизайн, където всичко е версирано и актуално за всички участващи. И всички компоненти могат да бъдат анотирани с коментари.

5. Гладко предаване

Предаване на разработчика

С Figma дизайнерите и разработчиците не се нуждаят от отделен инструмент, като Zeplin, за управление на предаването. Те могат просто да отварят файлове и да превключват на Код режим в дясната странична лента, дори с достъп само за преглед.

Кога Код режимът е активен, избирането на елемент на сцената ще разкрие цялата необходима информация, необходима за изпълнение, а цялата друга информация относно позицията на компонента по отношение на други елементи е видима. Както при подобни решения, генерираният код не е предназначен да бъде изцяло копиран, но е полезно да имате толкова лесен достъп.

6. Универсалността, която трябва да бъде персонализирана и подобрена

API API и персонализирани плъгини

Фигма ПОЖАР и плъгин система улесняват широк кръг дизайнерски екипи и дисциплини да персонализират програмата за техните специфични нужди на процеса. Гъвкавостта на Figma дава на потребителите възможността програмно да взаимодействат с платформата. Няколко примера:

Използване на реални данни

Изключително ценно е да можете да използвате реални данни в макети и прототипи, а Figma прави възможно, като позволява да се импортира съдържание от външни източници. Чрез използване на реално съдържание е възможно да тествате стрес тестови компоненти, да поддържате актуални макети и да включвате екипи, които не са свързани с дизайна.

Приставка с име Синхронизиране на Google Sheets е идеален пример за това какво може да се направи. Този плъгин улеснява интегрирането на Google Sheets като източник за попълване и синхронизиране на съдържанието на компонентите във файловете Figma.

Разширени работни процеси

Възможността за настаняване на a система за проектиране в рамките на програма за проектиране на потребителски интерфейс е ценна само ако системата е последователно внедрена в екрани, насочени към клиентите. За щастие има Figma API, плъгини и интеграции, които могат да помогнат.

The Книга с разкази addon синхронизира Figma файлове и показва компоненти на Figma-design в панел заедно с внедрени компоненти. Друг интересен случай на употреба е Конвертор на Figma към React , подобрение на работния процес, което преобразува компонентите на Figma в код.

Характеристиките на Figma са идеални за целия процес на проектиране

Няма една-единствена дизайнерска програма, която може да се справи с нуждите на всеки дизайнер или дизайнерски проблем и това е хубаво нещо. Конкуренцията между дизайнерските инструменти е изгодна за дизайнери . Той гарантира, че компаниите, които произвеждат нашите инструменти, слушат това, от което се нуждаем, и ни предоставят актуални функции, подходящи за работата, която вършим.

Въпреки това, Figma е усъвършенстван, но интуитивен инструмент, който се е доказал повече от способен да се справи с целия процес на дигитален дизайн. Отделни дизайнери и екипи могат да се възползват от уникалните му функции за сътрудничество и итерации, а когато програмата не успее, огромен избор от приставки запълва празнотата.

• • •

Допълнително четене в блога за дизайн на ApeeScape:

• Силата на Figma като инструмент за проектиране
• Figma срещу Sketch срещу Axure - Преглед, основан на задачи
• Мини урок - Работа с компоненти на бутоните Figma
• Овладейте занаята си с тези най-добри UX инструменти
• Прецизен дизайн - Преглед на Adobe XD

Разбиране на основите

Figma генерира ли код?

Да. Figma генерира код, който може да се използва от разработчиците. Когато режимът на кода е активен, избирането на елемент на сцената ще разкрие цялата подходяща информация, необходима за изпълнение, и цялата друга информация относно позицията на компонента по отношение на други елементи е видима.

Фигма базирана ли е на браузър?

Да. От първите си дни Figma е базирана на браузър програма за проектиране. Това повдигна много вежди, когато инструментът беше пуснат за първи път, но в крайна сметка, той проправи пътя за гъвкавостта и уникалните функционалности на Figma, особено когато става въпрос за сътрудничество и документация.

Какво представлява дизайнът на Figma?

Figma е уеб-базиран инструмент за проектиране, способен да създава макети, анимации за взаимодействие и прототипи с висока точност. Много дизайнерски екипи също използват Figma като библиотека за компоненти на системата за проектиране. Освен това Figma се доверява за своя контрол на версиите, функции за съвместна работа, режим на презентация и генериране на код.

За какво се използва Figma?

Figma е уеб-базиран инструмент за съвместно проектиране на интерфейси, използван за проектиране на цифрови продукти. Той има разширени функции за сътрудничество и позволява на дизайнерите да правят интерактивни макети. Той също така е в състояние да се справи с широк спектър от задачи като проектиране на набори от икони, илюстрации, лога и др.

Какво може да направи Figma?

Figma е инструмент за цифров дизайн на продукти, който се отличава в шест области: 1) Достъпност и сътрудничество; 2) Гъвкавост за повторение и производство на резултати; 3) Възможност за изграждане на прототипи и тестване; 4) Установяване на един източник на истина; 5) Плавно предаване на разработчиците; 6) Стая за подобрения с приставки.