Créer des WIREFRAMES RAPIDEMENT, FACILEMENT sous FIGMA - Tutoriel français - ou ZONING ou MOCKUP

🔥 Offre Spéciale Black Friday Figma : -40% sur toutes mes formations et produits FIGMA ! 🔥
Profites-en maintenant :
jessicatrocme....
Une offre que vous ne trouverez nulle part ailleurs !
Voici ce que vous pouvez saisir :
📚 𝗔𝗽𝗽𝗿𝗲𝗻𝗱𝗿𝗲 𝗮̀ 𝘂𝘁𝗶𝗹𝗶𝘀𝗲𝗿 𝗙𝗶𝗴𝗺𝗮
Apprenez les fondamentaux de Figma de manière efficace et intuitive.
🚀 𝗠𝗮𝗶̂𝘁𝗿𝗶𝘀𝗲𝗿 𝗹'𝗨𝗜 𝗱𝗲𝘀𝗶𝗴𝗻 𝗿𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝘃𝗲 𝘀𝗼𝘂𝘀 𝗙𝗶𝗴𝗺𝗮 𝗲𝗻 𝟰𝗵
Élevez vos compétences en design responsive à un niveau professionnel.
🛠 𝗦𝘁𝗮𝗿𝘁𝗲𝗿 𝗨𝗜 𝗞𝗶𝘁 𝘀𝗼𝘂𝘀 𝗙𝗶𝗴𝗺𝗮
Boostez votre productivité avec des ressources prêtes à l'emploi et personnalisables.
🎥 𝗥𝗲𝗽𝗹𝗮𝘆 𝗱𝘂 𝘄𝗲𝗯𝗶𝗻𝗮𝗶𝗿𝗲 𝘀𝘂𝗿 𝗹𝗲𝘀 𝗜𝗔 𝗮𝘃𝗲𝗰 𝗕𝗮𝘀𝘁𝗶𝗨𝗶
🌟 𝗡𝗼𝘂𝘃𝗲𝗮𝘂𝘁𝗲́ 𝗘𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 : 𝗔𝗰𝗰𝗲̀𝘀 𝗮𝘂𝘅 𝗨𝗜 𝗥𝗲𝘃𝗶𝗲𝘄𝘀 𝗔𝗯𝗼𝗻𝗻𝗲𝗺𝗲𝗻𝘁 🌟
Accès à 5 UI Reviews actuelles + au moins une nouvelle chaque mois
C'est 𝗹𝗮 𝗽𝗹𝘂𝘀 𝗴𝗿𝗮𝗻𝗱𝗲 𝗿𝗲́𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗱𝗲 𝗹'𝗮𝗻𝗻𝗲́𝗲, en dehors de mes offres de lancement. Profitez de cette occasion pour enrichir vos compétences en design avec Figma.
⏰ 𝗔𝘁𝘁𝗲𝗻𝘁𝗶𝗼𝗻 : 𝗖𝗲𝘁𝘁𝗲 𝗼𝗳𝗳𝗿𝗲 𝘀𝗲 𝘁𝗲𝗿𝗺𝗶𝗻𝗲 𝗹𝗲 𝟮𝟰 𝗻𝗼𝘃𝗲𝗺𝗯𝗿𝗲 𝗮̀ 𝗺𝗶𝗻𝘂𝗶𝘁 ! 𝗡𝗲 𝗿𝗮𝘁𝗲𝘇 𝗽𝗮𝘀 𝗰𝗲𝘁𝘁𝗲 𝗰𝗵𝗮𝗻𝗰𝗲 𝘂𝗻𝗶𝗾𝘂𝗲.
🔥 Profites-en maintenant 🔥
jessicatrocme....
🚨Si tu souhaites apprendre rapidement à utiliser Figma c'est par là : jessicatrocme.... 🚨
⇩ Voir la suite ⇩
🏆 Master design avec moi
✅ ❤️ Formation FIGMA pour maitriser auto-layout et les variables : Créer des UI Design responsive avec Figma :
jessicatrocme....
✅ Formation : Apprendre à utiliser Figma rapidement :
jessicatrocme....
Avec ce tutoriel français sous ‪@Figma‬ , vous allez pouvoir apprendre à faire des wireframes très simplement à partir d'un template déjà fait. Le fait de partir d'un template tout fait, vous permettra de partir sur de bonnes bases. Vous pourrez ainsi le compléter par la suite.
Il s'agit d'un kit de wireframe avec des composants. C'est ultra rapide de passer d'un composant à l'autre.
Sketch sketching zoning mockup
////////// Formations
Accéder à une formation pour apprendre à utiliser rapidement Figma : jessicatrocme....
Être informé de la sortie d'une prochaine formation : Apprendre Figma en Créant le design d'une application mobile pas à pas : umento.typefor...
/////////// Lien vers le template de kit wireframe
www.figma.com/...
////////// Liens dans la vidéo
Comment créer des composants et les nommer correctement ? : • Figma tutoriel : Les c...
Comment fonctionnent les frames ? • Figma tutoriel - Quand...
/////////// Qui suis-je ?
Web Designer et développeuse Front-end depuis 10 ans. J'ai eu un cursus atypique avec licence de Physique-Chimie, un master MEEF mais j'ai trouvé ma passion il y a 10 ans. En autodidacte, je me suis formée grâce à des livres, des tutos et l'entraînement. Depuis, j'ai eu beaucoup d'expérience dans le domaine, avec de nombreux sites dont beaucoup dans le publique comme par exemple les derniers sortis en début 2020 :
www.haute-vien...
assises.haute-...
www.cc-montesq...
www.technopole...
////////// Connectez-vous avec moi ici 👍🏼
Facebook : / jessicatrocmedesign
LinkedIn : / jessica-trocm%c3%a9-96...
#wireframe #figma #tutoriel

