{"componentChunkName":"component---src-templates-course-js","path":"/cours/quick-prototyping","result":{"data":{"course":{"title":"Quick Prototyping in Framer X","desc":"Building a simple prototype using basic transitions and scroll","slug":"quick-prototyping","image":{"fluid":{"base64":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAALABQDAREAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAABAUHCf/EACgQAAIBAwIDCQEAAAAAAAAAAAECAwQGEQAFEiExBxMjUWFicYGxwf/EABgBAAMBAQAAAAAAAAAAAAAAAAQFBgcD/8QAIxEAAgEDBAEFAAAAAAAAAAAAAQIDABEhBBIxUUEFI2Gh0f/aAAwDAQACEQMRAD8AzokgiiXid1RemSca2eRIoxucgCplWZjZRT+/7btu0N2t6CmuNN4o62ISV0tIgL03PBxgkHzHxpH6hKulmWPepUk5U3O3wehfrPFF6f3VuVYEW5Fs0XuPZ/RVUyTbbLNPTPGrd4kGFYkcyAWyB6aJkRARuHPXB+aZjTRyANDIbebjg+Rz91P6yNW2ajnI8VnwWz7iPwahnmkkJLtfNNmgiTSxuq2J/TSqeNYa6HgHD0P3nXFcTrbsUFOoUY6q923Gsu1qHyQjsq8+gzn+nWsBFbkVMh2XANf/2Q==","aspectRatio":1.8,"src":"//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=1920&q=90","srcSet":"//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=480&h=267&q=90 480w,\n//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=960&h=533&q=90 960w,\n//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=1920&h=1067&q=90 1920w,\n//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=2880&h=1600&q=90 2880w","srcWebp":"//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=1920&q=90&fm=webp","srcSetWebp":"//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=480&h=267&q=90&fm=webp 480w,\n//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=960&h=533&q=90&fm=webp 960w,\n//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=1920&h=1067&q=90&fm=webp 1920w,\n//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=2880&h=1600&q=90&fm=webp 2880w","sizes":"(max-width: 1920px) 100vw, 1920px"}},"contenu":{"json":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Framer X is more focused on interactions than other design tools. You can code all your interactions if you want to, but you can also link Frames and create simple transitions in minutes. You can use the Scroll view to make things scrollable both vertically and horizontally, or to set the Navigation bar and Tab bar to be sticky.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Downloads","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"To follow this course, you’ll need the ","nodeType":"text"},{"data":{"uri":"https://www.dropbox.com/s/rmuf1zugta9r2tt/FramerXAssets.zip?dl=1"},"content":[{"data":{},"marks":[],"value":"assets","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":". You will also find the Framer X source files to compare against your own work.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Links","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"You can create links between buttons and interactive elements to a screen destination just by pressing ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"L","nodeType":"text"},{"data":{},"marks":[],"value":". Like this you will be creating a prototype.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"c0ofrrc12vltz","contentful_id":"0ofrrc12vltz"}},"id":"c5EEM5o646wXh7UyolP8F3W","type":"Asset","createdAt":"2020-03-28T12:28:35.757Z","updatedAt":"2020-03-28T12:28:35.757Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"5EEM5o646wXh7UyolP8F3W"},"fields":{"title":{"en-US":"13.04.01 Design Components and Stacks-Links"},"file":{"en-US":{"url":"//images.ctfassets.net/0ofrrc12vltz/5EEM5o646wXh7UyolP8F3W/61878f9e3582ecc29a6a6df1b69629bf/13.04.01_Design_Components_and_Stacks-Links.jpg","details":{"size":80922,"image":{"width":1600,"height":838}},"fileName":"13.04.01_Design_Components_and_Stacks-Links.jpg","contentType":"image/jpeg"}}}}},"content":[],"nodeType":"embedded-asset-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"Transition","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"Screen transitions can be set between ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"Push","nodeType":"text"},{"data":{},"marks":[],"value":", ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"Overlay","nodeType":"text"},{"data":{},"marks":[],"value":", ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"Modal","nodeType":"text"},{"data":{},"marks":[],"value":", ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"Instant, Fade","nodeType":"text"},{"data":{},"marks":[],"value":" and ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"Flip","nodeType":"text"},{"data":{},"marks":[],"value":". You can even set the direction.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"pageContext":{"singleSlug":"quick-prototyping"}}}