Figma : Convertir sa maquette en un VRAI site (sans Code)

Summary

This tutorial offers a step-by-step guide on converting a Figma design into a functional website using Webflow, a no-code platform. The instructor addresses common challenges faced by designers in transforming their mockups into websites and presents Webflow as an optimal solution. The video covers the process of integrating key elements like text, images, and buttons from Figma into Webflow, adjusting styles and typography to match the original design. It also demonstrates techniques for responsive design, ensuring the website looks good on both desktop and mobile devices. By the end of the tutorial, viewers will have a clear understanding of how to take their Figma mockup and turn it into a live, responsive website that they can publish and share.

Takeaways

• 😀 The speaker discusses the challenges of transforming a Figma design mockup into a functional website, mentioning that plugins can sometimes be unreliable.
• 🎨 Three solutions are presented for converting a Figma mockup to a website: hiring a web developer, learning to code, or using no-code tools like WordPress, Wix, or Framer.
• 🛠️ The speaker recommends Webflow as the best no-code tool for converting Figma designs into websites, comparing it to the same philosophy as Figma but for web development.
• 🔧 The tutorial covers the process of integrating elements from Figma to Webflow, emphasizing the importance of having detailed information from Figma for accurate reproduction.
• 🖌️ The importance of CSS classes in Webflow is highlighted for styling elements consistently, such as setting up a 'heading title' class for text elements.
• 📐 The tutorial explains how to center elements on a page using CSS Flexbox properties within a 'container medium' div block.
• 🎨 Tips are given on how to match typography and colors from the Figma design in Webflow, including using Google Fonts and adjusting text properties like size and spacing.
• 🔲 The process of adding and styling a button in Webflow is demonstrated, including adding gradients, borders, and shadows to match the Figma design.
• 📱 The script touches on responsive design, showing how to adjust elements for mobile views using Webflow's responsive design features.
• 📘 The tutorial also covers adding navigation bars and styling them to match the Figma mockup, including changing colors, fonts, and hover effects.
• 🚀 Finally, the video script concludes with instructions on how to publish the completed website on Webflow and share it with clients or others.

Q & A

What is the main challenge faced when trying to convert a Figma design into a functional website?

The main challenge is that converting a Figma design into a website can be a real struggle. Plugins may not work as expected, and if no action is taken, the design will remain only as a mockup.

What are the three solutions mentioned in the script to transform a Figma mockup into a real website?

The three solutions are: 1) Hiring a web developer, which may be costly and time-consuming. 2) Learning to code in addition to design skills, which may not be ideal for those who dislike coding. 3) Using no-code tools like Webflow to transform the mockup into a website.

Why is Webflow considered the best solution for converting a Figma mockup into a website according to the script?

Webflow is considered the best solution because it allows users to transform any Figma mockup into a real website without the need for extensive coding knowledge, making the process more accessible and user-friendly.

What are some key elements that should be included in a Figma design before integrating it into Webflow?

Key elements include text, images, and buttons. It's important to have these elements in Figma because it allows for the retrieval of specific design information, which can be crucial for accurate conversion.

How does Webflow handle typography and font choices?

Webflow allows users to easily install and use different typography and fonts. Users can add fonts from Google Fonts, such as Oxygen and Inter, and specify weights like 300 and 700 to match their design.

What is the purpose of creating CSS classes in Webflow when styling elements?

Creating CSS classes in Webflow allows elements to share the same styling characteristics, such as color, font, and size. This makes it easier to maintain consistency across the website and simplifies the styling process.

How can users align elements in the center using Webflow?

Users can align elements in the center by using a 'container' with 'Flex' properties. By setting the display to 'Flex' and adjusting the alignment and direction properties, elements can be centered both horizontally and vertically.

What is the significance of using 'container médium' in Webflow?

'Container médium' in Webflow is used to contain elements and set a medium size for them. It helps in centering the content and provides a basis for adding margins and padding to ensure elements are not too close to the edges.

How does the script suggest handling responsive design when converting a Figma mockup to Webflow?

The script suggests adjusting specific properties for different screen sizes using Webflow's responsive design tools. For example, changing 'width' properties to 'max-width' and setting specific pixel values to ensure the design adapts well to mobile views.

What steps are recommended for publishing a website created with Webflow?

To publish a website created with Webflow, users should click the 'publish' button, choose a domain, and then the site will be live. After that, it can be shared with clients, friends, or the public.

Outlines

00:00

🛠️ Transitioning Figma Mockup to a Live Website

The script discusses the challenges of converting a Figma mockup into a functional website. It presents three solutions: hiring a web developer, learning to code, or using no-code tools like WordPress, Wix, or Framer. The speaker recommends Webflow, a no-code tool, as the best solution for transforming a Figma design into a website, asserting it shares the same philosophy as Figma and promises to provide keys to success throughout the video.

05:00

🎨 Customizing Webflow with Figma Elements

This paragraph details the process of integrating a Figma design into Webflow. It emphasizes the importance of having the design on Figma to extract information easily. The speaker guides through changing the background color, adding and styling text, and adjusting button elements. They explain how to use CSS classes to style elements consistently and how to center content using a 'container medium' div with specific spacing and alignment settings.

10:02

🔧 Fine-Tuning Typography and Spacing