[@JessUIdesign]

Connaissez-vous d'autres outils pour faire des wireframes / Zoning ?

[@jamilaabela6013]

Xd moi je bosse dessus

[@Kevin-bg6vd]

Balsamiq et pour moi clairement wireframes et zoning sont deux choses différentes même si le zoning est rarement fait

[@JessUIdesign]

Oui effectivement j’aurai dû expliquer que c’était un abus de langage. Et que le zoning c’est comme son nom l’indique, c’est schématiser les zones comme le header, footer et colonne de droite etc... j’ai des chefs de projets qui parlent de zoning alors que ce sont des wireframes. Merci d’avoir fait la remarque je ferai une vidéo pour préciser cela.

[@francoislepera8156]

j'utilise le plugin "wireframer" sous XD

[@cookingmymy]

Un zoning n'est pas un wireframe ! Ce n'est pas qu'une question de terme mais c'est une question d'étape. Le zoning vient AVANT le wireframe, il permet d'établir la structure globale du site. Et on ne passe au wireframes QU'APRÈS validation du zoning. Et même visuellement ce n'est pas du tout pareil (Zoning = zones /aplats alors que Wireframes = fil de fer).

[@JessUIdesign]

Bonjour et merci pour votre commentaire. Vous avez absolument raison. À l'époque où j'ai réalisé cette vidéo, je pensais que le zoning et le wireframe étaient la même chose, mais ce n'est pas le cas. Le zoning est effectivement une étape préliminaire qui permet d'établir la structure globale du site avant de passer au wireframe. Je m'excuse pour cette confusion et je suis reconnaissante que vous ayez pris le temps de le souligner. Je vais m'assurer d'être plus précise à l'avenir. Merci encore pour votre retour constructif.

[@mihaboua9883]

Tu es super, hyper détaillé ma formatrice ma conseiller de te regarder et je suis pas déçu !!! merci

[@JessUIdesign]

Merci beaucoup 😊

[@youcefamirat2043]

Merci pour la vidéo, Nikel pour un débutant.

[@JessUIdesign]

Avec plaisir 😊

[@TheFlight687]

