Это видео недоступно.
Сожалеем об этом.
Why I Ditched Figma
HTML-код
- Опубликовано: 20 авг 2023
- Not too long ago I ditched Figma and said, "I'll only return to using this tool under one condition."
What was that one condition? And why are things different now? Why am I back to using Figma?
Watch to find out. This is the story of my journey from Adobe XD, to Figma, to leaving Figma, and then returning to Figma again, with specific examples.
Get ACSS Tokens and Frames for Figma here: getframes.io/f...
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
![Gunna - today i did good [Official Video]](http://i.ytimg.com/vi/ulGLk8TaXcI/mqdefault.jpg)
No no no, don't do clickbait...We know you and appreciate you for being genuine and straightforward. That's why the audience likes you. No need for potentially misleading titles, we will watch your videos even if you give them dull and boring names :)
Gotta have some fun :) And it's not really clickbait. I did actually stop using Figma because it was too much manual work. So we fixed that, and now I'm back to using it.
@@Gearyco...Therefore, the title is obsolete in reality, so to speak :)
@@stripedgoat8470 Obsolete to current reality, but not obsolete to explaining why the decisions were made and what the process has been :)
@@Gearyco You could satisfy his objections AND make the title super clickable with a little creativity. 😉 For example:
"Why I Ditched Figma (and why I came crawling back)"
"Why I Ditched Figma (and then came back)"
"Why I Ditched Figma. And Why I Need It Now More Than Ever."
@@AR-ym4zh Which by definition is a clickbait title, like the O.P. said.
Amazing! Will you be able to show a short 30-min setup to start a new design project? ie. copy ACSS/Frames figma file, rename to project name, setup colours, logo, then create a sample home page
It would be very helpful
Before you start reading this long message, I emphasize that, as a beginner (in the ACSS and Frames world), I have a few doubts. It's not my intention to belittle Kevin's work and ideas, since following him I've learned almost everything I know! To begin: There are so many unknowns that I don't know if I need all of this. I can't decide to buy a product that doesn't show anything other than a few lines of explanation and two of Kevin's videos. The first thing that comes to my mind is the layout of the CSS organization itself: how do I see the assignment of values, is there an option to export classes, variables, is there an import option in Bicks... Because as much as Frames for Figma can help me in site design, it's a waste of time if I have to create it all over again in Bricks. I understand that you can't do everything at once, but is there, at least as an idea, a view that in the future things will be somewhat automated? I know that they are already working on the export from Figna to the ill-fated Elementor. Well, if it can handle "dirty" Elementor, it can also handle Bricks! 😊 I apologize for writing so much...
Hey there! If you are unsure about whether to buy Frames for Figma add-on now, no worries! You don't have to make a rushed decision. As for your questions (which are solid ones) - we are working on a documentation which we will release sporadically. A lot of explainer videos are also in the pipe. Now that bein said, I will try to answer them one by one:
1. how do I see the assignment of values?
Besides the indication in Figma native design panel which shows all of the assigned ACSS Tokens at the bottom, there is also a feature in Tokens Studio plugin called "Inspect". What that does is that it clearly shows what tokens have been applied to the element.
2. is there an option to export classes?
Unfortunately no.
3. is there an option to export variables?
If we're talking about ACSS Tokens (variables), you can export the JSON file and use it across other Figma files.
If you would like to import those variables to Bricks, then no - right now this isn't possible. However after the initial funding phase, we would like to work on this very feature and see what options there are. Don't take this as a promise yet though - it is just the idea we would love to have and we'll make sure to put effort in it.
4. "it's a waste of time if I have to create it all over again in Bricks"
Actually, you save a lot of time with this workflow. I am a designer with more than 10 years of experience and I can honestly say to you that once you get comfortable using Frames for Figma, you wouldn't want to go back. It just doesn't make sense time-wise.
I hope that this clears a bit of confusion for you right now.
As I said, are main goal now is to release documentation asap so that all of you can start saving time with Frames for Figma add-on....and alongside make as much new Frames available as possible.
@@uioverhaul Thanks for the quick and comprehensive answers! A lot of things are clearer now. Knowing your enthusiasm, I think we won't have to wait long for the mentioned improvements! Until then, we are waiting for the aforementioned documentation and videos. Thanks again! :)
@@mdn1808Sure! You're welcome.
@@mdn1808 EXACTLY how I feel. Everything is about this is 'going' to be.
Without proper documentation where I can find all the answers I need, I don't care what the product is or what kind of flashy sale or sales pitch is done, I'm not buying it.
In fact, you can save the sales pitch and the flashy easy-use video.. and just show me the documentation of what I am to expect (at least at the time of buying it)!
This is neither the first nor the last time I spilled 300 dollars. At least I have some hope that everything will be fine. I waited for the LT ACSS and finally paid for it, let this go as well and as it will be, so be it. To cut it short: I bought a license 🤳😁
Congrats on the launch! Frames for Figma was an insta-buy for me.
😢 I missed the launch price, I was on holidays. I hope it comes back 😢
can you please share links or update the video description with links to the videos you mention at ~19:50?
I really enjoyed watching your video where you shared your web design workflow insights! It's fascinating to see how you've managed to make the whole process so efficient by combining various tools. Now, here's a fun question for you: If you could have any superhero power to instantly solve a design challenge, what would it be?
Clients not asking for stupid shit and detailing various aspects of the project
Fascinating perspective! @kevin Geary
Imagining a superhero power to solve design challenges is a creative and intriguing idea. If I could choose a superhero power for design, it would be "Design Telepathy." With this power, I could create intricate designs in a matter of seconds, eliminating the need for lengthy design processes. Revisions and adjustments would be a breeze. With the power of Design Telepathy, I could turn every design project into a masterpiece and save valuable time and effort for both clients and myself. Plus, it would make the creative process even more enjoyable! 😄🎨✨
Kevin, your detailed explanation of how your process has evolved over the years is both informative and insightful.
nice video very informative
As I understand Frames for Figma allows you to build Frames layouts in Figma, however once you start editing those Frames in Figma, to get that into Bricks you'll need to manually replicate each change in the Bricks environment, right? There is no importing from Figma into Bricks.
Correct, there's no import from Figma to Bricks. But when you use the same Frames in Bricks, 70% of the work is already done for you. And you're free to match the Figma styling without working backwards and without making a mess of the database.
@@Gearyco technically what do you think the possibility for making this ideal situation work sometime in the future?
I understand why its efficient to do this in Figma to Webflow workflow as u can import directly but when rebuilding it again in bricks after building it in figma, it just feels like overhead.
@@tommisaltiola well compared to how webflow works yes
I don't use figma, so maybe a noob thinking but, I think that modifying in figma is similar to modifiying in bricks, because when you change things like colours, fonts. etc, then, the original wireframe is also afected because is linked to those variables no? But.. maybe is easy to duplicate the file and start again with 2 o 3 independent files.
I'm starting to deep into more pro web design, so maybe is a good time to join figma world.
"the original wireframe is also afected because is linked to those variables" - Yes, exactly. It is desired behaviour, because you have global control. You certainly can duplicate file as many times as you want but there is no need to do this really because you can iterate in Figma on your current project really fast thanks to ACSS Tokens.
For further clarification: You can have a linked instance of a frame or an unlinked instance of a frame. Content can be unique whether it's linked or unlinked, and certain styling can be unique even if a component stays linked. it's much more flexible than what most page builders offer in terms of components.
@@uioverhaul Thank you. I understand :) My question or comment was because the difference Kevin told about can't going back quickly on Bricks. So I thought is similar in figma, unless you have more than 1 file
Thank you@@Gearyco for your time on answer us.
Honest question, I've recently came across a wireframe AI tool for figma called relume? How does this compare with it?
Relume is pretty legit library of pre-made templates. However, you have to consider that it does not tie with any CSS framework. If you export a Figma project created with Relume pre-made components to Webflow, you don't have the global styling control that ACSS provides. You don't have the fluid typography, so you have to either set font-sizes on each breakpoint or create your own custom CSS fluid typography variables. Same applies to color management, spacing, etc etc...there is a lot to cover.
The main difference here is the ease of development (and design - I believe!).
Once I mockup a page in Figma with Frames for Figma add-on, the time it takes to develop that project in Bricks will be MUCH MUCH less than what I would have to spend in Webflow for responsive design....
Thats because Frames is built with ACSS, which takes care of responsiveness automatically....and besides all of that, it provides many quality of life improvements along the way.
Also, Frames for Figma add-on is not specifically tied to the Bricks workflow. A designer can use Frames for Figma just because those wireframes are great looking and paired with ACSS Tokens, it gives a design freedom every designer dreams of.
This is not possible with Relume library.
Well it's got my attn since the video right under this by Kevin is titled 'Figma is a critical step in a pro design workflow' and Frames for Figma was just apparently released
Great content as usual but intentionally misleading video title. Hmm, 'fool me once..', I guess
How is it misleading? I left Figma. Then I came back. This video explains why.
@@Gearyco watched it in it's entirety and I see now - but c'mon haha - if I got separated from a friend in a store and we were on the phone trying to find eachother and I said I went outside to the car (which was true but I didn't mention that I went back in the store afterwards), my friend would most definitely assume that I was in the car XD
Anyway, congrats on the launch(es). One more thing I have to convince mt dept head to get a client to pay for ;)
@@alexisrabbitt4430 It's a fun twist, that's all. But I did want to explain why I left and then came back. Let's say it's "at the clickbait line, but not across it."
Ok this is pretty epic. Really appreciate your excellent tutorials, in the past i've held out from buying ACSS as I mainly work on 2 large sites and only develop +/- 4 extra sites annually. So ACSS wasn't a necessity for me. But I have to say as a "suite" these tools really make a strong case for productivity and maintainability. Time to hop onboard - Great work!
Great to hear!
Great, but I think it would be helpful if you showed how it integrates with Figma Tokens plugin, and what is the variables setup in the figma file..
It is not clear if "ACSS for Figma" is the "master style guide" that you show in the video. Thanks for the great work as usual.
Have you seen this one: ruclips.net/video/YzIT56YBf7U/видео.html
What happens if you swapped the instances in a fully designed project? Like the way you swapped out the hero style in the wireframe when the design is completed?
Anything that's using a token will swap with the current token values. But you'll be swapping in a otherwise unstyled version that you'll need to design. Of course, if there's a version of that frame you already designed that you want to bring in, you can do that too.
19:21 - you said there a mother video wherein your lead designer would demonstrate how he goes from a wireframe to a fully designed figma project which is ready to handover to the dev team to build in Bricks. Is that video done? Please share the link to it.
We will be doing a series for that soon
@Gearyco I'm waiting for this video also. Thanks
I used Sketch for a long time, now I've gone back to Affinity Designer 2 to work on my ideas visually, then Visual Studio (with Apple notes holding all my CSS libraries) and a builder like Oxygen or Bricks. Largely I think because I know what can and can't be done with CSS so I can replicate that very very quickly in Affinity Designer - or as you say, I often prototype directly in the builder - especially for responsive design. Nice lean, agile approach. I did use bootstrap and tailwind for a bit, but after a while it's easier to build and maintain what you need. ACSS looks very good though.
That’s one convoluted approach 🤯 I also like Affinity but Figma is freaking slick (try it). This compilation is a slam dunk.
@@chriswagoner3316 I also have a weird obsession with subscription software. I spent 80% of my time in Oxy/Bricks tbh, only when I have something fiddly do I look at Affinity. I don't really like Notes but I have 3 Mac work machines so it's handy to have commonly used code on hand. I usually have VS code open with all my Vars - so I can quickly look them up - it's not convoluted at all tbh.
Where to get this now that launch is over?!
Coming again soon
Documentation? Sorry, but without proper documentation, I'm one that reads documentation from start to end even if I buy a toaster, I can't commit / buy.
You are definitely a trusted source. But I'm bewildered that at this price point you didn't think that developers would want / NEED to know exactly what are the capabilities and functionalities that I'm buying?!
You have 2 videos (that I know of) that show very basic info while in figma. How does this get exported / imported back into Bricks?
What happens IF Bricks' devs decide to do away with remote templates.. then theres no need / use for Frames + ACSS Tokens + Frames for Figma + Figma?
Is root: / SASS capable anywhere in here?
Can ACSS / Frames / CSS work already done in an ongoing Bricks project be imported into this Frames for Figma product?
Personally, I think there are just too many moving parts here. And like with anything with multiple parts, when ONE breaks it's an issue for the whole.
But the lack of documentation (even at this point of development), it's a total deal breaker for me, until this has matured. While ACSS' new documentation is phenomenal.
No 14 day trial.. at a price point like this?
You should definitely wait until it matures. It’ll be more expensive, but you’ll have better documentation.
@@Gearyco Yea, at first it may 'appear' to be more expensive if I wait.. but to the contrary, to me it is more expensive if I have to spend way more time than necessary trying to 'figure out' functionality, when documentation would answer my question(s) immediately.
So yea, I certainly don't mind paying more for something that is fully documented.. it could actually save me money. Also, by then it won't be BETA and actually include all the frames and components unlike now, correct?
Agreed who pays $300 for Wordpress items without documentation on how it works 🤨
@@BGdev305 the tutorials for how to use it will be finished and published before the launch promotion ends. I’m not quite sure what you’re upset about. You must have never purchased a product from me. People buy because they 100% know I follow through. If you don’t want to buy, don’t buy. If you’re not comfortable with a 1.0 product, don’t buy. It’s as simple as that. The people who buy will get 50x the value they’re paying in perpetuity. Its 100% your decision.
@@Gearyco You assume I'm "upset" because I have an opinion different than yours about paying for something based off of "what it will be"?
FYI, I don't question YOU or your INTEGRITY, I simply stated my views as a developer considering buying your NEW products.. and from that you assume.. "upset"? ok
I've watched ALL of your videos, multiple times.. I have CLEARLY heard you express how you examine things before committing your money, time, agency's time, etc to it.. so why am I upset when I too apply that same mentality?
You said, "the tutorials for how to use it will be finished and published".. that is my point, the "will be" part. When will the "will be" part be a reality? A week.. a month? A year?
And yes, I do understand that those who have followed you for some time now AND have paid for your products are happy customers, I DO NOT DOUBT THAT.
But what does that have to do with NEW customers.. NEW developers who haven't? You do realize after reading all of the shiny marketing text on the site, we immediately go to documentation to KNOW just what it is I'm buying and what to expect for this to do for ME on day one.. and then we look at pricing.
Sorry that my non-fanboy pre-sales inquiries are interpreted as "upset" to you.
This is great, also before you can do the sitemap w/ Relume, and the frames, for more options...
I always felt it was a waste of time for websites, unless you were using it to replace a sketch on a napkin (maybe). For apps or web-portals it does make sense, especially if you're handing of to other dev teams.
Watch this one: ruclips.net/video/pfNyYcTNo8Q/видео.html
@@Gearyco I watched it when you posted it, and didn’t agree with it then, even though you made a strong case for using it. However, I personally don’t create layouts in Illustrator (or PS, PP, Word… whatever your comfy app is) just to recreate again myself in say InDesign. IF I’m collaborating, that’s another story and I usually let the other people decide on what’s comfortable for them. Figma is a great app for that.
Edit to add: you’re absolutely correct in the proper workflow to follow, and especially the ease of design iteration that Figma allows. However,as a designer, my industrial clients here in Europe want to see everything in place including pictures, text, icons… all finished to click through. They simply are not hands-on like they are in the US with the design process. Whether for a 200-page catalogue, ad campaign, logo for a new product… or web presence. It must be “finished” first before you can present it for review and changes.
@@TheDocPixel well it seems like you could explain to them why a wireframe is as essential as a blueprint is for construction work and that it needs to get approved before the design phase
@@banksoor precisely. Home builders don’t figure out the plan as they go.
Okay, this may be the “Chumpest” question every. I am not an agency, but have a lot of websites that support my business or I should say, I have a lot domains that will help support the business. I use Bricks, Frames, and ACSS. Love the combination that I am using and wondered if I really did to do the Figma plan. I work with two other people, and we just do work with Bricks and the current set up and watch all of your videos, so we seem to be fine. What are your thoughts?
I personally think Figma should be a part of every workflow, but that's just me.
How does the Figma files works with Bricks? Is there some export/import option?
We're workign on exporting settings so they can be uploaded to ACSS dashboard.
Can I take the same header and style it different on different pages (like styling on id level in Frames WorsPress? Or are the frames in figma only styled via classes, hence „global“?
Yes you can
Quick question @Gearyco :
I see you have shades and transparencies auto-generated based on the base colors. Is this based on the Modifier feature in Figma Tokens which is a Pro feature?
No, it is based on the calc functions, there is no need to rely on a paid version of Token Studio plugin :)
Just bought. Any documentation on installation/use? TIA
Yes in the community. You should get a link by email.
Counting down the seconds!
Whatever happened to acss and frames for Figma..seems to be closed.
Has to catch up with ACSS 3.0 which is still in beta
You're still using Figma, you used it to to make the table map in your recent dynamic website Bricks video.
You should try watching the video
@@Gearyco ha, yeah I'm just joking. I know you mention about improving Figma and such to improve the workflow.
I use ACSS + Frames and it’s great, but designing in Figma breaks the workflow. Everything would need to be re-imported into Bricks automatically from Figma.
I know you’re already seeing if that’s possible but that would really be the killer feature!
It’s just the workflow. It’s always been that way. It’s still better for many reasons. It’s just different for a lot of people and seems like more work. But the reality is that it’s less work for most projects. Unless you have a perfectly agreeable and decisive and timely client, it’s better to use figma.
@@Gearyco I’m not arguing against Figma. I’m saying that there needs to be a mechanism to take the Figma design into Bricks. To apply those styles and classes and customizations done in Figma
I know. It would be nice, but it's just not really possible. Figma is a design tool. It doesn't have classes. It doesn't have semantic HTML output. It doesn't have different types of containers. It doesn't have elements (like buttons). There's no way to 1-1 map things.@@JordanStambaugh1
Clever clickbait, got me clickin'! I'm already sold on it anyhow - if I end up doing another full build project I'll be investing
This does not make any sense. If you have all of the controls in Bricks and Figma why not just develop in Bricks. The wire frames can be done quickly in Bricks and shown to the client right on the site and changes to the layout can be done faster in bricks. Dropping in the color is a snap.I just dont get the need to use Figma at all.
It definitely makes a ton of sense. That’s why it’s industry standard practice.
When will the LTD offer end?
Not sure when the actual LTD will end, but the special launch price and this bundle LTD are only guaranteed until next Monday. The LTD could continue after that, but the price could be higher or we could pull the LTD altogether. Basically, nothing is guaranteed after next Monday.
Gives me something to do this weekend…. buy this!!
Question: How are you achieving the "Identity" single source of truth? It's shown at 16:40.
While I understand we can use components or Tokens for styles, how do you achieve a text based single source of truth?
Appreciate your videos a ton!
It is achieved with Figma components.
Figma has much better component functionality than most page builders. They allow you to map unique content into global components.
@@Gearyco I didn't know unique content being mappable to components. TIL!
Would you know any resources I could read more on this? I really liked the way it's implemented in the video.
Awwwe yeahh!! Gearyheads rejoice! The Gearyverse just expanded again.
Do ACSS and Frames work with Gutenberg yet?
ACSS is Gutenberg friendly, yes :) Frames not yet
Looks very good, but I am mostly interested in how it comes back into Bricks, after the designer has transformed the wireframe into designed pages.
I look forward to seeing the video about that part of the process.
They need to open the Figma file and click each frame (or element), note its name then in a separate window in Bricks, add that frame.
It's not possible to export the data into Bricks or Oxygen or whatever pagebuilder you're using.
The main big benefit is making it quicker to design and know that that frame or element is possible to create in the builder.
Figma has components. There are no components in brix. It is not known whether components will appear in brix or not.
The cwicly components will be released soon.
Components are on the bricks roadmap
Gonna be good....
QUESTION: If I buy your limited time offer, do I need a separate version of Frames and ACSS for Bricks also?
Yes, ACSS Plugin and Frames plugin are separate products form Frames for Figma Add-on.
@@uioverhaul Thank you!
This is blasphemy. This is madness!
No... This! Is! Frames (for Figma!)
Get it before the government comes and regulates it! This kind of increase in margin won't go unpunished for long!
Do I understand that for people who own ACSS and Frames, this is not something that comes with it? It wouldn't make sense to buy one without the other, so it just seems like a double-charge. We have to buy ACSS and also buy ACSS in Figma, then buy Frames and also buy Frames in Figma. That seems a bit much, sorry.
How could we include it free? It’s a completely different product with a completely different team and completely different support requirements? It was highly requested, and we aren’t a charity. We said from day one of frames that the figma version would be an add on for those who want it.
ACSS Tokens and Frames for Figma add-on are separate products. It takes tremendous amount of time to create something like this, as this is a very robust framework. In fact, no other UI design system for Figma comes with the options that Frames for Figma add-on provides. We're first on the market right now who offers this kind of integration.
With that being said, the real value for you here is the time you will save on every project. It can literally save you days of design & development work. Overtime it adds up. If you are a professional, this is something you might consider for your own good and you might want to give this a try ;)
@@Gearyco The idea is that there is no reason to buy the Figma thing if you don't own the normal ACSS too. It's not really a standalone thing in that sense.
I might have bought it for $89 or even $99 maybe. But this is a stretch.
Interesting point of view !
This aged well…
Did you watch it, or just read the headline?
Relume plugin can do this in figma
Relume is a great library of templates, however Frames for Figma add-on is different in many ways. It leverages the use of ACSS Tokens right inside the figma file. This is where the real power of Frames for Figma add-on relies. However, besides ACSS Tokens, it has some other unique features you won't find elsewhere.
Relume is extremely limited in comparison.
Frames 🎉🎉🎉.
...for Figma :)
@@Gearyco Will frames come to Cwicly or GenerateBlocks 🤔?
Did you just make my life a lot easier AGAIN!!!?? 😍
It’s A habit
@@Gearyco you are the king of category design. Exactly and exactly what was missing and filled the gap. Can’t wait for the video on how to do a back and forth process.
with that layout templates you will only produce repeated common layouts which you see on almost every website. Shortcut is not creativity. LOL
They’re common because they convert. This isn’t an art contest.
Compliment 👍
Thank you! Cheers!
Hard to say no 😂😭
Don't fight it.
If you weren't triggered by the headline (😂), you can grab the bundle here: getframes.io/figma/
Do I need to purchase ACSS in order to use it together with Bricks?
@@dichen4495 Frames for Figma add-on is a standalone product. However, if you want to reach god-level speed in design and development than yes, ACSS + Frames for Bricks is definitely recommended as it will make development part a breeze.
@@dichen4495 I mean, you could always build from scratch in Bricks. But if you want most of the work done for you, you'll want to use ACSS + Frames.
I knew it wasn’t so LOL
Cookie cutter
Cannot stand Figma.
Horrible program.
What don’t you like?
Amazing! Will you be able to show a short 30-min setup to start a new design project? ie. copy ACSS/Frames figma file, rename to project name, setup colours, logo, then create a sample home page
Oh ok, I think around 19min+ you say there will be a demo for it with the designer of ACSS token and developer of ACSS, if I didn't misheard anything haha
Yes, we're working on the getting started video right now. And I'll be doing many more videos on this channel as well.