The speaker focuses on adjusting the typography to match the Figma design using Google Fonts, specifically Oxygen and Inter. They demonstrate how to change font weights, sizes, and line heights to replicate the design accurately. The paragraph also covers how to adjust the spacing between elements, such as the title, paragraph, and button, using the gap feature in Webflow's container settings.

15:02

🖌️ Styling the Button and Badge Elements

The paragraph delves into styling the button to resemble the Figma mockup, including adding gradients, borders, and shadow effects. It also discusses how to adjust padding and radius to match the design. Additionally, the speaker describes creating and styling a badge element with a text and an arrow, emphasizing the importance of precise alignment and spacing.

20:03

📸 Exporting and Implementing Images

The speaker explains the process of exporting images from Figma and implementing them in Webflow. They discuss adjusting the size and spacing of images and text to match the mockup. The paragraph also touches on the technical aspects of working with rem units and pixels for precision, and the importance of adjusting the layout for a mobile-responsive design.

25:05

✨ Adding Special Effects and Navigation Bar

This paragraph covers the addition of special effects like gradients and glows to enhance the design. The speaker advises on exporting glows from Figma as PNGs and placing them behind text and images in Webflow using CSS positioning. They also guide through adding a navigation bar, customizing its appearance, and ensuring it adapts well to mobile views.

📱 Responsive Design and Publishing the Website

The final paragraph addresses the importance of responsive design, showing how to adjust elements for mobile views in Webflow. The speaker demonstrates fixing layout issues and ensuring text sizes are appropriate for mobile. They conclude by explaining how to publish the website, making it live for viewing and sharing.

Keywords

💡Figma

Figma is a cloud-based interface design and collaboration tool used for creating and prototyping user interfaces. In the video, it is the platform where the initial design mockup is created, which is then the starting point for transforming into a functional website. The script mentions Figma as the tool used for designing the mockup, indicating its importance in the UI/UX design process.

💡Webflow

Webflow is a no-code web design tool that allows users to design, build, and launch responsive websites visually. The video's main theme revolves around using Webflow to convert a Figma mockup into a real website. Webflow is highlighted as the solution for designers who may not have coding skills to bring their designs to life online.

💡Mockup

A mockup is a visual representation of a product, typically used in the design phase to showcase the look and feel of a user interface. In the context of the video, the term 'maquette' (French for mockup) refers to the initial design created in Figma, which the tutorial aims to transform into a live website using Webflow.

💡No-code

No-code refers to the ability to build applications or websites without writing any code. The video introduces 'no-code' tools like Webflow that democratize web development and allow designers to create websites directly from their designs. The script mentions no-code as an alternative to hiring a web developer or learning to code.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on different devices and screen sizes, from desktop computer monitors to mobile phones. The video script discusses adapting the Figma mockup to be responsive, ensuring it looks good on both desktop and mobile views using Webflow's features.

💡Typography

Typography refers to the art and technique of arranging type to make written language legible and appealing. In the script, typography is mentioned when discussing how to match the font style, weight, and size from the Figma mockup to the Webflow design, emphasizing the importance of typography in web design.

💡CSS

CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML or XML. The video mentions CSS in the context of styling elements within Webflow, such as creating classes for text color, font, and other design properties to match the Figma mockup.

💡Flexbox

Flexbox is a layout model in CSS that allows for the arrangement of elements in a flexible and efficient manner, making it easy to design complex responsive layouts. The script refers to Flexbox when explaining how to align elements in the center within Webflow, which mirrors the 'Auto Layout' feature in Figma.

💡Gradient

A gradient in design refers to a gradual transition between two or more colors. The video script describes how to recreate a gradient background from the Figma mockup in Webflow, showcasing attention to detail in design replication.

💡Shadow

In web design, shadow refers to the effect that gives depth to elements by simulating light and shadow. The script discusses adding a drop shadow to a button in Webflow to match the design from Figma, which adds a layer of realism and visual interest to the button.

💡Publish

To publish a website means to make it accessible on the internet. In the context of the video, 'publish' refers to the final step where the designed website in Webflow is made live. The script mentions using the 'publish' feature in Webflow to deploy the completed site.

Highlights

Introduction of the challenge of transforming a Figma design into a functional website.

Three solutions presented for developing a Figma mockup: hiring a web developer, learning to code, or using no-code tools.

Recommendation of no-code tools like WordPress, Wix, and Framer for non-coders to build websites.

Introduction of Webflow as the best no-code tool for converting Figma designs into websites.

Explanation of the importance of having the design on Figma for detailed information transfer.

Step-by-step guide on integrating Figma elements into Webflow, starting with key elements like text, images, and buttons.

Demonstration of changing the background color and setting up body classes in Webflow.

Guidance on adding and centering a title in Webflow, including CSS styling.

Use of div blocks to position elements in the center and manage spacing.

Importance of setting the correct width and margins for layout consistency.

Adding and styling a button to match the Figma design using Webflow's interface.

Installation of custom fonts like Oxygen and Inter from Google Fonts within Webflow.

Adjusting typography settings to match the Figma design's font size and weight.

Creating and applying custom CSS classes for consistent text styling.

Using Flexbox in Webflow to align elements and manage spacing similar to Figma's Auto Layout.

Adding a badge and arrow icon above the heading for detailed design replication.

Exporting and importing design elements from Figma to Webflow for accurate reproduction.

Adjusting the navigation bar for mobile responsiveness and maintaining design integrity.

