Framer / General

How to import code into Framer X?

How to import code into Framer X?

Framer / General · September 24, 2018 at 5:23pm

The website declares that you can import/export code elements. However, I see nothing in the interface or even the support documentation that mentions this - I only see how to create components from scratch, nothing on import/export.

Is there a way to currently do this, or has the actual app not caught up with what's being marketed?


September 24, 2018 at 9:41pm

Create a new code component and paste your pre-made React component :) that's basically it. You can also install third-party libraries with Yarn, if you need to (File -> Show project folder -> open terminal in that folder, etc)

like-fill
2
  • reply
  • like

September 25, 2018 at 7:51pm

copying and pasting is fundamentally not what is being sold on the features page - it says explicitly that you should be able to import code from your project.

There's zero documentation around this feature, and I"m worried that the 'private store' feature in team packages is actually the import function being gated.

like-fill
2
  • reply
  • like

September 25, 2018 at 10:23pm

When I was poking around the beta, both ES6 javascript (not Typescript) and imports were said to be targeted for release

  • reply
  • like

ES6 has been punted on, but no word on imports. The docs are really sparse

  • reply
  • like

October 6, 2018 at 8:37pm

Color me dumb, but how do you open terminal in that folder? If I try to cd in to it, it says it isn't a directory.

  • reply
  • like

October 7, 2018 at 5:08pm

Color me dumb, but how do you open terminal in that folder? If I try to cd in to it, it says it isn't a directory.

Try to drag&drop the folder from Finder into the Terminal.

  • reply
  • like

October 9, 2018 at 7:12am

Hi @jasondb, Floris from Framer here. Could you elaborate a bit more on what you mean with "import/export code elements". Under the hood, your Framer project is a React project, so you can already import and export anything you want (or even install from NPM).

Is there anything you expect to work differently?

  • reply
  • like

October 9, 2018 at 3:07pm

Yes - I'd expect that I'd be able to pull in specific components from a project without intervention from my developers.

like-fill
2
  • reply
  • like

If every time I want to use a component I need to have a developer help me 'install' it into my framer project, that's quite an issue.

Nowhere in your support documentation OR in the interface does it tell you how to integrate/import code from your project. The only thing I see is the ability to create a new component in code - this is not what you are selling to the public.

The public website says "Everything stays perfectly synchronized." Where is the documentation on how to do that? Is the assumption that a developer will know how to integrate with a framer X project and keep everything synchronized?

That's what I mean by 'import/export.'

like-fill
1
  • reply
  • like

if u think import foo from 'bar' or "new code component"+paste requires developer intervention, the next decade in product design is going to be very hard on you lol what do you even expect to make it easier it's text

  • reply
  • like

i'd suggest rtfm-ing so you know how to open the text editor for your project folder

  • reply
  • like

Thanks for the thoughtful response imogen!

How does 'new code component' + paste support the claim that framer X seamless integrates with your code base?

there is nothing in the documentation surrounding this. But thank you for being crass. It's very helpful.

like-fill
2
  • reply
  • like

But maybe instead of telling me to read the manual, you should read the parts where I said I did?

  • reply
  • like

you really don't know how this works do u hun

read the overview here https://framer.gitbook.io/framer/code then the package section. there are links to other documentation that might be helpful for you to also read.

you will HAVE to interact with the codebase to add new code components, unless the component is published to npm

if you want to add components from outside the store, you can import from npm OR you can import from a folder that your devs put components into. all you have to do is a single-line import for each component.

want your devs to make it easier? have them put an index.js that imports the components, so you only have to import * from 'index'

again to you sir, i say rtfm, and if react frustrates you, you can either choose to use the store exclusively with a team plan for private components, or rtfm for react. these features are optional and i'm sorry you want to speak to the manager or whatever but you're asking for something to be easier because you don't like the workflow or are having difficulty learning it, not because it's a bad workflow.

i'm tired as hell of men in tech expecting everything to be spoonfed to them. you're taking time out of community manager's day because you might have to spend 5 minutes a day on project setup tedium

  • reply
  • like

