The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Figma et Canva, deux outils que j’utilise personnellement au quotidien. Vous les connaissez déjà peut-être (ou pas du tout), dans les deux cas vous apprendrez quelque chose qui va vous surprendre ;)
C’est clairement l’outil de création simple et rapide pour réaliser un visuel en ligne. Il couvre un bon nombre de possibilités en terme de supports digitaux ou print (papier). La force pour ses utilisateurs ? Le fait que Canva propose du contenu sous forme de modèles. Grâce à ceux-ci, vous n’avez pas besoin de connaitre les différents formats, ni même de chercher des inspirations. Les propositions de créations sont variées, allant des réseaux sociaux, du digital jusqu’au print, ou personnalisées pour les plus aventuriers d’entre vous ! Avis à ceux qui ont des difficultés à harmoniser leurs contenus avec les couleurs, typographies (polices d’écriture), placement des éléments, la solution idéale se trouve chez Canva.
Rien de plus facile que l’éditeur de contenu qui se trouve à la gauche de l’écran. Il fonctionne grâce à un système de drag and drop (glisser déposer). Là, on y trouve de tout, c’est la caverne d’ali baba. Grâce aux différentes propositions, vous ne manquerez plus de créativité : importez des fichiers, des images, des éléments graphiques qui embellirons vos créations. Depuis peu, une nouvelle option “Dessin” a fait son apparition. Un bon moyen d’annoter, de souligner ou d’entourer des éléments de manière plus spontanée.
On commence une amitié sans faille avec Figma lorsque l’on souhaite un outil de création web. Un outil ouvrant le champ des possibles, principalement destiné aux UX/UI Designers pour réaliser des maquettes en collaboration avec d’autres tiers (designers, clients, développeurs…). On l’utilise pour des projets de sites internet desktop / mobile mais aussi des applications… (il y en a même qui s’en servent pour faire des visuels pour leurs réseaux sociaux et des présentations 🤫) Cerise sur la gâteau, il permet aussi aux développeurs d’accéder à différents projets et aux données propres à l’intégration web : les dimensions, tailles d’éléments…
L’allié de Figma, c’est FigJam. Que dites vous de dessiner sur un tableau blanc virtuel collaboratif ? C’est un très bon outil à utiliser comme support d’atelier (que ce soit en présentiel ou en distanciel d’ailleurs) pour la gestion de projet. Chez les Fabricants, on s’en sert pour des comptes rendus de présentation (des templates sont déjà prévus), ou même des réalisations d’expérience map (c’est une visualisation du parcours utilisateur dans une expérience, mettant en évidence les étapes clés, les interactions et les émotions.) Brainstormer sur du stop start continue ou partager son tableau, ajouter des posts it, c’est possible avec FigJam et c’est vraiment à la portée de tous 😋.
L’organisation ! Avec plusieurs écrans, on peut vite se perdre. Essayez de répartir les écrans par catégories par rapport à leur type et/ou à leur fonctionnalité. Par exemple, regroupez les écrans pour un onboarding, pour un checkout… Vous pouvez séparer les écrans mobiles des desktops ou les placer côte à côte, même chose pour leurs composants : tout dépend de vous et de votre manière de travailler. Choisissez ce qui vous convient le mieux, testez, en essayant des techniques différentes vous comprendrez rapidement ce qui est le plus adéquat. Ensuite, tout coulera de source.
Un deuxième conseil ? Bande de gourmands, ici on aime le partage !
https://www.adobe.com/products/xd/learn/design/productivity/material-design.html by Adobe
Préparez un design system, il vous accompagnera tout au long de votre projet et vous fera gagner beaucoup de temps. Personnellement, j’y ajoute trois grandes catégories principales avec premièrement, mes grilles mobile et desktop, ensuite, mes couleurs et mes différents styles de textes (que j’organise aussi entre mobile et desktop). Enfin, une dernière catégorie avec mes composants (input, statut (ex : actif, inactif, neutre), éléments différents en fonction d’une situation…).
Regroupez une bonne partie de tout ça dans “Local Styles” et le tour est joué ;)
Tout un monde s’effondre dès lors qu’un designer aperçoit la catégorie “Sites web” proposée sur Canva. Mais que vaut réellement cette catégorie ? Comment fonctionne-t-elle et quelles sont ses limites ?
Pour me faire un avis j’ai évidemment testé (pour vous public) cette fonctionnalité. Comme pour toutes les créations que propose Canva, il est possible d’utiliser un design vierge ou un modèle de site web déjà conçu. J’ai choisi d’analyser les modèles “tout fait” pour comprendre comment ceux-ci peuvent être utilisés et s’il y a des éléments intéressants ou si au contraire c’est à s’en tirer les cheveux. C’est un vrai saut dans le vide car je ne connais pas du tout cette partie de Canva, en général je suis agréablement surprise par leurs propositions pour d’autres types de création alors, suspens !
→ Les +
Les designs sont actuels, dans l’air du temps, souvent assez épurés
Il y a une assez bonne cohérence au niveau des visuels, des couleurs et des choix de typographies
→ Les -
Les tailles de texte sont beaucoup trop disproportionnées et parfois pas centrés
Principalement, que du contenu, très peu de stratégie, de CTA (call to action)…
Pas de responsive design (adaptation desktop / mobile) malgré le fait que l’on puisse créer une page pour chaque format
Il n’y a pas de possibilité pour s’organiser, de créer plusieurs fichiers avec des écrans différents, c’est donc très compliqué de réaliser des maquettes avec un site qui propose plusieurs pages. Avec la version pro il est tout le même possible de créer une sorte de design system avec un logo, une palette de couleurs, ses polices, des éléments graphiques… qui, j’imagine, accéléreraient le processus de création.
Aperçu d’un template de site internet sur Canva
Il y a très peu de stratégie derrière les designs proposés. Le contenu est posé comme ça à but informatif, mais c’est tout. Cela s’explique aussi par le fait que les sites proposés sont très simples, il n’y a pas de complexité métier dans ce qu’ils mettent en avant. Ce n’est pas vraiment étonnant après tout, Canva n’est pas fait pour cela à la base 😉. En effet, après avoir réalisé son design de site web, lorsque l’on “publie le site”, une nouvelle page s’ouvre comme un nouvel onglet. Il n’est malheureusement pas possible de rendre la maquette interactive (comme avec le prototype Figma). J’en conclus que les réalisations servent à donner une idée de design à un client en faisant une création simple, rapide et sans trop de détails.
Je dirais que ces deux outils sont complètement complémentaires. On n’utilise pas un Canva pour les mêmes besoins qu’un Figma. On ne réalise pas une maquette de site internet sur Canva comme on ne créé pas une story sur Figma 🤫
Ce ne sont pas des concurrents en soit. Ils n’ont pas les mêmes cibles, les mêmes fonctionnalités… Un grand nombre d’entre vous, lecteurs, pourraient trouver une utilité à Canva, de plus, sa simplicité d’utilisation est un véritable atout pour tous. Cependant, Figma est plus niché, pour une partie de personnes qui touchent déjà aux plateformes web, aux applications. Il est lui aussi plutôt simple à prendre en main (surtout si vous avez déjà utilisé Adobe Xd par exemple). Vous verrez qu’il y a de nombreux atouts comme la création de composants qui facilitent la vie !
CANVA 🔵 On réalise des contenus pour les réseaux sociaux, des présentations pour un projet, des collages photos ou encore des CV.
FIGMA 🟣 On réalise des wireframes, des prototypes, des designs systems pour des maquettes de sites ou d’applications.
Sur ce, bonne utilisation !
Photo de Med Badr Chemmaoui
.svg)