Finalizing the design with responsive adjustments for mobile view using Webflow's features.

Publishing the final website online after completing the design and responsive setup.

Transcripts

ça y est vous avez terminé votre

maquette sur figma et vous êtes super

content du résultat elle est belle c'est

super bien travaillé sauf vous rendez

compte d'un truc transformeer sa

maquette en un vrai site c'est une vraie

galère vous avez des plugins mais qui

marchent pas vraiment vous rendez compte

que votre maquette bah elle restera

qu'au stade de maquette si vous n'en

faites rien et là vous avez trois

solutions confier le développement de

votre maquette à un développeur web vous

savez pas combien ça va vous coûter ni

combien de temps ça va prendre et à qui

confie le travail deuxème solution c'est

qu'en plus de faire de luux design et du

web design d'apprendre à faire du code

sauf comme moi le code c'est pas votre

truc tapez des lignes de code sur des

fichiers HTML CSS c'est pas votre kiff

et la troisième solution celle dont je

vais vous parler maintenant qui est la

meilleure c'est de passer par des outils

no code pour transformer votre maquette

en un vrai site des outils no codes vous

avez entendu parler il y a peut-être

WordPress Wix ou même Framer la solution

que je vais vous proposer aujourd'hui

c'est la meilleure et qui permet de

transformer n'importe quelle Maquet fgma

en un vrai site web c'est avec l'outil

Webflow si vous avez déjà entendu parler

de cet outil vous êtes peut-être déjà

dit que c'est pas votre truc ça paraît

compliqué mais si vous avez fait votre

maquette fil je vous garantis que c'est

la même chose c'est la même philosophie

de passer sur weow mais pour ça il faut

quelques clés et ces clés je vais vous

les donner tout au long de cette vidéo

si vous voulez transformer enfin votre

maquette en un vrai site restez jusqu'à

la fin et on est parti pour transformer

votre

[Musique]

maquette pour commencer voici la

maquette qu'on va intégrer de figma vers

Webflow et je vais commencer par

intégrer certains éléments clés

notamment les textes les images et le

bouton l'important c'est d'avoir fait

sous figma parce que ça nous permet

d'aller chercher de l'information par

exemple si je clique sur ce titre je

sais que la typographie est en oxygène

qu'il est en gras et c'est en ta 60 si

vous avez juste l'image de la maquette

ça peut marcher mais vous pouvez manquer

d'information donc c'est pour ça qu'il

est précieux de l'avoir sur figma dans

flow la première chose qu'on va faire

c'est de changer la couleur du fond et

pour ça vous allez cliquer sur les trois

traits dans navigateur vous allez

cliquer sur body dans body vous allez

cliquer sur body all pages vous allez

rentrer des classes pour chaque élément

pour le body ça va être un peu spécial

parce queon veut que ce soit cette

couleur là pour touses les pages donc ça

une manipulation qu'on va faire

seulement une fois sur le body donc vous

cliquez sur body all pages et ici dans

vous descendez et dans background vous

changez la couleur ici si vous maîtrisez

les variables sur Webflow mettez-le

plutôt en variable le but de ce tutoriel

c'est d'aller droite au but on va tout

simplement coller la couleur pour aller

rapid donc je colle la couleur pour

avoir le fond de la bonne couleur jeis

rajouter mon titre vous allez cliquer

sur le plus et vous allez défiler et

chercher heading vous allez faire un

glisser vous allez avoir votre titre

donc première chose c'est que le titre

il est pas au bon endroit et par rapport

à figma vous mettez le titre un peu où

vous voulez bah cette fois bah vous êtes

un peu bloqué le titre il suit des

règles vous pouvez pas le mettre au

milieu il va falloir styliser un

ensemble pour que le titre arrive au

milieu et c'est stytiliser en CSS vous

allez cliquer sur votre heading one ici

vous pouvez mettre

heading title donc la philosophie c'est

que Webflow ça va faire du HTML et du

CSS et en CSS il faut nommer des classes

donc pour ça pour ajouter par exemple

sur le titre une couleur en blanc je

vais créer une classe heading title et

rajouter une couleur en blanc dès que je

vais avoir un autre élément par exemple

un paragraphe qui va s'appeler heading

title je vais avoir ce paragraphe qui va

partager les mêmes caractéristiques donc

la couleur blanche j'ai mes deux

éléments mais comme vous voyez je suis

un peu bloqué parce que je peux pas les

mettre au milieu et pour les mettre au

milieu on va utiliser une div qui va les

déplacer donc vous allez rajouter une

div dans Navigator vous allez mettre

au-dessus et faire rentrer le H1 div

block et le paragraphe pareil dedans

donc là on est toujours pas plus avancé

vous avez vos deux éléments dans un div

block mais il y a rien qui change la

première chose qu'on va faire c'est de

changer la taille du div block pour cela

je vais l'appeler container médium

container médium ça veut dire c'est un

bloc qui va contenir vos élément et qui

va être de taille médium et pour ça je

vais mettre wids donc la largeur à 960

pixels plus tard on va déplacer cette

valeur dans Max Wied mais pour

comprendre rapidement on va d'abord

mettre dans WIS 960 pixels la différence

c'est que votre bloc est beaucoup plus

court il est toujours pas au milieu mais

au moins vous avez pas le bloc qui prend

tout le long et toujours sur ce

container t médium vous avez ici spacing

