Страхотни неща от Фигма

Измина доста дълго време, тъй като си спомням, че бях толкова развълнуван от състоянието на инструментите за дизайн. Тъй като миграцията на Adobe към Creative Cloud изглеждаше сравнително [досега] застояла времева рамка, при която справянето с разширяващия се диапазон от размери на изгледния прозорец и плътността на пикселите ставаше все по-безсилно. За щастие има по-малки по-гъвкави софтуерни компании, които изграждат фантастични продукти, които предлагат напълно нови подходи и работни процеси за проектиране на инструменти в UI / UX жанра.

Sketch се сдоби със заслужено заслужаваща внимание потребителска база и докато Adobe се опита да отговори с XD (твърде рано ли е да кажа, че не съм впечатлен?), Най-много се вълнувам от потенциала на Figma.

Ако сте нови за Figma, ще се почувствате много познати, ако някога сте използвали Sketch. Конфигурацията на прозореца е почти идентична: инструменти в горната част, слоеве вляво, инспектор вдясно и платното в средата - потребителският интерфейс обаче е различен: плосък (в неговия стил) и минимален в сравнение с OSX GUI в Sketch. Artboards се наричат ​​рамки, а символите се наричат ​​компоненти на Figma. Редактирането на компоненти се извършва вградено (не на отделна страница, както е в Sketch) и дори промяна на цветовете и други атрибути могат да бъдат отменени в допълнение към промяната на текста. Една от най-впечатляващите и уникални функции на Figma е мултиплейърният му режим, който позволява на потребителите да си сътрудничат в реално време - ще видите как вашите сътрудници курсори работят на едно и също платно, взаимодействащи с дизайна. Тъй като е базиран на браузър (не позволявайте това да ви плаши - той е бърз и отзивчив), всеки с браузър може да го използва, независимо от операционната система. Това означава, че не се изисква патентован софтуер, което води до още по-лесно предаване на разработчиците.

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

Случайно настрана: След години използване на Illustrator, напълно обичам, че мога просто да натисна „I“ за достъп до инструмента за очи

Докато на Figma (в този момент от време) липсват някои функции, които има Sketch (особено около дефиниции за стил и достъпен API за разработка на плъгини), има много наистина интелигентни функции, от които се вълнувам. Техният график за бързо пускане ме уверява, че много от липсващите функции и функции, които потребителите предполагат, не са твърде далеч по пътя. Целта на тази публикация не е да навлиза в подробности за много от отличителните характеристики на Figma, които са документирани другаде (тук, тук, тук и тук); вместо това исках да подчертая няколко от любимите ми „малки големи детайли“, които аплодирам екипа на Figma за изпълнение. Тези детайли кумулативно правят огромна промяна.

Избор на преден план обекти

Когато имате разнообразие от обекти, подредени върху фонов обект (като потребителски интерфейс на карта или съдържащ фон), можете лесно да изберете обекти отгоре, без да се налага да измествате + кликнете върху тях поотделно или да заключите фоновия слой, за да направите селекционна маркировка. Това дори ще работи за избиране на обекти в компоненти или групи. Просто задръжте CMD и плъзнете маркировка за избор около обектите, които искате да изберете. Преди да плъзнете, докато натискате CMD, задръжте курсора на мишката върху съдържащия обект - той ще го подчертае с контур - след като щракнете и започнете да влачите, за да го изберете, той ще пренебрегне този обект и ще ви позволи да изберете обекти на преден план. Смарт!

Оразмеряване и подравняване на текстовото поле

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

Към всеки кадър могат да се добавят множество решетки. Мрежите могат да бъдат настроени да бъдат фиксирани в центъра или вляво, или да се разтягат. Всяка решетка може да бъде оцветена независимо.

Мрежи

Настройките на мрежата (оформление) в Sketch работят ... но има нещо в това, което никога не ми се е струвало правилно. Създаването на решетка във Фигма се чувства много по-просто и универсално. Можете да добавите толкова мрежи към рамка, колкото искате, и дори можете да добавите решетки вътре в компонентите си. Можете да оформите всяка решетка поотделно за идентификация. Например, можете да имате решетка с 3 колони и 6 колона и да ги оцветите по уникален начин. Фигма също има настройка, която ще разтегне мрежата и ще я мащабира до размерите на вашата рамка. Възможността да се определят неподвижни и течни (опънати) мрежи е наистина удобна, когато изграждате система за работа в различни размери на екрана. Добавянето на редове в мрежата работи по същия начин, но се контролира независимо от колоните като допълнителен слой на мрежата. Всяка решетка може да бъде независимо контролирана и превключвана от инспектора. CTRL + G бързо превключва решетките във всички кадри.

Подравнете към решетката

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

Съдържание на клип

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

Ограничения

Не исках да изпадам в подробности относно ограниченията, защото това е доста добре документирана функция, но би било трудно да напиша за Figma, без да споменавам за непознатите с тях. В сравнение със Sketch (който ви дава 4 различни режима на ограничение), Figma ви дава 5 различни режима и ви позволява да ги присвоите независимо като вертикални или хоризонтални атрибути. Интерфейсът за контрол на ограниченията е изненадващо прост. Тя може да бъде контролирана чрез избор на падащото меню или чрез идентифициране на ограничителните места при малка визуализация на кръста. Ако диаграмата няма смисъл в началото, веднъж започнете да правите избор от падащите менюта. Харесва ми, че не са се опитали да объркат иконите в падащото меню, текстовите опции са много по-описателни. Figma ви позволява да дефинирате ограниченията във вашите компоненти и към вашия компонент като цяло по отношение на вашата рамка, така че те да реагират на промените в размера на рамката.

Няколко неща, които бих искал да видя във Фигма

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

Данни на живо
Възможност за вмъкване на живи данни или персонализирани набори от данни, включително изображения в дизайна (както виждаме с Craft from Invision).

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

Тип контроли
Повече опции за контрол на типа като достъп до функции на OpenType, подредени и номерирани списъци, висящи препинателни знаци, достъп до глифна палитра и възможност за определяне на универсални стилови типове.

Страници
Страниците са функция, която много ми харесва и ми е била полезна в Sketch, за да се разделят, организират и групови екрани.

Figma все още не е обявила модела си за дългосрочно ценообразуване (в момента е безплатен) или ако има планове за режим без работа или алтернативни методи за работа с проекти, които са твърде чувствителни, за да се съхраняват в облака - но с ентусиазъм гледам напред, за да видим какво следва. Трябва също така да отбележа, че макар да се наслаждавам на много от тези функции, аз също ежедневно използвам Sketch и се наслаждавам на ползването му. Има фантастична общност за разработка на плъгини със Sketch и полезни добавки като Craft. Досега не съм чел нищо за разработката на плъгини или достъпен API за Figma, но прочетох, че екипът проучва начините на потребителите да въведат реални данни в дизайна. Харесва ми, че толкова голяма част от функционалността на Sketch се разширява щедро от общност от разработчици на плъгини, но се чудя дали това въвежда предизвикателства след излизането на новите версии на Sketch. Дали приставката с отворен код, на която сте разчитали, все още функционира една и съща след всяка актуализация? Трудно ли е да се поддържа съвместимост или тест за конфликти / бъгове? Наистина съм любопитен. Във всеки случай нямам търпение да видя какво следва!

Споделете под любимите си функции / детайли във Фигма!