Figma vs. Sketch vs. Axure - a Task-Based Review | Toptal
文章推薦指數: 80 %
Sketch and Axure both offer cloud sharing services, but there is no way to share screens in real time with collaborators. Files shared in Figma can be joined in ...
DesignersHiring?ToptalhandpickstopUXdesignerstosuityourneeds.Top3%WhyClientsEnterpriseCommunityBlogAboutUsFollowusonLogInGotoYourProfileDesignAllBlogsIconChevronIconCloseSearchFilterbyAllEngineeringDesignFinanceProjectsProductToptalInsightsViewallresultsEngineeringDesignFinanceProjectsProductToptalInsightsToolsandTutorials9minutereadFigmavs.Sketchvs.Axure–ATask-basedReviewTherearemanyUXdesigntoolsonthemarket,buttheircapabilitiesvary.ThisreviewexaminestheeffectivenessofSketch,Axure,andFigmawithatask-basedcomparison.AuthorAuthorBenKopfBenhas25yearsofexperienceinUX,interaction,userresearch,andUIdesign.Benthinksaboutwhatcanbe,notwhatis.SHARESHARE
InarecentToptalinfographic:“TheBestUXTools,”weexaminedthewidearrayofdigitaldesigntoolsonthemarket,mostofwhicharecapableofassistinginthedaytodaytasksoftheindividualUXdesigner.
Threeofthetoolsfeatured,Sketch,Figma,andAxure,havegeneratedloyalfollowingsbecausetheyexcelatspecificjobswithintheUXdesignworkflow.
However,theperformanceofthesetoolsvariesdependingonthedesigntaskathand.Insteadoflistingalloftheirfeaturesinacomparisontable,we’lldeterminetheireffectivenesswithatask-basedreview.
Here’saquickoverviewofthecompetitors:
SketchbyBohemianCodingbasedinHague,NL.SketchisaMac-onlyapplication.
FigmabyFigmabasedinSanFrancisco,California.Figmarunsonanyoperatingsystemviaabrowser.
AxurebyAxureSoftwareSolutionsbasedinSanDiego,California.AxurehasaWindowsandMacversion.
We’llscoreeachtoolbasedonhowwellitperformseverydaydesigntasksoutofthebox—withoutplugins,add-ons,orthird-partyapps.Thetasksinclude:
DoingConceptIdeation
CreatingLow-FidelityDeliverables
CreatingHigh-FidelityDeliverables
CreatingInteractivePrototypes
CreatingaDesignSystem
DeliveringtoDevelopment
Note:Whenthetoolshavenearlyidenticalfeaturesneededtocompleteatask,thewinwillgotothetoolthatiseasiertouseandprovidesfasterdelivery.Ifthatdeterminationseemstooclosetocall,third-partysupportisthetie-breaker.
Task:DoingConceptIdeation
Ideationisacreativeprocessforgeneratingnewideas,andit’susuallydonebyinterdisciplinarygroupsconsistingofdesigners,developers,productowners,andprojectmanagers.
Thegoaliscreatingnewideastouseinaproductafterconsideringthebaserequirementsandanyworkthat’salreadyunderconstruction.Forexample,ateammayundergoaconceptideationsessiontocreateasetofMVPfeaturesforanewapp—ornext-generationfeaturesinanexistingapp.
Alargegroupideationsessionusingpaper,stickies,andaprojector.
Manydesignersdoconceptideationonawhiteboardorpaper.However,ideationisalsodonedigitally,especiallyindistributedoffices.Conceptgenerationisateamsportandincludesnon-designerslikeproductowner/managersandfront-enddevelopers.Toolsthatfostercollaborationandareeasytousearebestforthistask.
Winner:Figma
SketchandAxurebothoffercloudsharingservices,butthereisnowaytosharescreensinrealtimewithcollaborators.
FilessharedinFigmacanbejoinedinrealtime,andeveryparticipant’slabeledcursorisdisplayed.Aclickonrepresentativeavatarsinthetoolbarswitchesviewstothatperson’sperspective,makingiteasytoshareanideaquickly.Additionally,Figmadoesn’trequirenon-designerstoownacopy;theyopenthefilelinkandstartworking.
OtherwhiteboardcollaborationtoolsmaybebettersuitedforconceptideationthanFigma,suchasMuralandRealtimeboard,butforadesigntool,FigmaisbetterthanSketchandAxurebyamile.
Task:CreatingLow-fidelityDeliverables
Lo-fidelitydeliverablesareusuallyproducedaswireframesordigitalsketchesthatcanbedistributedandreviewedbyotherdesignersandproductowners.DependingontheUXprocess,theycanalsobeviewedbydevelopersandotherstakeholders.
Wireframesaremeanttoshowthebasicstructureofanappsothattheinteractionmodelcanbedefinedbeforespendingtimecreatinghi-fidelitymockups.
Wireframesaregeneratedfromconceptideationsessions-Validatingproductdesignideaswithlow-fidelitywireframes.
Creatinglo-fidelitywireframescanbedonebytoolsthatarespecificallydevotedtothetask,includingBalsamiqMockups,Moqups,andFluidUI.However,Sketch,Axure,andFigmacanalldothesametask,especiallywhenuserscreatewireframecomponentlibraries.
SincewireframesusuallyserveastheinitialUIlayoutforanapporpage,theyaremonochromaticroughcutsthatchangeoften.Thishelpskeepstakeholderexpectationsincheck.
Forwireframes,easeofuse,speedofdelivery,andmodificationareessentialbecausetheyallowdesignerstoproducevariantdesignsefficiently.
Winner:Axure
InAxure,youcandrag-dropawireframeideawithoutcreatingcomponents.
Axuregetsthewinherebecauseithaspre-packagedcomponentsforwireframingimmediatelyafterinstallingthesoftware.SketchandFigmahavethetoolsthatletyoucreatewireframes,butyouneedtoeitherdrawawireframecomponentordownloadafilethatcontainsthem.Ineithercase,theymustbeintegratedintoasymbol(Sketch)orcomponent(Figma)librarytobedrag-and-droppedlikeAxurecomponents.
Axurehasmanythird-partylibrariesforcreatinglow-fidelitydeliverables,andSketchhasamultitudeoffreeandpaidfilesthatcanbedownloaded,whereasFigma’spublicresourcesarestillfledgling.
Onceadesignerhascreatedwireframecomponentlibraries,thethreetoolsareevenlymatched.NotethatAxure’scomponentspossessparametricandadjustableproperties,butforstaticwireframes,allthreetoolsperformwellwhenthelibrariesareavailable.
Task:CreatingHigh-fidelityDeliverables
High-fidelitydeliverablesarebornfromthefeedbackandlearningsgatheredfromlow-fidelitywireframes.Theyaremockupsthatshowcolor,visualdetail,andproposedfinaldesignsforanapp.
High-fidelitymockupsareoftenusedinstakeholderpresentations.(byPramitiRKhan)
High-fidelityalsomeansscreenmockupsthatarepresentationreadyandshowntoclients,internalexecutives,andothernon-designerstakeholders.Thedesigntoolsthatexcelatthistaskhaveallthefeaturesnecessarytoaddthepolishneededtocreatearepresentationoffinalcustomer-facingdeliverables.
Thisincludescontroloverobjectfillsandstrokes,addingeffectslikeshadowsandgradientfillsandexportingartintoaneasilydigestedformat(png,pdf,jpg).
Winner:Figma
SketchandFigmahavealmostidenticaltoolssetsthatcancreatehigh-fidelitymockups,butFigma’sinteractionmodelismorerefinedandthetooliseasiertousefromthestart.BothtoolshaveeasyaccesstoadvancededitingandbooleancommandssuchasJoin,Intersect,Union,andSubtract.WhileSketch’spluginsupportallowsthirdpartiestocreateadditionalfeatures,thesetoolsaren’tavailableimmediatelyafterinstall.
Allthreetoolshavefeaturesthatallowcustomobjectcreation,butAxuremakesitsomewhatdifficulttoaccessthecommands.Theeditsmentionedaboveareunavailableonthetoolbar.Accessisonlyobtainedviathecontextmenuwhenmultipleobjectsareselected.
Additionally,Figma’svectornetworksmakeworkingwiththelinetoolsabreeze.
Task:CreatingInteractivePrototypes
Interactiveprototypescanbeascrudeasapaperprototypeorasdetailedasabranchedversionofanexistingappthathasbeenalteredtoexplorenewfeatures.Typically,interactiveprototypesallowuserstonavigatefromscreentoscreenandemployfunctionalitysuchasmenusandlists.
Sketch,Axure,andFigmaallprovideappsthatruninteractiveprototypesonmobiledevices.
Formanydesigners,abasicinteractiveslideshowwillsufficewhenpresentingtheirwork.Thisisespeciallytrueformobileappssincesimpletransitionsprovideenoughdeviceinteractiontoexplainthedesign.
Figma’sprototypingmodeliswellintegratedandsimpletouse,andbecauseitisareal-timecloud-basedapp,thereisnoneedtorefreshHTMLpageswhenafileisupdated.
Occasionally,stakeholderswantlivedataconnectionstoloadaprototypewithreal-worlddatainordertotestthescalabilityofadesign,butthevastmajorityofdesignersnowhavelittleneedforcomplexprototypes.
Winner:Figma
PrototypinginFigmaissimilartoothertoolsthatuseconnectingarrowsbetweenscreens.
SketchandFigmabothsupportsimpleprototypingwith“objecttoartboard”linkingandalimitedsetoftransitions.PluginshelpbolsterSketch’ssimpleprototypingcapabilities,butAxureisthemostpowerfulwhenitcomestoprovidingarobustinteractionmodelforprototypes.
Task:CreatingaDesignSystem
Designsystems,whilerelativelynewintheUXdesigndomain,havebeenaroundfordecades.Theyincludeashareddesignlanguage,components,resources,andguidelinesthatempowerteamstocollaborateandmakebetterdecisions.Adesignsystemlibraryisusuallyimplementedasawebsiteandactsasthesinglesourceoftruthforaproductacrossanentirecompany.
Winner:Figma
Whilecomponentlibrariescanbebuiltinanyoftheprograms,noneofthemallowdesignerstoflipaswitchandproduceaviablecomponentlibraryattheget-go.AxurecangenerateanHTMLpagewithcustomcomponentsonit,butthereisnowaytoquerythesinglecomponenttofindoutthecolorvalue,size,andotherproperties.
Buildingadesignsystemusinganyofthesetoolsisstillamanualprocess.However,therearepluginsforSketch(suchasGoogle’srecentlyreleasedMaterialDesignplugin)andatleastonethird-partytoolintheworksforFigma.
Figmagetsthewinbecausecollaborationisattheheartofagooddesignsystem.Companyemployeesfromseveraldisciplines(design,development,quality,content)needtoaccessadesignsystemlibrary,andmanywillbeaddingtothedesigncomponentfilethatsyncstothesharedlibrary.Figmacanbeusedbyanyone,notjustalicenseholder,makingitpainlesstoaccessandaddtoasharedfile.
ThisexampleshowsthefoundationalelementsofadesignsystemorganizedinFigma.(designcode.io)
Task:DeliveringtoDevelopment
WhenUIdesignersfinishcreatinganinterface,it’stheirresponsibilitytohandoffdesignfilestodeveloperssothattheprojectmaybecompleted.Butahandoffismorethanasimpledataexchange,it’sanopportunityfordesignerstocommunicatetherationaleoftheirworkandtherebyhelpdevelopersmarryformwithfunction.
Therearedozensofhandoffmethodsandevenmorethird-partytoolstofacilitateredliningandobjectinformationqueriesfromSketchandFigmafiles(seeAvocodeandZeplin).However,inthiscomparison,we’relookingattheoriginaldesigntoolbeforeit’ssupplementedwithpluginsorotherapps.
Interestingly,theriseofUXdesignsystemsmitigatestheneedforthisformofhandoff,asthepublishedcomponentlibrariesarethesinglesourceoftruthforthedeveloper.Theycanextractthecomponents’exactlayoutanddesigninformationwithoutwaitingforadeliverableorUXconsultation.
Also,gettinginformationfromobjectsinadesignfilecanbehelpfulduringtheconstructionofadesignsystem,sosomeviewoftheCSSisagoodthing.
Sketchletsyouselectobjectsanduseacontextualmenuto“CopyCSSAttributes”butitisnotideal.Figmadoesafairjobbyprovidinga“Code”tabinthepropertiespanelthatproducesCSS,iOS,orAndroidvaluesforselectedobjects(developerscanusethisfeatureinview-onlyorprototypemode).
Winner:Axure
Axure’sHTMLanddocumentgenerationdialoghasmanyhelpfuloptions.
Atthistime,onlyAxurehaspowerful“generators”thatproducefullypublishableHTMLfiles,WordSpecifications,andevenCSVformattedreportstoimportintoaspreadsheet.Whiletheresultsarenotadesignlibrary,theappdoesprovideusefuldeveloperhandoffmaterials.
TheOverallDesignToolWinner:Figma
Bythenumbers,Figmaisthewinnerofthiscomparison,primarilybecauseofitscollaborativenatureandcross-platformavailability.Asmoreteamsusedesignsystemsthatdemandtighterintegrationacrossfront-enddevelopmentanddesign,Figma’sreal-timecollaborationandliveembeddingfeaturegiveitabigadvantage.Onthedownside,Figmaisanonlineapplicationthatmightbeprohibitedfromuseinanenterpriseforsecurityreasons.
Axuretakessecondplacebecauseofitsstrengthoutoftheboxwithpre-builtcomponents,powerfulinteractiveprototypingfeatures,anddocumentgeneration.Intherarercasewhenacompanyneedstoaccessreal-worlddatastorestoseehowaparticularfeaturebehaves,Axureisthebestoronlyoption.
Sketchmayhavecomeinlast,butonceuserstakeadvantageofthemanypluginsandresourcesavailableforthetool,itisextremelypowerfulandcanbetailoredtomeetadesigngroup’sneeds.ThecaveathereisthatpluginshavetobeupdatedaftereverySketchupdate,andasaMac-onlyapplication,companiesusingWindowsPCscannotuseit.
Allthreeofthetoolsreviewedinthisarticlearepowerfulintheirownright.However,eachhaslimitations.It’suptoindividualdesignersandteamstoidentifytheirworkflowneeds,weightheprosandconsofeachprogram,andmakeanappropriatechoice.
•••
FurtherreadingontheToptalDesignBlog:
DitchMVPs,AdoptMinimumViablePrototypes(MVPr)
ThePowerofFigmaasaDesignTool
HowtoCreateaSketchStyleGuide,Library,andUIKit
UnderstandingDesignSystemsandPatterns
DeathtotheWireframe.StraighttoHigh-Fidelity!
UnderstandingthebasicsWhatisAxureusedfor?AxureisaUXdesigntoolusedforcreatingwireframesandinteractiveprototypes.Axureisespeciallyusefulfordesignersofdesktopandmobileapplications,anditishighlyregardedamongenterprisecompaniesforthehighleveloffunctionalityandvisualdetailthatcanbebuiltintoitsprototypes.IsAxurethebestprototypingtool?AxureisoneoftheleadingprototypingtoolsforenterpriseUXdesignersanddigitaldesignteams.However,AxurealternativeslikeSketchandFigmaarealsopopularbecauseoftheircollaborationtools,handofffeatures,andpluginsupport.Whyisideationimportant?IdeationisanimportantpartoftheUXdesignprocessbecauseitallowsdesignerstofreelyandquicklygenerateconceptsandsolutionsthatmaynotnormallybeconsidered.Itisalsoavaluabletimefordesignerstocollaborateandcombinetheirknowledgeandpastexperiencesintheproblem-solvingprocess.Whatishighfidelitydesign?High-fidelitydesigndeliverablesarescreenmockupsthatarepresentationreadyandshowntoclients,internalexecutives,andotherstakeholders.Thedesigntoolsthatexcelatthistaskhaveallthefeaturesnecessarytoaddthepolishneededtocreatearepresentationoffinalcustomer-facinginterfaces.Whatisalowfidelityprototype?Lo-fidelityprototypesarewireframesordigitalsketchesthatcanbereviewedbyotherdesignersandproductowners.DependingontheUXprocess,theycanalsobeviewedbydevelopersandstakeholders.Wireframesaremeanttoshowthebasicstructureofanappbeforespendingtimeonhi-fidelitymockups.TagsUXPrototypingUIFreelancer?Findyournextjob.UXDesignerJobsViewfullprofileBenKopfDesignerAbouttheauthorBenhas28yearsofexperiencehelpingpeopleinteractwithsoftwareinuserexperience(UX),interaction(IxD),userresearch(UXR),anduserinterface(UI)design.Heispersonable,team-oriented,aprocessimprover,apassionatedesigntoolexplorer,andadesignsystemfanatic.Heisachampionforthepeopleconfusedbythewebandthesoftwaretheyhavetouseeveryday.Benisaforwardthinker,thinkingaboutwhatcanbe,notwhatis.HireBenCommentsTysonKingsburyI'minclinedtoagreewithyouBen....beenusingFigmanowforaboutasolidyear,andhavefoundittobeagame-changer.KirstenFNottakingintoaccountpluginsmakesthisreviewprettyuselessforme,everyoneusespluginsforsketchintherealworldofworking.Eventhoughyoumentiontheyareavaliable,discountingitalltogetherforyourreviewisnotcomparingrealworlduseoftheproducts.ImeanIthinkFigmaisgreat,butitfeelslikeyoudidthisjusttopushitonpeople.MikalaiVyhouskiIdon'tusepluginsexpectofCraftandRenameit,whatamImissing?SimplyGreatHowaboutInvision,itseemslikeawell-usedsoftware?SimplyGreatIgetwhatyouaresayingherebutIthinkitisoftendifficulttouseplugins,totheextendthatitdoesn'thelpmeatall.Maybethat'swhyhedecidedtocomparethe"clean"version...KirstenFIdon'tseehowusingpluginscanbedifficult?AlsoI'mnotsayingtakeintoaccounteverypluginoutthere,justlikethetop3-5mostusedplugins.ThatalonewouldaddalotoffunctionalitythatmostpeopleIknowwhoareworkingintheindustryactuallyuse.AsIsaidIthinkFigmaisgreat,butyouneedtocomparethingsinarealworldusekindofway.FormeI'dliketouseFigmamorebutIcan'tbecauseIcannotbereliablyconnectedtotheinternetallthetime,thatsjustmysituation.KirstenFMostdesignersIknowatleastusethecraftpluginlikeyoudo.Thataddsalotofgreatfunctionality.EugeneLeskovDesignsystemandwinnerisFigma?Really?Itcan'tevendobulkrenameforcolorortextstyle.StefanSpasovskiSketchistheboss!StephenKingSketchdidrule,stillrulingandwilldothesame.NeilPearcePluginscanandoftendogooutofdateandneedupdating,plusI'vehadseveralpluginsthathavecrashedmycopyofSketch-soit'snotidealtorelyonplugins,eventhoughtheydoaddadditionalfunctionality.Also,youcanuseFigmaofflineyouknowbyusingtheDesktopapp;-)KirstenFIgetthatitsnotideal,butthemain/mostpopularpluginsareprettyregularlyupdated&maintained.YesyoucanuseFigmaofflinebutitsnotfullofflinesupport.YouneedtoopenfilesyouwanttoworkonwhileyouareonlineBEFOREgoingofflineandthatisamassiveproblem.Especiallyifyouaretravellingandhaveverylimitedinternetaccess.WilmerMurilloAgreewithmostofthepointsinhere,IswitchedfromSketchtoFigmaforreasonssimilartotheonespointedinthisarticle,speciallybecauseofcollaborationcapabilitiesofFigmaanditsdeeperprototypingoptions.
However,Ihavetodisagreeinthedesignsystempart,inwhichSketchbeatsFigma,inFigmait'sstilldifficulttomassivelymanagecomponents.
IhopeFigmafixthisandintegratesdata-baseddesigntools,anditwilleasilybeatSketchat100%.monserARwownicepostandsointeresting
延伸文章資訊
- 1Figma vs. Sketch vs. Axure - a Task-Based Review | Toptal
Sketch and Axure both offer cloud sharing services, but there is no way to share screens in real ...
- 2Axure and Figma
- 3盤點主流5大設計工具:Figma、Axure、AI和PS,誰更勝一籌?
最受歡迎的主流設計工具還是那老幾樣:Figma、Sketch、Adobe XD、Axure、AI和PS。
- 4[译] 使用figma设计产品6个月心得 - 知乎专栏
这些年来我也用过Fireworks和Keynote,但主要还是沿用了Axure实现可交互原型,同时我用Photoshop做UI界面。 Axure RP 6. Macromedia Firewor...
- 5Axure plugin for Figma
Easily copy frames from Figma to Axure RP or publish frames directly to Axure Cloud. Copying fram...