C'est fou comme j'apprends beaucoup ici.... Fidèle abonné 🔥💖

[@JessUIdesign]

Merci Jacques 😊 Et encore plein de choses à venir 😉

[@TheFlight687]

Infiniment merci

[@brunorafael5665]

Comment pouvez-vous être si jolie comme ça en expliquant très clairement ce tuto !! je vous remercie ^^

[@JessUIdesign]

🙏

[@alyssaaly7442]

Merci beaucou^p ! tu m'as sauvé la vie tu peux pas savoir a quel point!! en un cours j'ai pu faire ce que je voulais like et abonnement ;)

[@JessUIdesign]

Avec plaisir 🤗 Je suis contente que ma vidéo ait pu t’aider. Merci pour ton message !

[@NayeffBOINARIZIKI]

Merci beaucoup Jessica je suis dev et tes tutos m'ont beaucoup aidé 😉

[@JessUIdesign]

🤗

[@jalco8980]

nikel merci beaucoup. pour les infos sur les wireframes

[@JessUIdesign]

😊

[@toloco666]

Terrible merci Jess

[@JessUIdesign]

:)

[@kevinngaleu1545]

Super tuto Jessica. Je suis Product Manager et je souhaitais apprendre a faire des wireframes sur logiciel. Je n'en fait que sur papier. Impeccable. As tu des tutos pour mobile? Tu as gagne un nouvel abonne.

[@JessUIdesign]

Merci 😊🙏 Tu trouveras des tutos sur mobile mais sur d’autres sujets

[@Bonne_nouvelle]

Merci !

[@JessUIdesign]

Avec plaisir 😊

[@Money-wq3fz]

vraiment super

[@JessUIdesign]

😊

[@francoislepera8156]

Salut Jessica, merci pour ton travail, et le ton dynamique. Dans cette vidéo, j'imagine que tu as utilisé l'application desktop, cependant, tu ne le précises pas. Du coup, lorsque l'on utilise l'app en ligne, l'interface étant différente, on cherche en vain certains boutons, tels que l'accès à la communauté. Problème résolu une fois l'app desktop installée. Bonne journée à tou(te)s

[@JessUIdesign]

Ha oui effectivement j’utilise l’application desktop. Bonne journée

[@MrZyghom]

yeah , je suis le 600ème abonnés ! bravo pour ta chaîne

[@JessUIdesign]

Merci 😊

[@moussadev1353]

Je suis le 1000 ème abonné 🤩

[@JessUIdesign]

Yeahhh Merciiiii 🎊🎉

[@MrsLalaina]

Hello ! J’ai une question quand on a fini de créer les wireframes en low-fi, comment travailler la maquette en couleurs après ça ? Il faut reprendre les wireframes et leur appliquer couleurs, photos, typo, rajouter d’autres éléments, etc ? Ou faut-il créer une toute nouvelle maquette de A à Z ?

[@JessUIdesign]

Hello, Au final, je crée les wireframes avec vraiment l’ensemble des composants. Puis je n’ai plus qu’à ajouter, modifier l’esthétique donc la partie UI Design. Ça permet en effet de gagner du temps. Je pars même d’un starter kit que j’ai créé à force de voir que d’un projet à l’autre il y a pas de choses qui se répètent.

[@elies7635]

Comment fait on pour enregistrersur mon pc svp ??

[@edgarj.5131]

Bonjour, comment fait-on pour espacer les items dans les menus proposés et afficher un sous menu déroulant dans le wireframe? Merci!

[@JessUIdesign]

Il faut rajouter des auto-Layout pour espacer les items dans les menus et ainsi gérer les padding. Pour un menu déroulant, c’est la partie prototype.

[@malouette3991]

Bonjour Jessica, je n'ai pas tout à fait la même interface. Est-ce parce que j'utilise une version gratuite ? Je n'ai pas la page "build your own" et j'ai beaucoup moins de composants...

[@JessUIdesign]

Bonjour, c’est possible que l’auteur ait changé le fichier depuis.