et vous avez une icône que vous allez

cliquer qui va mettre le container au

milieu et là on s'approche beaucoup plus

de ce qu'on veut d'avoir le contenu qui

est au milieu je vais rajouter des

marges en haut et en bas parce que pour

l'instant mon container il est trop près

du bord en haut et donc ici dans paging

toujours dans container médium je vais

mettre 64 pixels pareil pour le bas pour

équilibrer je vais rajouter un bouton

parce que dans mon élément j'ai mon

titre ma description et un bouton donc

pour ça toujours pareil pour rajouter un

élément vous faites plus et vous allez

chercher bouton temp basique vous faites

glisser dans container médium maintenant

qu'on a nos trois éléments je vais les

styliser pour que ça fite comme sur

notre Maquet le titre en oxygène donc je

vais changer la typographie pour cela ce

qui est très bien avec Webflow c'est

qu'on peut facilement installer des

typographies vous allez cliquer ici dans

font et vous allez cliquer sur Ajouter

font ça va vous envoyer sur cette page

et ici vous pouvez rajouter des fontes

qui sont déjà présentes dans Google font

donc c'est très bien parce que les deux

fontes que choisis elles sont présentes

dans cette bibliothèque vous allez taper

oxygène vous allez rajouter 300 et 700

en fait qui sont les graisses vous

voulez mettre la typographie en gras ou

en plus fin j' en installer une deuxième

qui est en fait la fonte de mes cords de

texte la fonte c'est Inter et je vais

faire la même chose je vais rajouter

toutes les graisses de cette typographie

donc ici dès que vous avez installé les

fontes elles vont pas s'ajouter

automatiquement vous pouvez appuyer sur

F5 pour actualiser la je vais styliser

mon titre donc je clique bien sur

heading title font je vais cliquer sur

oxygène et j'ai ma fonte qui va changer

ma size je vais la changer je vais me

référer à figma size 60 en hauteur je

vais mettre 72 donc là vous avez vu j'ai

changer le titre mais ça m'a aussi

changé le paragraphe pourquoi parce que

dans paragraphe vous avez la classe

heading title qui est présente si vous

voulez pas que votre paragraphe et les

mêmes caractéristiques que votre titre

vous allez supprimer cette classe donc

là ça va beaucoup mieux par contre je

l'ai plus en blanc donc je vais créer

une classe spéciale pour ce paragraphe

qui va s'appeler paragraphe herosection

vous prenez pas trop la tête avec les

noms et la nomenclature des classes CSS

quand vous débutez moi c'est pour

l'exemple mais vous pouvez juste nommer

paragraphe mais ça me permet de bien me

souvenir que c'est simplement le

paragraphe dans l'aerosection je vais

mettre les caractéristiques que j'ai sur

figma sur ce paragraphe donc pour

l'instant je vais remettre le texte en

blanc par contre je vais changer la

taille en 20 et mettre une fonte en

inter alors la fonte en inter je vais la

mettre sur tout le site comme ça je suis

sûr de l'avoir à d'autres endroits comme

un bouton juste avant de passer la fonte

en inter je vois que ici dans le

paragraphe bah les hauteurs de

paragraphe elles sont pas très bonnes

donc pour ça je vais changer la hauteur

qui a 30 sur ma maquette pour avoir

quelque chose de beaucoup plus espacé je

vais changer la typographie d' body

pourquoi parce que là je vois que mon

paragraphe il est en Arial donc je

pourrais le mettre en interre

directement ici ça va marcher par contre

mon bouton bah ça va pas suivre il a une

fonte en Arial pourquoi parce que la

caractéristique vient de body donc

j'enlève cette caractéristique dans

paragraphe je vérifie bien que je suis

en Arial je vais cliquer sur les trois

traits body je reviens sur body PES et

la fonte à la place de l'avoir en Arial

je vais la passer en inter et là du coup

mon paragraphe et mon bouton passe en

inter je vais juste changer aussi la

taille ici et mettre 16 et en hauteur 20

2 pour dire tous les corps de texte et

tous les textes sur l'ensemble du site

sont en taille 16 et en hauteur de 22

donc là on s'approche plus de notre

aspect il y a toujours des choses qu'il

faut styliser mais on se rapproche

beaucoup plus de la maquette différence

ici c'est que le texte est pas centré

donc je vais les centrer à chaque fois

pour ça vous cliquez sur heading et vous

centrez avec alignement Center et ici

pareil alignement Center ok pareil pour

bouton vous pouvez faire la même chose

mais on va styliser le bouton je vais

appeler button cliquez ici pour le

mettre au milieu et malheureusement ça

ne met pas au milieu parce que tous les

éléments en fait vont toujours être

collés à droite pourquoi parce qu'il

faut rajouter des caractéristiques donc

container médium pour que tous les

éléments soient bien alignés au milieu

et pour ça vous allez revenir dans

container

médium et ici vous avez différents

display qui vont être bloc Flex grid et

non on va passer le tout en Flex qui est

en fait l'espèce d'auto layout qu'on va

avoir dans figma et donc vous allez

cliquer sur Flex vous allez avoir vos

éléments qui vont apparaître comme ça

c'est pas ce qu'on veut mais ça va être

exactement les propriétés d'auto layout

qu'on a dans figma si je clique en fait

sur figma et je reviens dans mon

container je vais avoir les

caractéristiques et là si je mets la