Is this a serious person, or just a troll? Cause I can't tell if your attack on me being a man is real. Are there moderators on this board?

The documents in question, from THE FRAMER X website, are here: https://framer.com/docs

But thank you for trying to belittle me for asking a question.

like-fill
1
  • reply
  • like

I'm looking for the link you referenced, and can't find it on their website. How is that my problem?

  • reply
  • like

well, i gave you the link, so it's not a problem anymore.

i didn't attack you for being a man, i attacked you for feeling entitled to having a design-dev hybrid product adapting to your workflow preferences when you are clearly trying to use features you don't have the motivation to learn. features that are REALLY easy to use after skimming docs on es6 and react and bumping your head against the wall for half an hour. learning is a lifelong process.

seriously, this takes an hour or two to fully grasp from zero. you either do the work to learn the thing, or you don't. the world isn't sunshine and rainbows, i'm sorry you were born into a body that made everything easy for you. but you'll be okay. you've made it this far, and what's a frontend dev self-teaching for a big strong genius designer boy like you?

  • reply
  • like

"mods! mods!! arrest this woman, i'm being corncobbed!"

  • reply
  • like

Awesome - you gave me a link. Which doesn't help other people. It's still Framer's problem that their design fails to provide the documentation they've written up on their own public website.

You very explicitly attacked me for being a man...and then did so again in your comment about me being a 'genius designer boy.'

Asking a question, and trying to understand how a tool works, is NOT the same as entitlement...especially when they're asking for my money to use their tool.

I don't need to defend how motivated I am, but it's clear how motivated you are to attack so aggressively over some genuine questions and trying to understand a product being SOLD to me. Am I the only designer who isn't as good of a developer as you are? Probably not. And that's framer's problem - not mine.

But seriously, @floris, is this acceptable behavior for you? Is trying to make people feel small over asking a genuine question something that Framer wants to be associated with?

  • reply
  • like

dude i gave you the answers up top, you can do single line imports otherwise you have to paste or use the public or private store, why are you doing this defending-your-honor thing when despite my rudeness i have actually answered your questions

they're not asking for your money. you're asking for their tool. and you have a choice to pay for it. you're not gonna get drag-and-drop of .js, .js.es6, .ts, and .tsx overnight. if you had read the docs on es6 and/or react you'd know dependency management is a bitch and it isn't always reasonable to assume the component should be added at the top level, then you have conflict resolution concerns with filenames and export names, etc. just please. rtfm. cryin ass boy

  • reply
  • like

addendum: the code features in x are designed for people who want to code, and if you want to use them outside of the store ecosystem, you will have to get your hands dirty no matter what. sorry!!

  • reply
  • like

I'm trying to get my hands dirty, but the documentation framer has provided is lacking. But yes, it must be my fault. I'm sorry for trying to understand an application - clearly you losing your mind on me was well deserved, especially when I attacked yo....oh wait, I didn't.

3 times you've now gone after my gender. I'm sorry that you're such a mean person. I wish you the best.

  • reply
  • like

i mean the docs on react and es6. learn how npm and modules work

  • reply
  • like

you don't need more docs, you need to read what's already available to you. i linked you to gitbook which has extra writing that will tell you how to get the project open in a text editor. from there you need to know how es6 imports work OR paste the code. your initial question was if there was a way to import. apart from store, those are the ways.

your question was answered before you got all butthurt about me venting about your clear male-socialized entitlement complex—evidenced by calling for moderation twice because acknowledging the gender thing makes you uncomfortable, and for conceiving of sales transactions being a company begging for your patronage instead of you wanting something they have. it's not that you're a man. it's that being a man has led you to being fussy.

the last thread you were in involved you patronizing someone else in the figma forum, telling them their issue didn't exist because you were pasting a link in the wrong window. my tone would be a little softer if it wasn't obvious to me that you always think it's the other party's fault when something is wrong.

sup floris. you can ban me or whatever

  • reply
  • like