{"id":3163,"date":"2021-10-19T08:45:07","date_gmt":"2021-10-19T15:45:07","guid":{"rendered":"https:\/\/coderpad.io\/?page_id=3163"},"modified":"2022-01-10T13:46:14","modified_gmt":"2022-01-10T21:46:14","slug":"figjam-coderpad-a-more-visual-way-to-interview","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/product-updates\/figjam-coderpad-a-more-visual-way-to-interview\/","title":{"rendered":"FigJam + CoderPad: A More Visual Way To Interview"},"content":{"rendered":"\n<style>\n.wysiwyg .wp-block-image.unheight-img {\nmax-height: none;\n}\n<\/style>\n\n\n\n<p>We\u2019ve talked about <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/improve-front-end-coding-interviews-with-mockups\/\">how beneficial UI mockups can be for Front-End interviews<\/a> and <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/leverage-visuals-in-back-end-engineering-hiring\/\" data-type=\"URL\" data-id=\"https:\/\/coderpad.io\/blog\/interviewing\/leverage-visuals-in-back-end-engineering-hiring\/\">how visuals can accelerate Back-End interviews<\/a> in the past.&nbsp;<\/p>\n\n\n\n<p>Luckily, you don\u2019t have to give up your favorite tools to utilize these concepts to their fullest potential. Let\u2019s explore how you can integrate your CoderPad interviews within Figma for each candidate.<\/p>\n\n\n\n<p><br>Start by setting up your FigJam file to use in your interview. You\u2019ll want to include any relevant diagrams and visuals required for your candidates\u2019 technical assessment.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee8038a837.png\" alt=\"A systems diagram drawn in FigJam \"\/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>If you want to include a mockup from a Figma file, remember that you can copy and paste assets and frames from a Figma file into a FigJam file<\/p><\/blockquote>\n\n\n\n<p>Once this is done, add the CoderPad Widget. To do this, select \u201cBrowse Widgets\u201d, and search for \u201cCoderPad\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee806bc7fe.png\" alt=\"The &quot;Browse widgets&quot; button in FigJam is under a &quot;show more&quot; button\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee80756491.png\" alt=\"Search for &quot;CoderPad&quot; in the FigJam widget search\"\/><\/figure>\n\n\n\n<p>Once you add a CoderPad widget to your FigJam instance, you\u2019ll see a widget with the ability to \u201cCreate a pad\u201d: press the button to open your CoderPad instance.<br><br>The first time you open a CoderPad widget, it will ask you to add your API key<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee807ab1f7.png\" alt=\"Creating a CoderPad instance in FigJam starts with an API key prompt\"\/><\/figure>\n\n\n\n<p>Once you\u2019ve put in your CoderPad API key, you\u2019ll be greeted with an interview pad created with your default language.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>To get your CoderPad API key, <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/more-interview-resources\/api-key\/\">see our documentation page on retrieving it<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee808e8965.png\" alt=\"You can load in your React questions in CoderPad without having to leave FigJam\"\/><\/figure>\n\n\n\n<p>When you join the pad, it will pre-fill your name from your Figma account. When others join the CoderPad interview from FigJam, it will show who\u2019s currently in the pad in the FigJam widget<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full unheight-img\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"860\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee80aeae6b.png\" alt=\"\" class=\"wp-image-3195\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee80aeae6b.png 633w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee80aeae6b-221x300.png 221w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n\n\n\n<p>Even if you close a CoderPad widget window, it will not create a new pad. Only once you create a new CoderPad FigJam widget will a new pad be created.<br><br>Because of this, if you accidentally close the CoderPad window, you can rejoin the same pad simply by selecting \u201cJoin\u201d.<\/p>\n\n\n<aside class=\"\n    cta-banner\n        \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">CoderPad for FigJam<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/www.figma.com\/coderpad-for-figjam\/\" class=\"button  js-cta--try-the-widget\" data-ga-category=\"CTA\" data-ga-label=\"CoderPad for FigJam|Try the widget\" target=\"_blank\" rel=\"noopener\">Try the widget<\/a>\n                                <\/div>\n                    <\/div>\n            <\/div>\n<\/aside>\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s explore how you can integrate your CoderPad interviews within Figma for each candidate.<\/p>\n","protected":false},"author":1,"featured_media":3186,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[13],"tags":[],"persona":[],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-3163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=3163"}],"version-history":[{"count":14,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3163\/revisions"}],"predecessor-version":[{"id":3868,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3163\/revisions\/3868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/3186"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=3163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=3163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=3163"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=3163"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=3163"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=3163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}