même direction donc direction verticale

j'ai mes éléments qui se mettent comme

ça en X je veux pas avoir un stretch

parce que le stretch mon bouton il va

s'allonger je vais plutôt avoir un

Center et là je commence avoir

exactement comme ce que j'ai sur ma

maquette on va changer les textes pour

être plus

accurate en quelques clics vous avez vu

qu'on a reproduit la même chose qu'on a

dans figma donc c'est beaucoup plus long

vous pouvez pas mettre les éléments et

les déplacer à la volet par contre ce

que vous pouvez très bien faire c'est

d'avoir une div Block qui partage des

caractéristiques différentes mais des

caractéristiques communes à votre

maquette pour aligner vos éléments au

milieu ce qu'on peut également faire

c'est changer l'espace entre votre votre

titre votre paragraphe et votre bouton

toujours dans container médium vous avez

ici la caractéristique Gap qui est

l'espace entre chaque élément et mettre

16 pixels pour avoir un espace de 16

pixels ici et 16 pixels ici si vous

voulez avoir un espace plus grand par

exemple entre votre paragraphe et votre

bouton mais seulement sur cet espace là

parce que si je change le gap ici de 32

ou même de 64 je vais toujours avoir le

même espace de 64 64 moi ce que jeux un

espace plus grand simplement entre le

paragraphe et le bouton on pe rajouter

un div block que vous allez mettre juste

au-dessus du bouton vous allez l'appeler

padding t

bottom et mettre par exemple

médium et ici mettre un padding de 16

pixels en plus vous allez avoir 16 et

ici 16 + 16 32 donc là on a augmenté

l'espace entre le paragraphe et le

bouton on se rapproche beaucoup plus de

ce qu'on a sur la MAC je vais maintenant

styliser le bouton pour qu'il ressemble

beaucoup plus au bouton qu'on a dans la

maquette ce qui est important donc fa

c'est de reprendre les caractéristiques

que vous avez dans le bouton donc là par

exemple je sais que dans le bouton je

vais avoir un dégradé à l'intérieur je

vais avoir un trait autour qui va être

bleu et je vais avoir une ombre portée

derrière on va commencer par le dégradé

à l'intérieur tout ce que vous avez à

faire c'est cliquez sur image and

gradient à la place d'avoir le bleu ici

vous P vous sélectionner qu'une seule

couleur je vais cliquer sur le plus et

choisir type Linéar gradient je vais

copier-coller les deux couleurs que j'ai

dans figma donc là je copie ma première

couleur je colle je clique sur ma

deuxième couleur j'ai le même dégradé

dans figma et dans Webflow je vais

mettre un trait autour de mon bouton

vous allez ici dans borders vous allez

appuyer sur solide pour mettre un trait

donc là le trait en noir je vais vous

montrer donc là je le mets en blanc et

je peux coller la couleur que j'ai

sélectionné dans figma je mets la même

couleur là mon bouton il a les mêmes

caractéristiques et les mêmes couleurs

je vais rajouter des bords autour donc

pareil je vais regarder le radius que

j'ai dans figma donc je vois que j'ai un

radius de 20 et je mets 20 notre bouton

il commence à se rapprocher par contre

dans figma j'ai beaucoup plus de bord et

d'espace entre la typographie et le bord

du bouton je vais mettre les mêmes

caractéristiques que j'ai par contre

dans figma ça va être dans l'auto layout

dans le bouton ça va se retrouver ici

dans le spacing donc spacing à droite et

à gauche dans fig je vois que j'ai 22

donc si à la place d'avoir 15 je vais

mettre 22 dans webfow vous aurez à faire

deux saisies à droite et à gauche donc

pading 22 à gauche et padding 22 à

droite maintenant je vais faire la même

chose pour le haut je vois que j'ai un

padding de 16 je vais mettre 16 et 16 on

a presque terminé je vais rajouter notre

drop Shadow derri derè le bouton donc

c'est exactement pareil et les

caractéristiques sont partagées le drop

Shadow dans Webflow se trouve ici donc

faut pas mal descendre dans les options

vous cliquez ici dans plus box Shadow et

là vous mettez les M caractéristiques

donc en X j'ai 0 en y j'ai 5 et en

blleur j'ai 15 la couleur va être

différente par contre ici vous pouvez

cliquer sur le carré rentrreer votre

couleur et laissant en 100 %. et là j'ai

exactement la même chose dans dans figma

et dans Webflow je vais juste passer le

texte qui est dans figma en semibold et

dans Webflow actuellement c'est en

normal et donc je vais sélectionner

semibolt j'ai mon texte j'ai mon bouton

je vais juste rajouter le badge qui est

auessus du texte donc c'est un peu la

même chose que le bouton donc pour ça

vous allez cliquer sur texte bloc vous

allez le mettre au-dessus de heading

title sur la maquette je vois que j'ai

une flèche à côté donc pour être plus

accurate je vais mettre une div bloc et

mon texte à l'intérieur parce que

ensuite je vais mettre ma flèche vous

allez sélectionner votre div

block badge Hero section alors je

pourrais styliser le texte directement

mais comme j'ai une flèche qui va aller

à côté et je préfère styliser tout le

temps une div block plutôt que le texte

à l'intérieur ça change quasiment rien

sauf que si je voudrais rajouter un

élément à côté je vais avoir des

difficultés je préfère toujours avir une

