[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ffigma":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":40,"examples":59,"showcases":60,"links":384,"dates":420},"\u002Fexamples\u002Fapps\u002Ffigma","detail","apps",true,{"title":9,"description":10,"og_image":11},"Figma design examples - Nicelydone","Explore Figma UI design examples. The collaborative interface design tool","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F934643ec-5ba7-4b4d-a9c1-a2fe4b45d1fd.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Figma design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":39},"SaaS app examples",[24],{"title":25,"links":26},"Explore Figma",[27,30,33,36],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Ffigma\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Ffigma\u002Fflows",{"label":34,"to":35},"UI components","\u002Fexamples\u002Fapps\u002Ffigma\u002Fcomponents",{"label":37,"to":38},"marketing pages","\u002Fexamples\u002Fapps\u002Ffigma\u002Fmarketing",[],{"title":41,"slug":42,"description":43,"logo":44,"url":45,"categories":46},"Figma","figma","The collaborative interface design tool","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffigma-569108c3.png","https:\u002F\u002Fwww.figma.com",[47,51,55],{"id":48,"title":49,"slug":50},8,"Design","design",{"id":52,"title":53,"slug":54},23,"Collaboration","collaboration",{"id":56,"title":57,"slug":58},48,"Developer Tools","developer-tools",[],[61,375,378,381],{"family":62,"examples":63},"screens",[64,97,130,157,173,201,221,252,270,284,314,344],{"uuid":65,"title":66,"description":67,"canonical_path":29,"image":11,"width":68,"height":69,"image_alt":70,"kind":71,"patterns":72,"component_categories":86,"app":95},"934643ec-5ba7-4b4d-a9c1-a2fe4b45d1fd","Figma The Collaborative Interface Design Tool","Signup modal where the user can create an account using Google OAuth or by entering their email and password.",3024,1710,"Figma The Collaborative Interface Design Tool from Figma","screen",[73,82],{"id":74,"label":75,"slug":76,"rank":77,"group":78},5,"Sign Up","sign-up",0,{"id":79,"label":80,"slug":81},1,"Access & Account","access-and-account",{"id":79,"label":83,"slug":84,"rank":79,"group":85},"Account Setup","account-setup",{"id":79,"label":80,"slug":81},[87,91],{"id":88,"title":89,"slug":90},284,"Modal","modal",{"id":92,"title":93,"slug":94},175,"Button","button",{"slug":42,"title":41,"logo":44,"categories":96},[],{"uuid":98,"title":99,"description":100,"canonical_path":29,"image":101,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":103,"component_categories":114,"app":128},"571907da-f62c-4751-8d69-44e76128ea4b","Recents and Sharing – Figma","Onboarding step where the user enters their name and sees a live preview of how it will appear on their multiplayer cursor.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F571907da-f62c-4751-8d69-44e76128ea4b.png","Recents and Sharing – Figma from Figma",[104,106],{"id":79,"label":83,"slug":84,"rank":77,"group":105},{"id":79,"label":80,"slug":81},{"id":107,"label":108,"slug":109,"rank":79,"group":110},74,"Onboarding Checklist","onboarding-checklist",{"id":111,"label":112,"slug":113},7,"Onboarding & Education","onboarding-and-education",[115,119,123,127],{"id":116,"title":117,"slug":118},260,"Badge","badge",{"id":120,"title":121,"slug":122},169,"Avatar","avatar",{"id":124,"title":125,"slug":126},174,"Card","card",{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":129},[],{"uuid":131,"title":99,"description":132,"canonical_path":29,"image":133,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":134,"component_categories":152,"app":155},"cd52886f-3e2a-4803-8458-768378f5fcc2","Onboarding step where the user selects their primary role from a grid of options to personalize their experience.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcd52886f-3e2a-4803-8458-768378f5fcc2.png",[135,137,144,149],{"id":107,"label":108,"slug":109,"rank":77,"group":136},{"id":111,"label":112,"slug":113},{"id":52,"label":138,"slug":139,"rank":79,"group":140},"Select","select",{"id":141,"label":142,"slug":143},2,"Actions","actions",{"id":145,"label":146,"slug":147,"rank":141,"group":148},72,"Getting Started","getting-started",{"id":111,"label":112,"slug":113},{"id":79,"label":83,"slug":84,"rank":150,"group":151},3,{"id":79,"label":80,"slug":81},[153,154],{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":156},[],{"uuid":158,"title":99,"description":159,"canonical_path":29,"image":160,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":161,"component_categories":168,"app":171},"c31f7672-fcf7-4367-a9fe-d9218574d11a","Onboarding step where the user selects their work role, such as Founder or Freelancer, to customize their workspace experience.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc31f7672-fcf7-4367-a9fe-d9218574d11a.png",[162,164,166],{"id":107,"label":108,"slug":109,"rank":77,"group":163},{"id":111,"label":112,"slug":113},{"id":79,"label":83,"slug":84,"rank":79,"group":165},{"id":79,"label":80,"slug":81},{"id":52,"label":138,"slug":139,"rank":141,"group":167},{"id":141,"label":142,"slug":143},[169,170],{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":172},[],{"uuid":174,"title":99,"description":175,"canonical_path":29,"image":176,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":177,"component_categories":195,"app":199},"ee37e600-afe9-4565-a733-546580750d6f","Onboarding step where the user selects their typical collaboration style between teammates, clients, or solo work.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fee37e600-afe9-4565-a733-546580750d6f.png",[178,180,185,193],{"id":107,"label":108,"slug":109,"rank":77,"group":179},{"id":111,"label":112,"slug":113},{"id":181,"label":182,"slug":183,"rank":79,"group":184},75,"Setup Wizard","setup-wizard",{"id":111,"label":112,"slug":113},{"id":186,"label":187,"slug":188,"rank":141,"group":189},104,"Team Management","team-management",{"id":190,"label":191,"slug":192},10,"Settings & Admin","settings-and-admin",{"id":79,"label":83,"slug":84,"rank":150,"group":194},{"id":79,"label":80,"slug":81},[196,197,198],{"id":120,"title":121,"slug":122},{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":200},[],{"uuid":202,"title":99,"description":203,"canonical_path":29,"image":204,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":205,"component_categories":215,"app":219},"b83dc7e1-287d-4464-8e36-b658f83ad245","Onboarding step where the user invites collaborators to their team via email addresses or a shareable link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb83dc7e1-287d-4464-8e36-b658f83ad245.png",[206,211,213],{"id":207,"label":208,"slug":209,"rank":77,"group":210},133,"Invite Teammates","invite-teammates",{"id":141,"label":142,"slug":143},{"id":186,"label":187,"slug":188,"rank":79,"group":212},{"id":190,"label":191,"slug":192},{"id":107,"label":108,"slug":109,"rank":141,"group":214},{"id":111,"label":112,"slug":113},[216,217,218],{"id":120,"title":121,"slug":122},{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":220},[],{"uuid":222,"title":99,"description":223,"canonical_path":29,"image":224,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":225,"component_categories":246,"app":250},"e5cfb1c6-e142-49b5-ab56-69179ede4c00","Onboarding step where the user invites collaborators to their team via email inputs or a shareable link, while a toast confirms a copied link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe5cfb1c6-e142-49b5-ab56-69179ede4c00.png",[226,228,230,238],{"id":207,"label":208,"slug":209,"rank":77,"group":227},{"id":141,"label":142,"slug":143},{"id":186,"label":187,"slug":188,"rank":79,"group":229},{"id":190,"label":191,"slug":192},{"id":231,"label":232,"slug":233,"rank":141,"group":234},44,"Progress","progress",{"id":235,"label":236,"slug":237},4,"Data & Analysis","data-and-analysis",{"id":239,"label":240,"slug":241,"rank":150,"group":242},114,"Confirmation","confirmation",{"id":243,"label":244,"slug":245},12,"States & Feedback","states-and-feedback",[247,248,249],{"id":120,"title":121,"slug":122},{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":251},[],{"uuid":253,"title":99,"description":254,"canonical_path":29,"image":255,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":256,"component_categories":263,"app":268},"156ce8cf-786f-4270-93b0-4f1799d297fa","Onboarding step where the user selects their primary reasons for using the product from a set of multi-select toggle buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F156ce8cf-786f-4270-93b0-4f1799d297fa.png",[257,259,261],{"id":107,"label":108,"slug":109,"rank":77,"group":258},{"id":111,"label":112,"slug":113},{"id":145,"label":146,"slug":147,"rank":79,"group":260},{"id":111,"label":112,"slug":113},{"id":79,"label":83,"slug":84,"rank":141,"group":262},{"id":79,"label":80,"slug":81},[264,265,266,267],{"id":116,"title":117,"slug":118},{"id":120,"title":121,"slug":122},{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":269},[],{"uuid":271,"title":99,"description":272,"canonical_path":29,"image":273,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":274,"component_categories":279,"app":282},"026f68a3-5bc8-4e65-a631-5b60c7a6cc6b","Onboarding step where the user selects their prior experience level with Figma products before continuing.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F026f68a3-5bc8-4e65-a631-5b60c7a6cc6b.png",[275,277],{"id":181,"label":182,"slug":183,"rank":77,"group":276},{"id":111,"label":112,"slug":113},{"id":145,"label":146,"slug":147,"rank":79,"group":278},{"id":111,"label":112,"slug":113},[280,281],{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":283},[],{"uuid":285,"title":99,"description":286,"canonical_path":29,"image":287,"width":68,"height":69,"image_alt":102,"kind":71,"patterns":288,"component_categories":309,"app":312},"935b3f2a-417e-4e87-a8ae-71c72633c71b","Onboarding step where the user selects between a free Starter plan and a paid Professional plan before continuing.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F935b3f2a-417e-4e87-a8ae-71c72633c71b.png",[289,297,302,304],{"id":290,"label":291,"slug":292,"rank":77,"group":293},89,"Pricing","pricing",{"id":294,"label":295,"slug":296},9,"Plans & Limits","plans-and-limits",{"id":298,"label":299,"slug":300,"rank":79,"group":301},92,"Upgrade Prompt","upgrade-prompt",{"id":294,"label":295,"slug":296},{"id":79,"label":83,"slug":84,"rank":141,"group":303},{"id":79,"label":80,"slug":81},{"id":305,"label":306,"slug":307,"rank":150,"group":308},88,"Feature Gate","feature-gate",{"id":294,"label":295,"slug":296},[310,311],{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":313},[],{"uuid":315,"title":316,"description":317,"canonical_path":29,"image":318,"width":68,"height":69,"image_alt":319,"kind":71,"patterns":320,"component_categories":333,"app":342},"28a2a314-4c4c-48d4-8488-888f38dd33d5","Upgrade nicelydoneproductss team – Figma","Upgrade checkout step where the user assigns Figma design and FigJam editor seats to team members and reviews the order subtotal.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F28a2a314-4c4c-48d4-8488-888f38dd33d5.png","Upgrade nicelydoneproductss team – Figma from Figma",[321,329,331],{"id":322,"label":323,"slug":324,"rank":77,"group":325},130,"Checkout","checkout",{"id":326,"label":327,"slug":328},14,"Payments & Checkout","payments-and-checkout",{"id":186,"label":187,"slug":188,"rank":79,"group":330},{"id":190,"label":191,"slug":192},{"id":290,"label":291,"slug":292,"rank":141,"group":332},{"id":294,"label":295,"slug":296},[334,338,339,340,341],{"id":335,"title":336,"slug":337},227,"Stepper","stepper",{"id":116,"title":117,"slug":118},{"id":120,"title":121,"slug":122},{"id":124,"title":125,"slug":126},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":343},[],{"uuid":345,"title":316,"description":346,"canonical_path":29,"image":347,"width":68,"height":69,"image_alt":319,"kind":71,"patterns":348,"component_categories":363,"app":373},"f0bdbdaa-74fd-45cc-90c7-71665c05b669","Checkout flow where the user specifies the number of additional Figma and FigJam editors to add to their plan via a modal before proceeding to payment.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff0bdbdaa-74fd-45cc-90c7-71665c05b669.png",[349,351,353,358],{"id":322,"label":323,"slug":324,"rank":77,"group":350},{"id":326,"label":327,"slug":328},{"id":186,"label":187,"slug":188,"rank":79,"group":352},{"id":190,"label":191,"slug":192},{"id":354,"label":355,"slug":356,"rank":141,"group":357},96,"Billing Settings","billing-settings",{"id":190,"label":191,"slug":192},{"id":359,"label":360,"slug":361,"rank":150,"group":362},131,"Payment Form","payment-form",{"id":326,"label":327,"slug":328},[364,368,369,370,371,372],{"id":365,"title":366,"slug":367},257,"Input number","input-number",{"id":88,"title":89,"slug":90},{"id":335,"title":336,"slug":337},{"id":116,"title":117,"slug":118},{"id":120,"title":121,"slug":122},{"id":92,"title":93,"slug":94},{"slug":42,"title":41,"logo":44,"categories":374},[],{"family":376,"examples":377},"flows",[],{"family":379,"examples":380},"components",[],{"family":382,"examples":383},"pages",[],[385,387,389,391,393,396,399,402,404,408,412,416],{"label":386,"to":29},"Figma product screens",{"label":388,"to":38},"Figma marketing pages",{"label":390,"to":32},"Figma user flows",{"label":392,"to":35},"Figma UI components",{"label":394,"to":395},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":397,"to":398},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":400,"to":401},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":403,"to":18},"All SaaS app examples",{"label":405,"to":406,"description":407},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":409,"to":410,"description":411},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":413,"to":414,"description":415},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":417,"to":418,"description":419},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":421,"updated_at":422},"2020-03-31T13:55:14.000Z","2026-09-26T00:10:34.000Z"]