How to wireframe - Figma

Wireframing in Figma. Some designers like to continue sketching wireframes by hand using a blank sheet of computer paper, or dot grid journals. SignupBlogHomeWhat'sNewCommentarySpotlightInsideFigmaArchiveSignupHowto wireframe  ToniGemayelGrowthMarketer,FigmaAugust12,2019Wireframesareoneofthesimplesttoolsyoucanusetoconveyabigidea.ButthevalueofawireframegoesmuchfurtherthansimplygettingyourideadownonpaperordowninFigma.Inthispost,we’lllookatwhatdefinesawireframe,whatagoodwireframedoesanddoesnotinclude,whenawireframeismosthelpful,andhowyoucaneasilygetstartedwireframing.WhatisawireframeAwireframeisasimplevisualguidethatrepresentstheskeletalframeworkofawebsiteordigitalproduct.Thinkofitastheblueprintforyourfinaldesign.You’reprovidingenoughdetailsothateveryoneknowstheshapeofthewall,butyou’renotgettingsodeepintoitthatyou’regivingexactdetailsonthetypeofbrickthewallsshouldbemadeof(thatcomeslater).Thoughwireframesaremostoftencreatedbydesigners,theyneedtobebasicenoughsothateveryonefromotherdesigners,stakeholders,devs,anduserscanunderstandtheideas.Wireframesarenotthetimetosetanythinginstone.Infact,theopposite.Thepowerofwireframesisthattheyprovideanopportunitytogathermoreinformationthroughusabilityresearchandstakeholderinput.Becausewireframesaresosimple,peoplecanmoreeasilyfocusonfunctionalityandtheuserexperienceratherthangettinghunguponcolorsandotheraestheticelements.TypesofwireframesInatraditionaldesignprocess,wireframescomeafteron-the-flyhand-drawnsketchesandrightbeforehigh-fidelitymockupsorprototypes.Therearetwolevelsofwireframing,lowfidelityandhighfidelity—thoughyoucangostraightfromalowfidelitywireframetoaprototypeandskiphighfidelitywireframingasadistinctstep.LowfidelitywireframingLowfidelityisthemostbasictypeofwireframing.It’ssosimplistic,thatpaperandpenwillstillsufficeasawaytorepresentyourideas,however,creatingyourwireframesinFigmawillallowyoutoeasilysharethemandmakesureyourteamhasaccesstoyourlatestthinkingasyouiterate.Lowfidelitywireframesaredoneingrayscalewithafocusonlayoutandhigh-levelinteractions.UIelementsandcontentarerepresentedbybasicshapeslikesquares,triangles,circles,andlines.Lowfideliftywireframesutilizebasicalshapestocommunicatepagestructureand layout.HighfidelitywireframingHighfidelitywireframingtakeswhatyouputtogetherinthelowfidelitystageandsprinklesinmoreofthedetailedelements.Highfidelitywireframesincludevisualmarkersandbrandingsignifierslikecolors,graphics,andfontstyle.UIelementslookrealisticandmightevenincludetexturesandshadows.Atthisstage,adesignermightalsochoosetoaddinimagesandcopy.Thiswireframingkitwillgetyoustartedwithallthebasicsyouneedtocreategreatlookinghighfidelitywireframes.Toduplicatetheabovefile,clickhere.BestpracticesforcreatingwireframesTherearenohardandfastrulesforwhatyouneedtoincludeinyourwireframeandwhatyoumustleaveout,buttherearesomebestpracticestohelpyougetthemostoutofyourwork.KeepaestheticelementssimpleColorsshouldbegrayscale:white,black,andthegraysinbetween.UsetwofontsmaxAtthisstageyouareusingtypographytocommunicatethehierarchyofinformation.Limityourselftotwofontstomakethehierarchyclear.Changethefontsizeanduseboldanditalicasneededtodifferentiateandcallattentiontodifferentpiecesofinformationinyourwireframe.RepresentgraphicsandimageswithboxesKeepthefocusonthelayoutbyusingsimplesymbolsthatrelaythefutureplacementofgraphicsandimages.Calloutvideoplacementswithatriangleasaplaybuttononapplicableboxes.ImageplacementcanberepresentedassquaresorrectangleswithXsthroughthem.Howtorepresentvideosandimagesin a wireframe.ConsiderscreensizeWireframesshouldbeequallycreativeandtechnical.Considerthemanydifferentplaces,stages,andwaysyourdesignmightbeused.Threequestionsthatmightdrasticallyinfluenceyourwireframeorversionsofyourwireframeinclude:Supporteddevices—Yourdesignadaptstosupportdesktopandmobile.You’llwanttowireframehowthedesignchangesineachinstance.Screenorientation—Dependingonifyou’relookingatthedesigninportraitorlandscape,somethingsmightneedtoshiftandresize.Contextofuse—Ifaspecificfeatureinyourproductismoregearedtodesktopuse,considercuttingitfromthemobileversionupfront.Reducingthedesigntomatchhowpeoplewillactuallyuseitsavesalotoftimeandmoney.WhentouseawireframeThere’salmostnowrongtimetouseawireframe,buttherearesomeinstanceswhentheycanbeextrahelpful.Whetheryou’retryingtoexplainyourideatosomeone,getallthestakeholdersonthesamepage,forceagroupdecision,orvalidateyourplan,awireframepresentsasimplevisualrepresentationthateveryonecanpointto.Getstakeholderstofocus—Becausethemagicofawireframeliesinthesimplicity,yourclients,colleagues,andexecswon’tgethungupondownstreamdetailslikecolorsandimages.Instead,they’llbeforcedtozeroinonimportantstructuralelements.Catchproblemsearly—Thoughtheydon’tpresenttheactualfunctionalityofapage,wireframesallowyoutomapouthowalltheelementswilllookandinteractoncethedesignisputintoaworkingprototype.It’swayeasiertore-workpartofawireframethanitistorebuildaprototypeorwebapplication.Cutdownonrevisiontime—Relatedtocatchingproblemsearly,puttinganideainfrontoftheteamoraclientinawireframegiveseveryonetheopportunitytochimeinatatimewhenit’srelativelyeasytoadjustandrevise.Bygettingcollectivefeedbackearly,you’llcutdownonrevisiontimelater.Decidecontentprioritization—Wireframesnaturallyrevealspaceconstraintsandthehierarchyofelementsonthepage,withoutrelyingonthecontentitself.Seeingtheelementslaidoutanonymouslywillhelpeveryonedecideiftherightweightisgiventothemostimportantcontent.Testusabilitywithusers—Whenyou’retestingoutanewideawithsomeone,theydon’tneedtoseeeverylittledetailforyoutodetermineiftheideaisgoingtowork.Wireframesgiveyoujustenoughtoworkwithsothatyoucanvalidateyourapproachorpinpointwhereadjustmentsareneeded.WireframinginFigmaSomedesignersliketocontinuesketchingwireframesbyhandusingablanksheetofcomputerpaper,ordotgridjournals.Forthosethatwanttojumpintodesigningon-screen,Figmahasawireframetemplatetogetyoustarted.Figmaisbrowser-based,sosharingyourwireframesisaseasyassharingalink.Yourteamcanleavecommentsrightonthefilesoyoucaneasilygetfeedbackandfieldquestions.Yourwireframeistheblueprintforwhathappensnextintheprocess.Onceit’sinagoodplace,addinthecontentandcopyandkeepbuildingfromthere.Eventually,whatstartedasalinedrawingwillbecomeafullyfunctioningproduct.RelatedContentAndreaHelmbolt|August5,2019Howtoruna design sprintDesignsprintsareaneffectiveprocessesusedbyteamstosolvecomplexproblemsinashortperiodoftime.Learnhowtoplanandfacilitatethesixphasesofadesign sprint. NoahLevin|September4,2019Designcritiquesat FigmaLearn6uniquemethodsfordesigncritiqueusedbytheFigmadesignteam,alongwithsometipsandbestpracticesforrunningthemeffectively.