div que je stylise dans badge herosction

on va changer le fond je le passe en

blanc ajouter du radus donc le radius de

mon badge dans Sigma je vois qu'il a 10

donc je mets 10 j'ai des marges qui sont

beaucoup plus fortes à droite et à

gauche à droite je vais avoir une marge

de 10 et à gauche une marge de 10 et là

surtout vous faites respirer bien le

texte parce que sinon vous avez le texte

qui est beaucoup trop collé et on sent

que ça ne marche pas bien mettre du

padding à droite et à gauche et aussi

envoy en bas donc je vais rajouter 4

pixels je vais changer le texte le texte

Tex et en médium dans badction Changer

la caractéristique làdedans donc dans

weit je vais le passer en médium faut

webfow va vous mettre cette couleur là

donc hashtag 333 vous pouvez toujours

changer la couleur donc badge-

herosection je colle ma couleur ok à

côté j'ai une flèche donc pour ajouter

la flèche vous allez cliquer sur le plus

et rajouter donc dans média ici vous

avez image vous allez la faire glisser

dans badge heroction dans figma vous

pouvez exporter directement l'icône vous

faites contrôle pour sélectionner votre

icône et ici je vais plutôt cliquer sur

arrow right et je vais faire un export

en SVG comme ça j'ai la bonne couleur

qui va sortir et cetera donc je fais

export arrow- right dans wefow j'ai bien

uploadé l'image donc vous pouvez ici

cliquer sur choose image ensuite vous

cliquez sur l'image pour l'ajouter là

j'ai bien mon image je clique

dessus donc là ça va faire comme ça

c'est pas ce qu'on veut parce qu'on veut

que la flèche aille auudessus et si vous

étiez dans figma effectivement vous

aurez pu prendre la flèche et essayer de

la faire glisser la mettre à côté sauf

que dans flow ça marche pas comme ça

mais ça c'est simple ça va être comme un

auto layout vous allez cliquer sur badge

t section vous allez faire la même

caractéristique qu'on avait dans le

container vous allez cliquer sur Flex et

ici vous allez avoir ensuite l'image qui

va suivre le texte parce que une flexbox

c'est comme un autoayout vos éléments

vont se suivre dans container on avait

fait une direction qui était verticale

donc P toujours mettre une direction ver

verticale mais dans notre cas on va

laisser la direction

horizontale je voudrais juste plus

d'espace entre mon texte et ma flèche

donc pour ça dans gap vous allez rentrer

8 pixels sachez que j'ai quelque chose

pour vous j'ai créé une mini formation

qui explique luux design le web design

en général vous pouvez recevoir cinq

leçons où j'ai condensé le meilleur que

j'ai appris tout au long de ma carrière

vous pouvez le recevoir directement dans

votre email maintenant en cliquant sur

le lien en description mais je vous

laisse la suite de la vidéo pour

terminer sur le badge je vais juste le

rajouter un trait vous avez stroke et

vous allez rentrer ici le le trait par

défaut ça vous met un pixel et je me

change la couleur donc ça assez léger

parce que c'est un trait qui est autour

du badge c'est pas très visible mais

c'est pour respecter la maquette et vous

voyez qu'on peut respecter la maquette

au pixel prè en rajoutant le trait ici

tous mes éléments à l'intérieur je vois

juste que mon texte ici il est trop long

par rapport à ma maquette je vais

exceptionnellement changer sa largeur

ici vous cliquez sur paragraphe- h-

pour l'instant je vais changer la wid

ici je vais mettre 760 pixels mais vous

verrez plus tard qu'on va plutôt

basculer la valeur làdedans je change je

mets 760 pixels et du coup mon

paragraphe diminue et comme sur la

maquette je l'ai sur tris liges il reste

plus qu'à rajouter l'image qui est juste

en dessous du bouton donc toujours mon

container médium je vais faire plus et

rajouter mon image je fais glisser média

image donc je le mets bien ici et et je

vais faire un export de figma sur mon

site webfow j'ai exporté l'image de

figma et je la retrouve donc ici je vais

cliquer dessus je vais exactement avoir

comme sur FA mon image juste en dessous

je augmenter la taille entre mon bouton

et mon image parce que les deux sont

beaucoup trop près je vais mettre une

div juste en dessous de mon bouton donc

une div bloc et vous rappelez qu'on

avait mis une marge ici pading bottom

médium je faire exactement la même chose

pading

bottom

et ici je pourrais laisser médium pour

avoir 16 pixels mais si je veux plus

j'ai qu'à supprimer médium là je mets

large et à la place je vais mettre 32

pixels et là j'ai beaucoup plus d'espace

entre mon bouton et mon image comme sur

la maquette parce que je vois que j'ai

une différence de pixel on peut être

plus proche de la maquette et mettre

vraiment le nombre de pixels précis moi

j'aime bien travailler en taille 8 parce

que lorsqu'on convertit les valeurs en

remem donc on va pas trop rentrer dans

le sujet mais on souvent lorsque vous

développez votre maquette sur wefow on

va travailler en remem et si vous voulez

un Rom é= 8 pixel donc c'est pour ça que

j'aime bien travailler en pixel mais ça

pourrait faire l'objet d'une autre vidéo

je commence à avoir vraiment ma

aerosection le header qui ressemble à ma

maquette j'ai terminé par les petits

détails qu'on a sur la maquette donc par

