Les types de frame, la barre d’actions par frame, et les actions Build et Focus sur Canvas.
Chaque tuile sur le Canvas est une frame. Les frames sont ce que vous sélectionnez, faites glisser et sur quoi vous agissez. Cette page couvre les types de frame, la barre d’actions par frame qui apparaît à la sélection, et les capacités que vous déclenchez depuis celle-ci : Build et Focus.
Les deux types principaux sont les Artifacts (surfaces vivantes, adossées à une application) et les Designs (maquettes). L’en-tête en haut à gauche de la frame indique de quel type il s’agit.
Le fait qu’une frame Design se comporte comme une image statique ou comme un prototype interactif dépend de la capacité Interactive frames. Lorsqu’elle est activée, les frames Design répondent aux clics et aux saisies de formulaire comme une véritable page ; sinon, elles s’affichent comme un instantané que vous pouvez itérer mais pas parcourir en cliquant.
Voyez à quoi ressemble un design sur différentes tailles d’écran. Demandez à Agent de vous montrer une version mobile, tablette ou ordinateur, par exemple « Montre-moi la version mobile de cette page », et il génère une frame à cette taille :
Pour les frames Artifact (Website, Slides, etc.) et Design, la barre d’actions s’étend sur toute la largeur en haut de la frame.
La barre d'actions d'une frame Design : Build…, Focus, et plus d'options.
Le groupe d’actions se réduit en icônes sur les largeurs étroites et révèle les libellés au fur et à mesure que la frame s’élargit. L’ensemble complet, dans l’ordre de gauche à droite :
Ouvre un menu listant chaque Artifact du projet — choisissez-en un pour y appliquer le design, ou choisissez Build this design pour créer un nouvel Artifact. Frames Design uniquement. Voir Build.
Focus
Passe en mode focus, en développant la frame comme vue principale.
More (…)
Actions supplémentaires sur la frame. Copier, dupliquer, réorganiser et exporter se trouvent aussi dans le menu du clic droit du tableau.
Les frames d’application (Website, Slides, Mobile app) affichent Focus et plus d’options ; les frames Design ajoutent Build… avant celles-ci. Pour créer de nouvelles directions à partir d’une frame sélectionnée, suivez ses suggestions.Sélectionner une frame l’attache aussi au prochain message de chat Agent sous forme d’instantané — voir Ce qui se trouve sur le canvas.
La barre d’actions respecte le mode lecture seule. Lorsque Canvas est verrouillé dans un contexte de tâche en arrière-plan, les actions d’itération se masquent et seul Focus reste disponible.
Sélectionner une frame fait apparaître des suggestions à côté d’elle : des directions en un clic ancrées dans ce que vous regardez, comme une mise en page différente, une nouvelle ambiance, ou une page que votre design sous-entend. Chacune se génère sous forme de nouvelle frame à côté de la source, de sorte que l’originale reste intacte et que vous puissiez comparer.
Le menu Build… sur une frame Design sélectionnée fait passer le design au rang d’application vivante et fonctionnelle. Le même menu couvre aussi l’application du design à un Artifact déjà existant.
Choisir Build this design dans le menu démarre un nouvel Artifact à partir de la frame Design sélectionnée. Le nouvel Artifact atterrit dans la liste des artifacts du projet et devient une application vivante et fonctionnelle. Build nécessite Core ou Pro.
Le menu Build… liste chaque Artifact du projet. En choisir un applique les changements du Design sélectionné à cet Artifact — Agent réécrit le code de l’Artifact pour correspondre au design, en laissant la frame Design sur le Canvas pour référence.
Toolbar — la barre d’outils flottante ; Generate crée de nouvelles frames.
Elements — les éléments individuels à l’intérieur d’une frame.
Visual Editor — modifications au niveau des éléments à l’intérieur d’une frame en focus.
Cette page vous a-t-elle été utile ?
{"docsConfig":{"theme":"aspen","$schema":"https://mintlify.com/docs.json","name":"Replit","colors":{"primary":"#FF3C00","light":"#FF3C00","dark":"#FF3C00"},"logo":{"light":"https://mintcdn.com/replit/j4of5To8jzehz0JK/logo/light.svg?fit=max\u0026auto=format\u0026n=j4of5To8jzehz0JK\u0026q=85\u0026s=6209cb5927b56fd1781133af05428373","dark":"https://mintcdn.com/replit/j4of5To8jzehz0JK/logo/dark.svg?fit=max\u0026auto=format\u0026n=j4of5To8jzehz0JK\u0026q=85\u0026s=9cbba158300d48c49d8b888e71015495","href":"/welcome"},"favicon":"https://mintcdn.com/replit/CmOMKRnamiqG44eH/favicon.ico?fit=max\u0026auto=format\u0026n=CmOMKRnamiqG44eH\u0026q=85\u0026s=c89a6df6f537373c946c7a5f0ac65475","appearance":{"default":"light"},"background":{"color":{"light":"#F6F5F4","dark":"#1E1E1F"}},"navbar":{"links":[],"primary":{"type":"button","label":"Start Building","href":"https://replit.com?ref=docs"}},"footer":{"socials":{"x":"https://x.com/replit","linkedin":"https://www.linkedin.com/company/repl-it","youtube":"https://www.youtube.com/@replit"}},"seo":{"metatags":{"og:site_name":"Replit Docs","twitter:site":"@replit","twitter:creator":"@replit","author":"Replit"},"indexing":"all"},"fonts":{"heading":{"family":"ABC Diatype Plus","weight":400,"source":"https://cdn.replit.com/dotcom/fonts/ABCDiatypePlusVariable.woff2","format":"woff2"},"body":{"family":"ABC Diatype Plus","weight":400,"source":"https://cdn.replit.com/dotcom/fonts/ABCDiatypePlusVariable.woff2","format":"woff2"}},"integrations":{"segment":{"key":"dMePKGC4BqfBivpe0Hvl8IoPpzSHgjdX"}},"contextual":{"options":["copy","view"],"display":"header"},"thumbnails":{"appearance":"light","background":"https://mintcdn.com/replit/j4of5To8jzehz0JK/thumb.png?fit=max\u0026auto=format\u0026n=j4of5To8jzehz0JK\u0026q=85\u0026s=a7db7f0256b2fa06810fb4d378e63cc5","fonts":{"family":"ABC Diatype Plus"}},"styling":{"latex":true},"navigation":{"languages":[{"language":"en","href":"welcome"},{"language":"fr","navbar":{"links":[],"primary":{"type":"button","label":"Commencer à créer","href":"https://replit.com?ref=docs"}},"href":"fr/welcome"},{"language":"pt","hidden":false,"navbar":{"links":[],"primary":{"type":"button","label":"Comece a criar","href":"https://replit.com?ref=docs"}},"href":"pt/welcome"},{"language":"ja","hidden":false,"navbar":{"links":[],"primary":{"type":"button","label":"作成を開始","href":"https://replit.com?ref=docs"}},"href":"ja/welcome"},{"language":"ko","hidden":false,"navbar":{"links":[],"primary":{"type":"button","label":"빌드 시작하기","href":"https://replit.com?ref=docs"}},"href":"ko/welcome"}]}},"deployment":{"deploymentMetadataValue":{"subdomain":"replit","hasAudioNarration":false,"actualSubdomain":"replit","customDomains":["docs.replit.com","docs.repl.it"],"gitSource":{"type":"github","owner":"replit","repo":"replit-docs","deployBranch":"main","contentDirectory":"docs","isPrivate":true,"mountPath":"","label":""},"feedback":{"thumbs":true,"issues":true,"edits":false},"entitlements":{"AI_CHAT":{"status":"DISABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"CONTEXTUAL_FEEDBACK":{"status":"ENABLED"},"CODE_SNIPPET_FEEDBACK":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"DISABLED"}},"buildId":"6aee55254219cf14872521f4","clientVersion":"0.0.4087","searchFilterCounts":[{"language":"en","tag":"Features","count":360},{"language":"fr","tag":"Fonctionnalités","count":359},{"language":"ja","tag":"機能","count":359},{"language":"ko","tag":"기능","count":359},{"language":"pt","tag":"Funcionalidades","count":359},{"language":"en","tag":"Changelog","count":100},{"language":"fr","tag":"Journal des modifications","count":99},{"language":"ja","tag":"変更履歴","count":99},{"language":"ko","tag":"변경 내역","count":99},{"language":"pt","tag":"Registro de alterações","count":99},{"language":"en","tag":"Apps","count":41},{"language":"fr","tag":"Apps","count":41},{"language":"ja","tag":"Apps","count":41},{"language":"ko","tag":"Apps","count":41},{"language":"pt","tag":"Apps","count":41},{"language":"en","tag":"Enterprise","count":40},{"language":"fr","tag":"Entreprise","count":40},{"language":"ja","tag":"Enterprise","count":40},{"language":"ko","tag":"Enterprise","count":40},{"language":"pt","tag":"Enterprise","count":40},{"language":"en","tag":"Use cases","count":39},{"language":"fr","tag":"Use cases","count":39},{"language":"ja","tag":"Use cases","count":39},{"language":"ko","tag":"Use cases","count":39},{"language":"pt","tag":"Use cases","count":39},{"language":"en","tag":"Chats","count":25},{"language":"en","tag":"Designs","count":25},{"language":"fr","tag":"Chats","count":25},{"language":"fr","tag":"Designs","count":25},{"language":"ja","tag":"Chats","count":25},{"language":"ja","tag":"Designs","count":25},{"language":"ko","tag":"Chats","count":25},{"language":"ko","tag":"Designs","count":25},{"language":"pt","tag":"Chats","count":25},{"language":"pt","tag":"Designs","count":25},{"language":"en","tag":"Trust \u0026 Billing","count":23},{"language":"fr","tag":"Confiance et facturation","count":23},{"language":"ja","tag":"信頼と請求","count":23},{"language":"ko","tag":"신뢰 및 결제","count":23},{"language":"pt","tag":"Confiança e faturamento","count":23},{"language":"en","tag":"Web","count":22},{"language":"fr","tag":"Web","count":22},{"language":"ja","tag":"Web","count":22},{"language":"ko","tag":"Web","count":22},{"language":"pt","tag":"Web","count":22},{"language":"en","tag":"Help","count":20},{"language":"fr","tag":"Help","count":20},{"language":"ja","tag":"Help","count":20},{"language":"ko","tag":"Help","count":20},{"language":"pt","tag":"Help","count":20}]},"assistantConfig":{"deflection":{"enabled":true,"email":"support@replit.com"}},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"comment-mode","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"styles.css","href":"/_mintlify/custom/replit/795eee5cda55dee3/styles.css"}],"page":{"pagePath":"fr/design/frames","slug":"/fr/design/frames","pageMetadata":{"title":"Frames","sidebarTitle":"Frames","description":"Les types de frame, la barre d'actions par frame, et les actions Build et Focus sur Canvas.","icon":"square-dashed","href":"/fr/design/frames"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Les types de frame, la barre d’actions par frame, et les actions Build et Focus sur Canvas.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,li:`li`,p:`p`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{Frame,Heading,Note,OptimizedImage,Step,Steps,Table}=_components;if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Note)_missingMdxReference(`Note`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Step)_missingMdxReference(`Step`,true);if(!Steps)_missingMdxReference(`Steps`,true);if(!Table)_missingMdxReference(`Table`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`Chaque tuile sur le Canvas est une `,_jsx(_components.strong,{children:`frame`}),`. Les frames sont ce que vous sélectionnez, faites glisser et sur quoi vous agissez. Cette page couvre les types de frame, la barre d’actions par frame qui apparaît à la sélection, et les capacités que vous déclenchez depuis celle-ci : Build et Focus.`]}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=5cd2330c89bbdedfb249151ee582f070`,alt:`Canvas avec trois frames disposées sur le tableau : un Website (Scroll Hero), un APEX X1 Design System, et une maquette Design de la supercar APEX X1, avec la barre d'outils flottante (Chat, Draw, Edit, Generate) en bas`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1255`,height:`1255`,\"data-path\":`images/replitai/canvas-overview.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=d06d2d847a1e7825d9ed02721cb45ef4 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=d36061ea203905e997c06543df7f5e90 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=4b12d30a5272d12ddee82e069b8cf956 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=35ec06ddafe8185d048022c5ddb9b1c1 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=9603f817be4e8e6939f5fd602e758380 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=665321e78f3e12f9707654cde1969bcb 2500w`})}),`\n`,_jsx(Heading,{level:`2`,id:`types-de-frame`,children:`Types de frame`}),`\n`,_jsxs(_components.p,{children:[`Les deux types principaux sont les `,_jsx(_components.strong,{children:`Artifacts`}),` (surfaces vivantes, adossées à une application) et les `,_jsx(_components.strong,{children:`Designs`}),` (maquettes). L’en-tête en haut à gauche de la frame indique de quel type il s’agit.`]}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Type`}),_jsx(_components.th,{children:`Étiquette d’en-tête`}),_jsx(_components.th,{children:`Adossé à`}),_jsx(_components.th,{children:`Interagit comme une application vivante ?`}),_jsx(_components.th,{children:`Convertible en véritable application ?`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Artifact`}),_jsxs(_components.td,{children:[_jsx(_components.strong,{children:`Website`}),`, `,_jsx(_components.strong,{children:`Slides`}),`, etc.`]}),_jsx(_components.td,{children:`Un artifact en cours d’exécution`}),_jsx(_components.td,{children:`Oui`}),_jsx(_components.td,{children:`Déjà une application.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Mobile artifact`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Mobile app`})}),_jsx(_components.td,{children:`Un artifact en cours d’exécution`}),_jsx(_components.td,{children:`Oui (dans le simulateur)`}),_jsx(_components.td,{children:`Déjà une application.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Design`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Design`})}),_jsx(_components.td,{children:`Maquette statique / interactive`}),_jsx(_components.td,{children:`Frame interactive uniquement`}),_jsxs(_components.td,{children:[`Oui — via le menu `,_jsx(_components.strong,{children:`Build…`}),` par frame. Voir `,_jsx(_components.a,{href:`#build`,children:`Build`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Image`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Image`})}),_jsx(_components.td,{children:`PNG / JPG généré`}),_jsx(_components.td,{children:`Non`}),_jsx(_components.td,{children:`Non — à utiliser comme référence.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Video`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Video`})}),_jsx(_components.td,{children:`Vidéo générée`}),_jsx(_components.td,{children:`Non`}),_jsx(_components.td,{children:`Non.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Vector graphic`}),_jsx(_components.td,{children:_jsx(_components.strong,{children:`Graphic`})}),_jsx(_components.td,{children:`SVG généré`}),_jsx(_components.td,{children:`Non`}),_jsx(_components.td,{children:`Non — à intégrer dans une véritable application.`})]})]})]}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[`Le fait qu’une frame Design se comporte comme une image statique ou comme un prototype interactif dépend de la capacité `,_jsx(_components.strong,{children:`Interactive frames`}),`. Lorsqu’elle est activée, les frames Design répondent aux clics et aux saisies de formulaire comme une véritable page ; sinon, elles s’affichent comme un instantané que vous pouvez itérer mais pas parcourir en cliquant.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`aperçu-sur-différents-appareils`,children:`Aperçu sur différents appareils`}),`\n`,_jsx(_components.p,{children:`Voyez à quoi ressemble un design sur différentes tailles d’écran. Demandez à Agent de vous montrer une version mobile, tablette ou ordinateur, par exemple « Montre-moi la version mobile de cette page », et il génère une frame à cette taille :`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Mobile`}),` : 390 × 844`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Tablet`}),` : 768 × 1024`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Desktop`}),` : 1280 × 720`]}),`\n`]}),`\n`,_jsx(Heading,{level:`2`,id:`barre-d’actions-par-frame`,children:`Barre d’actions par frame`}),`\n`,_jsx(_components.p,{children:`La sélection d’une frame fait apparaître une barre d’actions. Les actions dépendent du type de la frame.`}),`\n`,_jsx(Heading,{level:`3`,id:`frames-artifact-et-design`,children:`Frames Artifact et Design`}),`\n`,_jsx(_components.p,{children:`Pour les frames Artifact (Website, Slides, etc.) et Design, la barre d’actions s’étend sur toute la largeur en haut de la frame.`}),`\n`,_jsx(Frame,{caption:`La barre d'actions d'une frame Design : Build…, Focus, et plus d'options.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=c767372a08966097abccb48bf11591c7`,alt:`Canvas avec une frame Design APEX X1 sélectionnée, montrant la barre d'actions par frame en haut avec l'étiquette de type et les actions Build, Focus et plus d'options, la frame attachée sous forme de puce dans la zone de prompt du chat`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1290`,height:`1290`,\"data-path\":`images/replitai/canvas-frame-action-bar.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=f78ad071f18fd801f51a093f1f8585c7 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=06ce7dfd524174f04bb975741ea8f56d 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=74891f932f9b9d52ea243e4fe13b16a5 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=408eeae9da878b22cee56a9970447ab0 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=ffec2489043c763cb85bab90804828a8 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=bf51528515e672cea2365f3de7517218 2500w`})}),`\n`,_jsx(_components.p,{children:`Le groupe d’actions se réduit en icônes sur les largeurs étroites et révèle les libellés au fur et à mesure que la frame s’élargit. L’ensemble complet, dans l’ordre de gauche à droite :`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Action`}),_jsx(_components.th,{children:`Ce que ça fait`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Export`}),_jsxs(_components.td,{children:[`Télécharge la frame en PNG. Voir `,_jsx(_components.a,{href:`/fr/design/canvas#export-a-frame-as-png`,children:`Exporter une frame en PNG`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Build…`}),_jsxs(_components.td,{children:[`Ouvre un menu listant chaque Artifact du projet — choisissez-en un pour y appliquer le design, ou choisissez `,_jsx(_components.strong,{children:`Build this design`}),` pour créer un nouvel Artifact. Frames Design uniquement. Voir `,_jsx(_components.a,{href:`#build`,children:`Build`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Focus`}),_jsx(_components.td,{children:`Passe en mode focus, en développant la frame comme vue principale.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`More (…)`}),_jsxs(_components.td,{children:[`Actions supplémentaires sur la frame. Copier, dupliquer, réorganiser et exporter se trouvent aussi dans le `,_jsx(_components.a,{href:`/fr/design/canvas#right-click-menu`,children:`menu du clic droit`}),` du tableau.`]})]})]})]}),`\n`,_jsxs(_components.p,{children:[`Les frames d’application (Website, Slides, Mobile app) affichent Focus et plus d’options ; les frames Design ajoutent Build… avant celles-ci. Pour créer de nouvelles directions à partir d’une frame sélectionnée, suivez ses `,_jsx(_components.a,{href:`/fr/design/explore-suggestions`,children:`suggestions`}),`.`]}),`\n`,_jsxs(_components.p,{children:[`Sélectionner une frame l’attache aussi au prochain message de chat Agent sous forme d’instantané — voir `,_jsx(_components.a,{href:`/fr/design/canvas#what-lives-on-the-canvas`,children:`Ce qui se trouve sur le canvas`}),`.`]}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[`La barre d’actions respecte le `,_jsx(_components.strong,{children:`mode lecture seule`}),`. Lorsque Canvas est verrouillé dans un contexte de tâche en arrière-plan, les actions d’itération se masquent et seul Focus reste disponible.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`frames-média`,children:`Frames média`}),`\n`,_jsx(_components.p,{children:`Les frames Image, Video et Vector graphic affichent une petite barre d’actions flottante au-dessus de la frame. Les trois types partagent :`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Replace media`}),` : téléversez un nouveau fichier pour le substituer dans la frame, en conservant sa position et sa taille sur Canvas.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Download`}),` : enregistrez le fichier média sur votre ordinateur.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Alt text`}),` : ajoutez un texte alternatif pour l’accessibilité et afin qu’Agent dispose de plus de contexte lorsque la frame est référencée.`]}),`\n`]}),`\n`,_jsx(Frame,{caption:`La barre d'actions d'une frame vidéo : Replace media, Download et Alt text.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=dde933bc1e78e6cc413a9dd15f73fc2e`,alt:`Une frame vidéo sélectionnée d'une supercar bleue sur Canvas avec sa barre d'actions flottante au-dessus, montrant Replace media, Download (avec une infobulle indiquant « Download original ») et les contrôles Alt text.`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1252`,height:`1252`,\"data-path\":`images/replitai/canvas-frame-video-actions.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=a6934949e42b5753b11ca6dbc6821140 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=7cce73da51e2bdda044990dff00ed309 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=6a4e93f1c3e962846a7d47e569befd10 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=f2ad4b15c0c550070f6cf40f0172ad1e 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=1182bb4b2b46f74c7596a1b914c61acb 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-video-actions.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=b6cf3ec11c245b5780a5fa9054ad7c9b 2500w`})}),`\n`,_jsx(_components.p,{children:`Les frames Image ajoutent deux contrôles supplémentaires :`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Crop`}),` : rognez l’image directement sur Canvas.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Generate video`}),` : générez un clip vidéo à partir de l’image.`]}),`\n`]}),`\n`,_jsx(Frame,{caption:`La barre d'actions d'une frame image ajoute Crop et Generate video.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=95c35379724d57a518efa0578fe0183c`,alt:`Une frame image sélectionnée d'une supercar jaune sur Canvas avec sa barre d'actions flottante au-dessus, montrant les contrôles Replace media, Crop, Download, Alt text et Generate video.`,\"data-og-width\":`1600`,width:`1600`,\"data-og-height\":`1002`,height:`1002`,\"data-path\":`images/replitai/canvas-frame-image-actions.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=f5e91c28486e80fb1f1929cf08927229 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=e581a32796ebeb696c61750fa6da3929 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=66b533a1308bcf02380f3fd60420ba42 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=8210cb95c7591acc604a2da833ef30c0 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=c2e9a84035ae29f2676ba7b8a3a0bf51 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-image-actions.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=7cc351ad3a04a5c19bce8e4aeca3c6be 2500w`})}),`\n`,_jsx(Heading,{level:`2`,id:`explorer-de-nouvelles-directions`,children:`Explorer de nouvelles directions`}),`\n`,_jsxs(_components.p,{children:[`Sélectionner une frame fait apparaître des `,_jsx(_components.a,{href:`/fr/design/explore-suggestions`,children:`suggestions`}),` à côté d’elle : des directions en un clic ancrées dans ce que vous regardez, comme une mise en page différente, une nouvelle ambiance, ou une page que votre design sous-entend. Chacune se génère sous forme de nouvelle frame à côté de la source, de sorte que l’originale reste intacte et que vous puissiez comparer.`]}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=7f39fec76cde3f60e3a20e6c5a13d8db`,alt:`Une frame Website sélectionnée montrant une image principale d'une supercar APEX X1, avec un panneau Suggested next steps à côté proposant des puces de suggestion telles que Explore different approaches, Try different layouts, Explore different vibes et Surprise me`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1254`,height:`1254`,\"data-path\":`images/design/replit-design/ambient-iq.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=280\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=6424e030ddfc68ec83dba132241c8312 280w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=560\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=3f696ff05b245116f4ca530e745a105a 560w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=840\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=64cdc56d1cad7bcc856fdf9ecb0c0cc4 840w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=1100\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=9d63a1c84bb235bc946fdd14677d43a9 1100w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=1650\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=89094c99cd81d120f2a96c01cc4ab7db 1650w, https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?w=2500\u0026fit=max\u0026auto=format\u0026n=9Q_lVrxG2Dh35jz1\u0026q=85\u0026s=d016498f7219df192c44c01e5657c6fa 2500w`})}),`\n`,_jsx(Heading,{level:`2`,id:`build`,children:`Build`}),`\n`,_jsxs(_components.p,{children:[`Le menu `,_jsx(_components.strong,{children:`Build…`}),` sur une frame Design sélectionnée fait passer le design au rang d’application vivante et fonctionnelle. Le même menu couvre aussi l’application du design à un Artifact déjà existant.`]}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=494228a2a81e9f943376d78e77b96417`,alt:`Le menu Build ouvert sur une frame Design sélectionnée (APEX X1 Exact Replica) avec l'en-tête « Build or apply your designs », montrant « Build this design », qui crée un nouvel artifact, et « Apply to an existing creation » listant l'APEX X1 Design System du projet et son site Scroll Hero`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1153`,height:`1153`,\"data-path\":`images/replitai/canvas-build-menu.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=280\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=74596a4d587e510ab4e141d76d03475e 280w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=560\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=01c35e7f4a22a89a6b1964f3023bb05e 560w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=840\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=63813a879efefe9d8c44261c5e4c2e1f 840w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=1100\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=b55dc31764f9b6b19e6363090da177e7 1100w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=1650\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=7d63b7d96ff58ff190aa47763a45a8b3 1650w, https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?w=2500\u0026fit=max\u0026auto=format\u0026n=OIImiKPshhawqFXK\u0026q=85\u0026s=18d713163ef69eee37d34f4c04380bac 2500w`})}),`\n`,_jsx(Heading,{level:`3`,id:`build-this-design`,children:`Build this design`}),`\n`,_jsxs(_components.p,{children:[`Choisir `,_jsx(_components.strong,{children:`Build this design`}),` dans le menu démarre un nouvel Artifact à partir de la frame Design sélectionnée. Le nouvel Artifact atterrit dans la liste des artifacts du projet et devient une application vivante et fonctionnelle. Build nécessite Core ou Pro.`]}),`\n`,_jsx(Heading,{level:`3`,id:`apply-to-an-existing-artifact`,children:`Apply to an existing Artifact`}),`\n`,_jsx(_components.p,{children:`Le menu Build… liste chaque Artifact du projet. En choisir un applique les changements du Design sélectionné à cet Artifact — Agent réécrit le code de l’Artifact pour correspondre au design, en laissant la frame Design sur le Canvas pour référence.`}),`\n`,_jsx(Heading,{level:`2`,id:`mode-focus`,children:`Mode focus`}),`\n`,_jsx(_components.p,{children:`Le mode focus vous permet de travailler avec une frame sélectionnée en taille réelle tout en restant dans Design.`}),`\n`,_jsxs(Steps,{children:[_jsxs(Step,{title:`Choisir Focus sur une frame`,children:[_jsxs(_components.p,{children:[`Sélectionnez une frame, puis choisissez `,_jsx(_components.strong,{children:`Focus`}),` dans sa barre d’actions.`]}),_jsx(Frame,{caption:`L'action Focus dans la barre d'actions d'une frame sélectionnée.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=90cf0b08e2ca6d5db6a561daff8bde3a`,alt:`Une frame Design sélectionnée sur Canvas avec l'action Focus mise en évidence dans la barre d'actions de la frame.`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1254`,height:`1254`,\"data-path\":`images/design/replit-design/focus-before.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=280\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=744ee5edb7767dd6f4d3e82bce88b6e3 280w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=560\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=2f4ea7116edffec46313521f58e89756 560w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=840\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=0873c0df8d3261f518083916791e38f0 840w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=683449798e0a358e5a198322fbd9fac6 1100w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=7a86b1c67db34e8ac8e189323c988815 1650w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-before.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=4e7847885c5ee15017acb615c9fefb45 2500w`})})]}),_jsxs(Step,{title:`Travailler en taille réelle`,children:[_jsx(_components.p,{children:`La frame remplit la vue, ce qui vous permet de travailler dessus de près sans le reste du tableau.`}),_jsx(Frame,{caption:`Mode focus`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=045be2bf21cc136b73d93ff1c2d32513`,alt:`Mode focus montrant une frame Design remplissant la vue et un bouton Exit focus en haut du tableau.`,\"data-og-width\":`2000`,width:`2000`,\"data-og-height\":`1254`,height:`1254`,\"data-path\":`images/design/replit-design/focus-mode.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=280\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=0480ae7bd972ea1896f8287a96d0bf62 280w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=560\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=c555b4cfe369895a0740cf097c216322 560w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=840\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=8e136f5fa7b6442d1039164536a1a2ee 840w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=4649aaae9e191990d6da9a74cdec9651 1100w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=6940b6f32d958c7a6442723180afe028 1650w, https://mintcdn.com/replit/0WSH0CZtbcWq7rzd/images/design/replit-design/focus-mode.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0WSH0CZtbcWq7rzd\u0026q=85\u0026s=ae717f5e13cf10258c15531c1f448cf2 2500w`})})]}),_jsx(Step,{title:`Revenir au canvas`,children:_jsxs(_components.p,{children:[`Sélectionnez `,_jsx(_components.strong,{children:`Exit focus`}),` en haut du tableau pour revenir au canvas.`]})})]}),`\n`,_jsx(Heading,{level:`2`,id:`pages-liées`,children:`Pages liées`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/fr/design/canvas`,children:`Canvas`}),` — vue d’ensemble et anatomie.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/fr/design/toolbar`,children:`Toolbar`}),` — la barre d’outils flottante ; Generate crée de nouvelles frames.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/fr/design/elements`,children:`Elements`}),` — les éléments individuels à l’intérieur d’une frame.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/fr/design/visual-editor`,children:`Visual Editor`}),` — modifications au niveau des éléments à l’intérieur d’une frame en focus.`]}),`\n`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Frames","sidebarTitle":"Frames","description":"Les types de frame, la barre d'actions par frame, et les actions Build et Focus sur Canvas.","icon":"square-dashed","href":"/fr/design/frames"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Types de frame","slug":"types-de-frame","depth":2,"children":[]},{"title":"Aperçu sur différents appareils","slug":"aperçu-sur-différents-appareils","depth":2,"children":[]},{"title":"Barre d’actions par frame","slug":"barre-d’actions-par-frame","depth":2,"children":[{"title":"Frames Artifact et Design","slug":"frames-artifact-et-design","depth":3,"children":[]},{"title":"Frames média","slug":"frames-média","depth":3,"children":[]}]},{"title":"Explorer de nouvelles directions","slug":"explorer-de-nouvelles-directions","depth":2,"children":[]},{"title":"Build","slug":"build","depth":2,"children":[{"title":"Build this design","slug":"build-this-design","depth":3,"children":[]},{"title":"Apply to an existing Artifact","slug":"apply-to-an-existing-artifact","depth":3,"children":[]}]},{"title":"Mode focus","slug":"mode-focus","depth":2,"children":[]},{"title":"Pages liées","slug":"pages-liées","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"replit","siteName":"Replit","title":"Frames - Replit","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{"en":{"href":"/design/frames","matchLevel":1},"fr":{"href":"/fr/design/frames","matchLevel":0},"pt":{"href":"/pt/design/frames","matchLevel":1},"ja":{"href":"/ja/design/frames","matchLevel":1},"ko":{"href":"/ko/design/frames","matchLevel":1}}},"lastModified":"2026-07-31T13:06:44.544Z","originalFileLocation":"fr/design/frames.mdx","locale":"fr"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"light\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Les types de frame, la barre d\u0026#x27;actions par frame, et les actions Build et Focus sur Canvas.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Replit\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Frames - Replit\">\u003cmeta data-mint-head property=\"og:description\" content=\"Les types de frame, la barre d\u0026#x27;actions par frame, et les actions Build et Focus sur Canvas.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Replit Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.replit.com/fr/design/frames\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://replit.mintlify.site/_mintlify/api/og/v2?division=Core+components\u0026amp;title=Frames\u0026amp;description=Les+types+de+frame%2C+la+barre+d%27actions+par+frame%2C+et+les+actions+Build+et+Focus+sur+Canvas.\u0026amp;theme=c1942b8f9ebd95f98c5c7c23\u0026amp;signature=3372ec273606a2513b7354c7a6400c7042e157ad626ffc5d7765abbcf48e6483\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Frames - Replit\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Les types de frame, la barre d\u0026#x27;actions par frame, et les actions Build et Focus sur Canvas.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://replit.mintlify.site/_mintlify/api/og/v2?division=Core+components\u0026amp;title=Frames\u0026amp;description=Les+types+de+frame%2C+la+barre+d%27actions+par+frame%2C+et+les+actions+Build+et+Focus+sur+Canvas.\u0026amp;theme=c1942b8f9ebd95f98c5c7c23\u0026amp;signature=3372ec273606a2513b7354c7a6400c7042e157ad626ffc5d7765abbcf48e6483\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/replit/bmCuvIiWqqoyeE2o/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Replit\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#FF3C00\">\u003cmeta data-mint-head name=\"twitter:creator\" content=\"@replit\">\u003cmeta data-mint-head name=\"author\" content=\"Replit\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.replit.com/fr/design/frames\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/fr/design/frames.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"fr\" href=\"https://docs.replit.com/fr/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://docs.replit.com/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"pt\" href=\"https://docs.replit.com/pt/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ja\" href=\"https://docs.replit.com/ja/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ko\" href=\"https://docs.replit.com/ko/design/frames\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"x-default\" href=\"https://docs.replit.com/design/frames\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.replit.com/#organization\",\"name\":\"Replit\",\"url\":\"https://docs.replit.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/replit/j4of5To8jzehz0JK/logo/light.svg?fit=max\u0026auto=format\u0026n=j4of5To8jzehz0JK\u0026q=85\u0026s=6209cb5927b56fd1781133af05428373\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.replit.com#website\",\"name\":\"Replit\",\"url\":\"https://docs.replit.com\",\"publisher\":{\"@id\":\"https://docs.replit.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.replit.com/fr/design/frames#webpage\",\"url\":\"https://docs.replit.com/fr/design/frames\",\"name\":\"Frames\",\"description\":\"Les types de frame, la barre d'actions par frame, et les actions Build et Focus sur Canvas.\",\"dateModified\":\"2026-07-31T13:06:44.544Z\",\"isPartOf\":{\"@id\":\"https://docs.replit.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.replit.com/fr/design/frames#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.replit.com/fr/design/frames#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Core components\",\"item\":\"https://docs.replit.com/fr/design/core-components\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frames\",\"item\":\"https://docs.replit.com/fr/design/frames\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.replit.com/fr/design/frames#article\",\"headline\":\"Frames\",\"name\":\"Frames\",\"description\":\"Les types de frame, la barre d'actions par frame, et les actions Build et Focus sur Canvas.\",\"url\":\"https://docs.replit.com/fr/design/frames\",\"mainEntityOfPage\":{\"@id\":\"https://docs.replit.com/fr/design/frames#webpage\"},\"dateModified\":\"2026-07-31T13:06:44.544Z\",\"publisher\":{\"@id\":\"https://docs.replit.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.replit.com#website\"}}]}\u003c/script>","siteName":"Replit","nav":{"global":null,"languages":[{"language":"en","pages":[{"title":"en","href":"/design/frames"}]},{"language":"fr","navbar":{"links":[],"primary":{"type":"button","label":"Commencer à créer","href":"https://replit.com?ref=docs"}},"tabs":[{"tab":"Home","pages":[{"title":"Home","href":"/fr/welcome"}]},{"tab":"Chats","pages":[{"title":"Chats","href":"/fr/chat/overview"}]},{"tab":"Apps","dropdowns":[{"dropdown":"Web","icon":"globe","pages":[{"group":"Démarrages rapides","pages":[{"title":"Créez votre première application","sidebarTitle":"Votre première application","icon":"rocket","href":"/fr/build/your-first-app"},{"title":"Créer et publier à partir d'un template","sidebarTitle":"Créer à partir d'un template","icon":"palette","href":"/fr/build/build-and-publish-from-template"},{"title":"Créer avec le mode Free","sidebarTitle":"Créer avec le mode Free","icon":"seedling","href":"/fr/build/build-with-free-mode"},{"title":"Publier votre application","sidebarTitle":"Publier votre application","icon":"cloud-arrow-up","href":"/fr/build/publish-your-app"}]},{"group":"Build paths","pages":[{"title":"Prototyper une idée de produit","sidebarTitle":"Prototyper une idée","icon":"lightbulb","href":"/fr/build/prototype-an-idea"},{"title":"Lancer une page d'accueil","sidebarTitle":"Lancer une page d'accueil","icon":"rectangle-list","href":"/fr/build/landing-page"},{"title":"Créer une boutique Shopify","sidebarTitle":"Créer une boutique Shopify","icon":"bag-shopping","href":"/fr/build/ecommerce-store"},{"title":"Créer un tableau de bord à partir de données","sidebarTitle":"Créer un tableau de bord","icon":"chart-simple","href":"/fr/build/dashboard"},{"title":"Créer une application mobile","sidebarTitle":"Créer une application mobile","icon":"mobile-screen","href":"/fr/build/mobile-app"}]},{"group":"Grow your app","pages":[{"title":"Ajouter une connexion","sidebarTitle":"Ajouter une connexion","icon":"user-lock","href":"/fr/build/add-login"},{"title":"Ajouter une base de données","sidebarTitle":"Ajouter une base de données","icon":"database","href":"/fr/build/add-database"},{"title":"Ajouter des intégrations","sidebarTitle":"Ajouter des intégrations","icon":"plug","href":"/fr/build/add-integrations"},{"title":"Ajouter un domaine personnalisé","sidebarTitle":"Ajouter un domaine personnalisé","icon":"globe","href":"/fr/build/add-custom-domain"}]},{"group":"Publish and operate","pages":[{"title":"Acheter un domaine","sidebarTitle":"Acheter un domaine","icon":"cart-shopping","href":"/fr/build/domain-purchasing"},{"title":"Activer le widget de feedback","sidebarTitle":"Activer le widget de feedback","icon":"comment","href":"/fr/build/enable-feedback"},{"title":"Améliorer le référencement de votre application","sidebarTitle":"Améliorer le SEO","icon":"magnifying-glass-chart","href":"/fr/build/improve-seo"},{"title":"Résoudre les problèmes de publication","icon":"triangle-exclamation","href":"/fr/build/troubleshooting"}]},{"group":"Connect \u0026 integrate","pages":[{"title":"Utiliser les Compétences Agent","sidebarTitle":"Utiliser les Compétences Agent","icon":"puzzle-piece","href":"/fr/build/use-agent-skills"},{"title":"Connecter via MCP","sidebarTitle":"Connecter via MCP","icon":"server","href":"/fr/build/connect-via-mcp"}]},{"group":"Collaborate","pages":[{"title":"Inviter des coéquipiers","sidebarTitle":"Inviter des coéquipiers","icon":"user-plus","href":"/fr/build/invite-teammates"},{"title":"Créer un espace de travail d'équipe","sidebarTitle":"Créer un espace de travail d'équipe","icon":"users-rectangle","href":"/fr/build/create-a-team-workspace"}]},{"group":"Importer","pages":[{"title":"Importer depuis un fournisseur","sidebarTitle":"Importer depuis un fournisseur","icon":"file-import","href":"/fr/build/import-from-providers"}]}]},{"dropdown":"Mobile","icon":"mobile","groups":[{"group":"Démarrages rapides","pages":[{"title":"Démarrer votre première application mobile","sidebarTitle":"Démarrer votre application mobile","icon":"wand-magic-sparkles","href":"/fr/build/mobile-first-app"},{"title":"Aperçu et test sur votre téléphone","sidebarTitle":"Tester avec Expo Go","icon":"mobile","href":"/fr/build/mobile-preview-testing"}]},{"group":"Publish for iOS","pages":[{"title":"Configurer votre compte Apple Developer","sidebarTitle":"Configurer votre compte","icon":"apple","href":"/fr/build/mobile-apple-account"},{"title":"Téléverser votre application dans App Store Connect","sidebarTitle":"Téléverser votre application","icon":"cloud-arrow-up","href":"/fr/build/mobile-upload-ios"},{"title":"Testez en bêta avec TestFlight","sidebarTitle":"Tester sur TestFlight","icon":"flask","href":"/fr/build/mobile-testflight"},{"title":"Soumettre à l'App Store","sidebarTitle":"Soumettre pour l'App Store","icon":"paper-plane","href":"/fr/build/mobile-publish-ios"}]},{"group":"Add features and grow your app","pages":[{"title":"Ajouter la connexion","sidebarTitle":"Ajouter la connexion","icon":"right-to-bracket","href":"/fr/build/mobile-login"},{"title":"Ajouter des paiements avec RevenueCat","sidebarTitle":"Ajouter des paiements","icon":"credit-card","href":"/fr/build/mobile-payments"},{"title":"Stocker des images dans votre application mobile","sidebarTitle":"Enregistrer les images des joueurs","icon":"image","href":"/fr/build/mobile-store-images"},{"title":"Ajouter des retours haptiques","sidebarTitle":"Ajouter des haptiques","icon":"wave-square","href":"/fr/build/mobile-haptics"},{"title":"Utiliser les composants natifs iOS","sidebarTitle":"Utiliser l'UI native","icon":"apple","href":"/fr/build/mobile-native-components"},{"title":"Utiliser l'appareil photo","sidebarTitle":"Ajouter l'appareil photo","icon":"camera","href":"/fr/build/mobile-camera"},{"title":"Accéder aux contacts","sidebarTitle":"Ajouter les contacts","icon":"address-book","href":"/fr/build/mobile-contacts"},{"title":"Envoyer des notifications push","sidebarTitle":"Envoyer des notifications","icon":"bell","href":"/fr/build/mobile-push-notifications"},{"title":"Collecter des avis et des notes","sidebarTitle":"Collecter des avis","icon":"star","href":"/fr/build/mobile-collect-reviews"}]},{"group":"Design","pages":[{"title":"Concevez votre application","sidebarTitle":"Concevez votre application","icon":"palette","href":"/fr/build/mobile-design"},{"title":"Générer une icône d'application","sidebarTitle":"Générer une icône","icon":"image","href":"/fr/build/mobile-app-icon"},{"title":"Générer des captures d'écran App Store","sidebarTitle":"Générer les assets du store","icon":"images","href":"/fr/build/mobile-store-screenshots"}]},{"group":"Collaborate","pages":[{"title":"Créer PixelGames en équipe","sidebarTitle":"Inviter votre équipe","icon":"users","href":"/fr/build/mobile-invite-team"}]}]}]},{"tab":"Code","pages":[{"title":"Code","href":"/fr/build/code/code-with-replit"}]},{"tab":"Designs","groups":[{"group":"Replit Design","pages":[{"title":"Qu'est-ce que Replit Design","sidebarTitle":"Qu'est-ce que Replit Design","icon":"palette","href":"/fr/design/what-is-replit-design"},{"title":"Design vs. Build","sidebarTitle":"Design vs. Build","icon":"code-compare","href":"/fr/design/design-vs-build"}]},{"group":"Quickstart","pages":[{"title":"Concevez votre premier écran","icon":"rocket","href":"/fr/design/design-your-first-screen"},{"title":"Démarrer à partir d'un template","icon":"layer-group","href":"/fr/design/start-from-a-template"},{"title":"Importer des designs Figma dans Replit Design","sidebarTitle":"Importer depuis Figma","icon":"pen-ruler","href":"/fr/design/import-figma-designs-into-replit-design"},{"title":"Importer des designs Claude dans Replit Design","sidebarTitle":"Importer depuis Claude","icon":"file-import","href":"/fr/design/import-claude-designs-into-replit-design"},{"title":"Importer un site web dans Replit Design","sidebarTitle":"Importer depuis une URL","icon":"link","href":"/fr/design/import-a-website-into-replit-design"}]},{"group":"Core components","pages":[{"title":"Composants de Replit Design","sidebarTitle":"Aperçu","icon":"layer-group","href":"/fr/design/core-components"},{"title":"Canvas","sidebarTitle":"Canvas","description":"Ouvrez, parcourez et enrichissez le canvas, la surface infinie où Replit Design affiche vos frames.","icon":"object-group","href":"/fr/design/canvas"},{"title":"Frames","sidebarTitle":"Frames","icon":"square-dashed","href":"/fr/design/frames"},{"title":"Elements","sidebarTitle":"Elements","description":"Sélectionnez et modifiez les pièces individuelles à l'intérieur d'une frame sur Canvas.","icon":"object-ungroup","href":"/fr/design/elements"},{"title":"Toolbar","sidebarTitle":"Toolbar","icon":"toolbox","href":"/fr/design/toolbar"},{"title":"Panneau de bibliothèque","icon":"images","href":"/fr/design/library-panel"}]},{"group":"Explore","pages":[{"title":"Explorer","sidebarTitle":"Vue d'ensemble","icon":"compass","href":"/fr/design/explore"},{"title":"Suggestions d'exploration","icon":"lightbulb","href":"/fr/design/explore-suggestions"},{"title":"Explorer avec différents modèles","sidebarTitle":"Explorer avec des modèles","icon":"microchip","href":"/fr/design/explore-with-different-models"},{"title":"Ajouter des templates et de l'inspiration à votre design","sidebarTitle":"Templates et inspiration","icon":"shapes","href":"/fr/design/add-templates-and-inspiration"}]},{"group":"Refine","pages":[{"title":"Affiner","sidebarTitle":"Vue d'ensemble","icon":"sliders","href":"/fr/design/refine"},{"title":"Discuter de votre design","sidebarTitle":"Chat","icon":"comments","href":"/fr/design/chat-about-your-design"},{"title":"Visual Editor","sidebarTitle":"Visual Editor","icon":"pen-to-square","href":"/fr/design/visual-editor"}]},{"group":"Build","pages":[{"title":"Construisez votre design","sidebarTitle":"Construisez votre design","icon":"rocket","href":"/fr/design/build-your-design"}]},{"group":"Design systems","pages":[{"title":"Les systèmes de design, expliqués","icon":"swatchbook","href":"/fr/design/design-systems-explained"},{"title":"Créer un système de design","icon":"droplet","href":"/fr/design/create-a-design-system"},{"title":"Contenu du système de design et DESIGN.md","icon":"file-lines","href":"/fr/design/design-md"},{"title":"Appliquer un système de design à une application existante","icon":"paint-roller","href":"/fr/design/apply-design-system"}]}]},{"tab":"Use cases","pages":[{"title":"Use cases","href":"/fr/use-cases"}]},{"tab":"Learn","pages":[{"title":"Learn","href":"/fr/learn/foundations/what-is-an-app"}]},{"tab":"Fonctionnalités","pages":[{"title":"Fonctionnalités","href":"/fr/features/collaboration/workspaces"}]},{"tab":"Confiance et facturation","pages":[{"title":"Confiance et facturation","href":"/fr/category/billing"}]},{"tab":"Entreprise","pages":[{"title":"Entreprise","href":"/fr/teams/welcome"}]}]},{"language":"pt","navbar":{"links":[],"primary":{"type":"button","label":"Comece a criar","href":"https://replit.com?ref=docs"}},"hidden":false,"pages":[{"title":"pt","href":"/pt/design/frames"}]},{"language":"ja","navbar":{"links":[],"primary":{"type":"button","label":"作成を開始","href":"https://replit.com?ref=docs"}},"hidden":false,"pages":[{"title":"ja","href":"/ja/design/frames"}]},{"language":"ko","navbar":{"links":[],"primary":{"type":"button","label":"빌드 시작하기","href":"https://replit.com?ref=docs"}},"hidden":false,"pages":[{"title":"ko","href":"/ko/design/frames"}]}]},"basePath":"","title":"Frames - Replit","buildId":"dpl_FWZhTb2vab28gFGFH4ojka6qEznQ","deploymentId":"dpl_FWZhTb2vab28gFGFH4ojka6qEznQ","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-CXMGc493.js","DynamicMarkdown-D-2HDKEp.js","zoom-image-lightbox-CE4cYsJE.js","lightbox-handle-r17bVUz3.js"]}
