Mastering WEBFLOW STYLE GUIDES [Figma to Webflow Step by Step]

Поділитися
Вставка
  • Опубліковано 1 гру 2024

КОМЕНТАРІ •

  • @designbasestudio
    @designbasestudio  Рік тому

    👉 Work with me: www.designbase.studio/

  • @KivancBayraktaroglu
    @KivancBayraktaroglu Місяць тому +1

    Hi there,
    Thank you for the informative video. As a newby I wanted to ask if there is a direct way to export style with everything to webflow from Figma.
    Let's say if I change the button color and wanted to see it on the webflow I want to change it from Figma and export the style to Webflow without other pages. Only with the styling.

  • @LiLAlbiHD
    @LiLAlbiHD Рік тому +4

    Thanks for the video! Its really informative even for intermediate people like me. I appreciated seeing your process and learned a lot about efficiency here

  • @mrbl1986
    @mrbl1986 5 місяців тому +1

    Danke für das Tutorial! nice Greets Bryan

  • @johnnymuller7454
    @johnnymuller7454 Рік тому

    Just did my first CMS collection and page with your CMS for beginners tutorial 🎉 thanks for all the content, using it all the time

  • @seb-astian-design
    @seb-astian-design Рік тому

    Awesome videos!! Really was looking exactly for this. Thank you

    • @designbasestudio
      @designbasestudio  Рік тому

      You‘re welcome! Stay in the flow 👌

    • @seb-astian-design
      @seb-astian-design Рік тому

      @@designbasestudio I'd love to use the fluid typescale generator you've used. Do you have any updates when it will be live?

    • @designbasestudio
      @designbasestudio  Рік тому

      We didn’t find the time yet to proceed with it this summer. So probably this autumn!

    • @seb-astian-design
      @seb-astian-design Рік тому

      @@designbasestudio great!!
      btw did you try out framer as well? if so what would you say is a strength of webflow?
      for me it just seems way more flexible and more customizable with js and css

  • @tezeroman
    @tezeroman Рік тому

    Hello Felix. I watch lots of videos in order to learn web design and development in Webflow but I find your organised approach the most appealing. So from the beginning I'd like to stick to your system and get used to it along the way.
    I would like to ask you whether you modified your approach, making use of new variables. I guess they are helpful but would be cool to see how exactly you are going to implement it in the process :) Thanks a lot!

    • @designbasestudio
      @designbasestudio  Рік тому +1

      Hi Roman, happy to hear that you enjoy my content! Variables are great in general but Webflow needs to give them media queries before they are fully usable. Without media queries you can almost just use them for colors and I don't see any advantages over classes. Sure, you could build your own workarounds with custom code, but why make it even more complicated with this?
      For me personally, that means I will wait until an update with this.

  • @ChristianBachmann-Webdesign
    @ChristianBachmann-Webdesign 6 місяців тому +1

    Your vids are awesome! Thank u so much. just for curisoity. do you using e-camm for recording your Vidoes?

  • @adamjazowiecki
    @adamjazowiecki 5 місяців тому +1

    Super! What is the program to make the proper font size and then you can copy css? Time from your film 16:29

    • @designbasestudio
      @designbasestudio  5 місяців тому

      This was a solution we have build ourselves bit didn’t release it. Currently I am working with utopia.fyi/type/
      From my experience this is most flexible and delivers the best results.

  • @Michael.........
    @Michael......... Рік тому +1

    Great video! Will your workflow change with the recent update? :)

    • @designbasestudio
      @designbasestudio  Рік тому

      Hi Michael, I guess you are talking about variables. Unfortunately Webflow didn't release this feature including media queries for variables. Without, there are not many use cases (except you add some custom code).
      But once we got media queries with variables I am looking forward to use them for global stuff like spacings, boarder radius and so on..

  • @mikepapahotel
    @mikepapahotel Рік тому

    Hi Felix - just watching this for the second time - I'm liking what I see - well done! 😊👍🏻
    Quick question if I may - do you have the same system cloneable using black font on a white bg? If not - is there a quick/easy way to convert this one?
    Thanks again! 😊

    • @designbasestudio
      @designbasestudio  Рік тому +1

      Hi Mike, I am happy to hear that you enjoy my content. In general, the style guide is ment to be overwritten. Just change the styles for typography and colors that you should be ready to go! ✌️

  • @susa5045
    @susa5045 Рік тому

    Thank you for sharing this! Incredibly helpful! I let ChatGPT generate recommendations for fonts, sizes, scales etc. and then turn its response into JSON/HTML/CSS. Would you make a video on how to transfer that beautiful Figma style guide into webflow?

    • @designbasestudio
      @designbasestudio  Рік тому +1

      Also an interesting process! You are probably searching for this video:
      ua-cam.com/video/lMu98ivckkI/v-deo.htmlsi=y19LcbzyH15i5UTi

  • @suzybee123
    @suzybee123 Рік тому +1

    ❤❤❤❤❤❤!