exemple dans ma maquette je vois que le

titre il est pas en blanc il y a un

dégradé à l'intérieur et on peut

rajouter un dégradé dans un titre figma

c'est assez simple vous sélectionnez et

vous mettez votre dégradé dans wefow

C'est un peu plus complexe mais vous

allez voir c'est assez simple là quand

vous essayez de changer la couleur de

votre titre vous êtes un peu bloqué

parce que vous pouvez changer que la

couleur en une fois il y a pas de

dégradé ce que vous pouvez faire donc

même si vous laissez en rouge vous allez

cliquer ici dans background et cliquer

sur le plus ça va vous rajouter un une

image de fond mais sur tout le cadre du

titre donc à la place d'avoir une image

vous cliquez ici pour mettre Linéar

gradient et ici vous changez les

couleurs donc je vais reprendre les

couleurs que j'ai dans

FIMA donc la deuxième c'est blanc place

d'avoir le blanc et 100 % ici vous

cliquez et vous basculez plutôt le

l'opacité ici ok vous avez votre blanc à

l'intérieur vous dites ok ça marche

toujours pas à la place d'avoir clipping

non vous allez mettre clip background

tout texte je crée cet effet de dégradé

où le texte ici est plus foncé parce que

vous avez l'opacité qui est moins

prononcée donc c'est vraiment du détail

mais c'est plus pour appuyer et juste

pour changer parce que quand vous allez

double cliquer vous allez voir le le

rouge qui apparaît c'est pas très beau

ici dans couleur vous laissez en blanc

mais c'est V en plus pour pour vous

parce que factuellement vous aurez

vraiment le dégradé qui apparaît

par-dessus le texte c'est pareil il est

pas vraiment en blanc sur la maquette il

est d'une autre couleur donc je vais le

changer vous enlevez la couleur fait

reset et ici vous collez votre couleur

petite différence c'est que sur ma

maquette vous avez une lueur derrière un

espèce de de lueur et ça assez difficile

à reproduire dans Webflow donc ce que je

vous conseille de faire si vous voulez

rajouter du punch à votre maquette et

donc rajouter des lueurs vous pouvez

exporter les lueurs que vous avez dans

figma dans figma je vais chercher mon

groupe 1 où j'ai mes trois ellipses qui

font des lueur ce groupe 1 je vais

l'exporter en PNG et je vais le mettre

dans Webflow dans Webflow je j'upload

mes

lueurs et donc là c'est assez léger mais

vous voyez j'ai mon image je peux la

faire glisser et je vais avoir mes

lueurs ok ça marche très bien le les

couleurs marchent et vous avez la

transparence qui joue par contre il faut

arriver à la mettre derrière le texte

derrière l'image et pour ça bah là on

est un peu bloqué j'ai beau déplacé mon

image il considère que c'est un bloc

entier et faudra jouer avec les

caractéristiques CSS vous allez voir

c'est assez simple donc je vais juste

supprimer mon image et rajouter des

caractéristiques spéciales pour pouvoir

mettre euh mon image à l'arrière donc

container médium vous allez passer la

position en

relative ça va quasiment rien changer

pour l'instant mais en gros si vous

voulez ça va définir le cadre pour nos

lueurs parce que sinon euh si vous êtes

sur une plus grande page avec euh aucun

bloc qui est en relatif vos lueurs

peuvent partir un peu n'importe où donc

vous prenez pas trop la tête sur les

positions sachez juste que votre

container vous allez le passer en

relatif vous allez cliquer sur plus

rajouter une div block donc on peut la

mettre juste sous le bouton et dans

cette div block on rajouter notre image

donc je fais glisser no light ça va

recréer le même effet qu'on avait par

contre sur la DIV block qu'on avait

rajouté je juste l'appeler

light t background en position je vais

mettre absolute la position absolute en

quelques mots ça vous permet de changer

et de plus avir voir et d'être plus

normé par des blocs mais d'avoir une

position absolue par rapport à tout

faire passer en dessous et pour ça

toujours en position absolute dans auto

Z index le Z index ça vous donne la

position Z et donc si vous mettez -1 ça

va faire partir votre light background

derrière et là c'est génial c'est

exactement ce qu'on veut et dans

position auto ici à la place d'avoir

auto pouvez cliquer et faire défiler en

haut en bas et votre lueur va défiler

donc voilà descendre un petit peu à la

place d'avoir des pixels je vais mettre

par exemple 50 % donc là elle est

descendu trop bas mais je peux remonter

et la faire remonter donc je préfère

travailler en pourente que en pixel pour

des raisons de taille d'écran mais ça

marche très bien on a nos lueurs comme

sur la maquette juste rajouter la barre

de navigation pour ça on va un peu

tricher parce que c'est un peu long et

pour la barre de navigation vous pouvez

appuyer sur Add element vous avez layout

vous allez cliquer dans starter

librairie no Shadow parce que je vais

avoir mon logo mes lien et mon bouton

donc je fais glisser NAF bar no Shadow

dans body juste en dessous de container

médium et là j'ai ma NAF bar je vais

exporter mon logo de figma changer la

couleur des liens ici changer la couleur

du bouton je change je

clique choose et je vais mettre mon logo

que j'ai

exporté ensuite pour mes liens ici donc

par défaut ils sont en noir donc je

clique sur nav Link et à la place

d'avoir la couleur noire je vais la

