From Figma to Editor X in Seconds | New Editor X Plugin
Vložit
- čas přidán 6. 08. 2024
- There’s an impressive new Editor X plugin that will take your design from Figma to Editor X in seconds.
Subscribe for more web design videos and tutorials: bit.ly/3IUiVpj
Join the Creative Crew here: bradhussey.hopp.to/crew-yt
If you use Figma to design mockups for your web design clients, you might be looking for a way to speed up your Editor X workflow. Well, I’ve got good news. Editor X has recently released a new plugin where you can upload Figma designs to Editor X. No more dragging and dropping things from Figma to Editor X, copying values over, copying color codes and fonts over. With a few clicks, you can speed up your Editor X design process and easily move Figma designs to Editor X and then start tweaking and finalizing.
While this impressive Editor X plugin (Figma to Editor X plugin) does get the job done, I do have to warn you, it’s currently still in beta. You might run into some bugs while using this plugin, and that’s expected when something isn’t fully released yet and polished. This video aims to show you how to upload Figma designs to Editor X with this new plugin, overtime, the bugs will get resolved. Check out the plugin in the Figma community, and search for Editor X or figma2x to start and upload Figma file to Editor X.
Get started with designing your next website with Wix Studio(previously known as Editor X):
bradhussey.hopp.to/wixstudio
Connect with me on:
Website: bit.ly/3DugDfI
Instagram: bit.ly/3uKtjuV
Facebook: bit.ly/3DtW5nD
Twitter: bit.ly/3K2gBy4
TikTok: bit.ly/3Dz3C4E
New to the channel? My name’s Brad Hussey. I'm a web designer and I’ve partnered with Editor X to create an inspiring, educational, and world-class CZcams channel and community for professional web designers and design agencies who are mastering the art, business, and craft of web design. On this channel, I’ll show you how to build websites with little code. I’ll also cover topics like, choosing fonts for web design, layout design for websites, and tons of Editor X tips and tricks videos and guides to get you started on your website creation process.
Learn how to make responsive websites and join us every week for new web designer tutorials, Editor X videos, livestreams, and challenges.
0:00 From Figma to Editor X in Seconds
1:37 Figma Mockup Being Converted to Editor X
3:52 New Editor X Plugin: Figma2X
6:12 The Imported Figma File in Editor X
8:47 Tweaking the Editor X Design
#Figma #EditorX #WebDesign - Věda a technologie
Join the Creative Crew here: bradhussey.hopp.to/crew-yt
In this couple of days i've been watching every video from your channel, you are great man, I enjoy learning with your videos, more people need to know you, keep grinding!
Thanks so much. I really appreciate that! 🙏🙏
Super impressive! Probably going to use it for my next website designs. Thanks for the video!
Awesome! So glad to hear that. Thanks for watching 😎
Just came across this channel, and realised the @Creative X brad hussey's udemy course on web development was the starting of my Frontend development journey. Right now I am a Founder of a Product Studio, and it's been around 5 years since I started my web development journey for the first time. Thanks to this amazing man, I loved what I was learning back then!
Man that is so cool to hear! Thank you for being a long time student and I’m so glad to hear that things have gone well for you :)
@@CreativeCrewCommunity Thanks Brad, for being a true inspiration!! 🙌
I did not know about this, thank you for making my life a million times easier!
Glad to be of service 😊
Brad Hussey!!!! I didn't recognize you with the stache (not digging it). Glad to see you back in the teaching airwaves. I first got your course for creating Wordpress templates with Bootstrap seven years ago and sold my first multisite template for 25k from your course I paid $15 for on Udemy. I just moved to Editor X and stoked to find you creating edu content for the platform. Man, I can't thank you enough for making that course and doing what you do.
Hey! Glad you’ve found me here 🤩
I’ve traded my long curly locks for a solid moustache, and I’m liking it 🤣👨🏻
It’s so great to see how much of a return you were able to get from my course!
I’m here to help provide a similar return for you with Editor X! What do you need to be successful in this stage of your career using Editor X? I’m here to help as always 👍
Cheers!!
@@CreativeCrewCommunity yea, I was thinking why does this dude look familiar. I just tried using this Figma plugin. Didn’t have a great experience. I’m moving from the classic editor to Editor X. I left my agency to go freelance and trying to get a process established to get work done efficiently and be able to scale up. That type of content would be helpful. I’ve been hitting “Flux Academy” and “I Love Editor X” for training and process if that helps on direction for content ideas.
How about how to make an actual “sliding” slider that doesn’t scroll back to the first frame after the last frame. Can’t seem to find that one.
This is awesome feedback and great ideas 💪 Thank you!
Hey have you joined the Creative X Crew yet? You should. Links in the description. Free to join up. Better access to me and the rest of the community for feedback, challenges and the like.
You just saved me a few hours! Thank you sir ♥
Always a pleasure my man!
You're so cool , knowledgeable & a problem solver! THANKS✨🙏🏻
Happy to help!
Great for basic websites and landing pages but not for large e-commerce sites/apps.
You’re probably right! But a great start for the structure and setup of an Editor X website.
@@CreativeCrewCommunity Absolutely!
This is good, with just a couple of adjustments, you can still achieve the design you made from Figma, rather than design it from the scratch in EditorX. However, I'm curious with the Input Fields design from Figma. Can EditorX convert that design into a live input fields?
I don’t think it quite does that part. Thanks for watching!
Would love to see the final outputted markup/code of that page to see what the underlying quality of code ended up being. Ia it full od divs inside divs inside divs? Or is it pretty clean?
Great questions. With any of these tools that output markup, it’s rarely ever as “clean” as if you would hand code it all from scratch, but heck, even JS and CSS frameworks these days output some wild markup. Heck, inspect the markup of some of the biggest sites, and it’s never as “clean” as we’d think it should be. As far as speed tests go, I’ve been super impressed with the Editor X projects I’ve created. Thanks for chiming in!
@@CreativeCrewCommunity yes you’re right. Definitely many huge websites out there with less than ideal underlying markup. I guess there’s that line in the sand and the balancing act between getting it done, servicing the features, layout and effects you want, and having minimal semantic markup.
Hey...how do you create sections in figma? Are they each their own separate frames and then grouped together? I know you said we click which frame we want to export into editor x but how we we do this if the sections are created as multiple "frames" does that make sense? ❤️❤️❤️
Hey Codi! To create sections, you would just create a Group of elements in Figma, within the same Frame. The Frames should be reserved for entirely different screens, like new web pages on the same site. Make sense?
@@CreativeCrewCommunity Yes, I think so....so it only requires 1 frame but you'd group all the elements from each section within that frame. Correct? Thanks by the way!!!
Every time I convert the result is a mess of jumbled text and incorrect sized elements, is there a way to properly set up my figma file so it converts nicely
Ah that sucks! Can I see an example of what you’re seeing?
Very good
Thanks for watching!
How about the animation/transition on figma, is it still the same when it goes to editor x? or it just transferred all the design and not animation?
Great question. They don’t transfer over the transitions from Figma to Editor X at this time.
Are there transitions in editor X though? Like when you click on things
@@Georgelikestodesign For sure! You can do tons of different custom interactions!
My question is can I design a responsive trading and investment website on editor X for a company?
👍
Hey Brad any chance you create an Editor X Udemy course?
There certainly is a chance! What’s your dream Editor X course and what do you learn?
Why can I find Editor X plugin? Is it available in the US only?
Because Editor X has been sunset as a product and has become Wix Studio, which is much better :)
the idea is that editor x is way more advanced than figma , they are different in methodology and concept , and i can do what in figma directly in editor x , that's why editor x is the next generation development and designing tool with a layer above Figma or adobe XD ,still editor x needs some adjustments and refinements and i hope they keep updating and adjusting editor x more and more until we have a complete tool
Thanks for watching and for your thoughts!
I tried this plugin and it ruined my whole design, not at all useful for me.
Bummer!! Sorry to hear.
DONT BE SO LOUD. omg.
Viewer discretion is advised: The presenter is known for his uncontainable excitement and occasional outbursts of exuberance. If you find yourself overwhelmed by his enthusiasm, simply adjust your volume accordingly. We cannot be held responsible for any sudden surges of excitement that may occur while watching this program.