mettre en blanc donc là j'ai tous mes

liens qui changent en en terme de taille

c'est pas les

bonnes c'est je vais faire reset donc

soit vous rentrez 16 pixels par contre

ça va allouir le CSS donc je vous

conseille plutôt de cliquer sur size et

de faire reset pareil pour comme ça ça

va prendre les caractéristiques de votre

body on va changer également ici je vois

que hover donc quand je passe la souris

les textes changent donc moi j'ai pas

envie d'avoir ça donc je clique sur Over

et pareil color je fais reset pour le

garder en blanc je reviens dans non et

ici je change mes

intitulés bouton je vais un peu le

styliser limite je je change la classe

ici je vais juste l'appeler bouton navb

donc dans ma maquette mon bouton en fait

il a pas vraiment tête de bouton donc

pour respecter la maquette ici je vais

enlever la

couleur je vais mettre

dashbard et juste tous mes nav link je

passer en médium et pareil pour bouton

ici et là on a terminé la maquette on a

exactement la maquette qu'on avait sur

FIMA sur webf et vous avez vu ça a été

plus long parce que les éléments on peut

pas les mettre à la volée mais ce qu'il

faut retenir c'est que si vous créez un

container médium avec des

caractéristiques à l'intérieur en terme

de taille en terme d'alignement au

milieu et en rajoutant du padding vous

allez avoir exactement la même chose

donc là la nave bar elle est un peu

complexe parce qu'on a pris une nave bar

qui était déjà faite mais ça vous permet

d'aller plus rapidement la dernière

chose qu'on va faire c'est d'adapter

notre maquette au format responsif donc

au format mobile de la version desktop à

la version mobile c'est génial sur

Webflow vous avez juste à cliquer ici

donc quand je clique bah je vois que

malheureusement ça suit pas parce que

j'ai des caractéristiques qui font que

quand je rétrécis mon

design bah voilà ça marche pas parce que

on a mis des tailles de wieds dans

certains éléments dans mon container

médium on a mis 960 pixels ça marche en

desktop mais ça marche plus en mobile et

on va enlever la caractéristique donc là

ça ne marche plus parce que j'ai plus de

bord autour là ça marche plus et à la

place je vais mettre cette

caractéristique dans maxw et là je vais

mettre 960 pixels ici donc là ça change

quasiment rien en desktop par contre en

mobile vous avez tout qui

s'adapte sauf le paragraphe mais vous

voyez que ça marche beaucoup mieux ça

Fed beaucoup mieux ça rentre beaucoup

mieux parce que on a mis la valeur dans

maxweed je vais faire la même chose ici

dans paragraphe Hero section je fais

reset je vais mettre 760

ici ok ça marche beaucoup mieux là en

mobile j'ai quelques bugs mais vous

voyez que ça marche parce que mes textes

ici s'alignent on va rajouter des marges

pour notre menu en haut et pour notre

container ici parce que quand je passe

en mobile bah vous voyez ici j'ai pas de

marge enfin j'ai mon paragraphe qui est

trop près du bord donc par défaut dans

la barre de navigation il y a des il y a

du padding je vais l'enlever pour vous

montrer donc là mettez 0 et 0 comme ça

quand je passe là ça marche plus ma

barre de navigation voyz elle est collée

on va rajouter une div block donc

j'appuie sur plus je reviens dans

élément div block je la mets tout en

haut et dedans je vais mettre navb no

Shadow et mon container médium dans div

block je appel page

pedding ce div block je vais mettre 5

% et 5 %

donc ça a quasiment rien changé donc ça

a rajouté des marges sur les côtés de

toute façon il faut des marges pour

avoir l'ensemble et ici quand je vais

revenir en mobile bah là c'est beaucoup

mieux ça respire beaucoup mieux j'ai 5 %

de marge donc là ça se voit pas beaucoup

mais vous voyez entre le paragraphe ici

j'ai 5 % et ce qui fait que ça respire

beaucoup mieux vous avez des marges qui

doivent être présentes pour votre design

l'autre élément qui ne marche plus bah

c'est le titre qui est beaucoup trop

gros en version mobile donc ce que je

vous conseille dans wefow c'est plut

plutôt de modifier le les

caractéristiques en landscape qui vont

avoir des répercussions en mobile

c'est-à-dire que ici par exemple je vais

mettre 40

pixels et les 40 pixels vont s'appliquer

euh dans cette taille-là par contre

elles ne s'appliqueront pas sur la

version desktop pour être plus accuré je

vais mettre 38 pixels de hauteur parce

qu'en mobile vous pouvez mettre des

textes plus petits hauteur je vais

mettre

44 ici pareil le paragraphe est un peu

grand on va plutôt le passer en 18 ici

vous allez mettre 24 avez votre page qui

est prête en mobile donc je suis en

desktop ça marche je clique sur mobile

et là vous avez votre maquette votre

site qui est prêt en format Desktop et

responsif une fois terminé vous pouvez

carrément publier votre signe maintenant

en ligne vous avez le bouton publish

vous faites publish tout sec domain et

ensuite votre site sera carrément en

ligne et vous pouvez envoyer votre site

à des clients à vos proches et cetera

merci beaucoup d'avoir suivi ce tuto de

transfert de maquette figma à la main

vers Webflow jusqu'au bout je vous

retrouve dans une prochaine vidéo à très

bientôt