Running from source

[shocknet-justin]

Trying to run this on a non-Mac, the instructions in the Readme result in the app serving This is a placeholder needed for our build system in dev mode. You should never see it.

Running the electron app in this state just delivers a popup to select a file in the desktop-app folder.

I assume because it's titled Setting up the development environment that it's not the way I want to run this as a user. How would I go about that?

[williamluke4]

@capitalistdog Have you tried yarn run-electron or npm run run-electron

[shocknet-justin]

Yes, that's where I get the popup to select the file.

The parting words about using JSX better got me down the react-bootstrap rabbit hole and I've since gone that route.

[jaredp]

You're doing it right. From the readme:

When you open Pagedraw for the first time, it will ask you to open a .pagedraw.json file. If you'd like to create a new file, click cancel when it asks you to open a file, and it'll ask you where to create a new file.

This is a placeholder needed for our build system in dev mode. You should never see it. is something you can ignore— just close the localhost:3000 tab in your browser.

[rahul-intel]

@jaredp Thanks for your valuable responses.
I am also running this at my local by following the instructions mentioned in the readme file. When I run yarn run-electron I am able to run the Pagedraw desktop app but couldn't see any option to import file from Figma. Below is the screenshot that I am seeing after running the app

Let me know if I am missing something or this feature is in TODO section for the time?

Thanks,
Rahul

[jaredp]

@rahul-intel see #7

The code for Figma importing is at https://github.com/Pagedraw/pagedraw/blob/master/src/figma-import.coffee#L107

You should be able to use it as-is, just add UI

[rahul-intel]

@jaredp Thanks for the quick response.

Now I have added @figma_url = 'https://www.figma.com/file/htPFcQMsouzvMoj6Nj9FKj/Wireframe-Kit-(Copy)?node-id=1528%3A629' in the doc.coffee file and figma_access_token in the index.html file, after running the app I see the Update From Figma option gets displayed in the right sidebar of the Pagedraw screen.

After clicking on Update From Figma button it display the Updating from Figma Modal window that never closes itself and only shows loading image inside it.

Can you please help me to getting out of this or let me know what I am missing.

[rahul-intel]

@jaredp

After adding the access token in the figma-import.coffee file I was able to get the response from figma API, but still it's not rendering the blocks in the editor.
Please help me to get out of this.

[jaredp]

Setting the figma_url in the doc is clever!

That's not how the figma importing works though.

The "Update from Figma" button is not "Import from Figma". It's doing a lot more.

The "Update from Figma" button assumes doc you have open was already created via an import from Figma, and want to pull in new changes. The flow in mind was:

1. Design in Figma
2. Pull the Figma into Pagedraw
3. Make changes in Pagedraw (data bindings, etc)
4. Realize you want to change the design:
   4a. Make changes in Figma
   4b. Pull the changes into Pagedraw via the "Update from Figma" button
5. Repeat 3 & 4 as needed

The "Update from Figma" button was doing clever things to combine changes you made in Pagedraw with changes you made in Figma. It can't work on a doc that's not already associated with Figma. It also relies on some server stuff that's not supported with the open source release, because we decommissioned our servers.

You should try

@doc = figma_import(figma_url, apiKey)

from somewhere in Editor (edit-page.coffee)

[rahul-intel]

@jaredp, Thanks! for your quick response.

Now I am able to import from figma.

[timeshift92]

@rahul-intel Hello, can you tell where you added @doc in order to be able to import from figma?

[rahul-intel]

@timeshift92
Hi, I have achieved this by adding below code in edit-page.cjsx
figma_import(@figma_url_val,window.pd_params.figma_access_token).then((promise)=>@setDocJson(promise.doc_json))

[lmuller18]

@rahul-intel Any chance of putting up a PR with your solution for updating from Figma? I am also having issues figuring out how to import my Figma designs.

[rahul-intel]

@lmuller18

Creating PR is not possible for my side as of now because I did it in my local instance and I am no longer working on this feature, so not in sync with this repo.
But, I have achieved this by adding a separate UI in tobbar.cjsx file and a handler in edit-page.cjsx file.

Code from my tobbar.cjsx file

<div className="topbar-topbarbutton_instance_13-8">
      <Topbarbutton state={"A"} text={"Import Figma"} onClick={(@props.editor.handleImportFromFigma)} image={"https://ucarecdn.com/8417d66c-2efb-4f3d-a128-10bb64bfbae0/"} disabled={false} /> 
</div>

Code from my edit-page.cjsx file

handleImportFromFigma: ->
       modal.show ((closeHandler) =>
            return [
                    <Modal.Header>
                        <Modal.Title>Import from Figma</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                    <FormControl type="text" style={width: '100%'} valueLink={propLink(this, 'figma_url_val', => @handleDocChanged(fast: 'true'))} placeholder="Enter Figma URL" />
                    </Modal.Body>
                    <Modal.Footer>
                        <PdButtonOne type="default" onClick={closeHandler}>Close</PdButtonOne>
                        <PdButtonOne type="primary" onClick={(=>
                            promise = figma_import(@figma_url_val, window.pd_params.figma_access_token)
                            @figma_url_val = '';
                            setTimeout((=>
                                promise.then((t)=>@setDocJson(t.doc_json))
                            ),3000)
                            closeHandler()
                        )}>Import</PdButtonOne>
         </Modal.Footer>
   ])

and for Updating from Figma

showUpdatingFromFigmaModal: ->
        if access_token = window.pd_params.figma_access_token
            window.history.replaceState(null, null, "/pages/#{window.pd_params.page_id}")
            modal.show ((closeHandler) =>
                promise = figma_import(@doc.figma_url, access_token)
                promise.then ((t) =>
                    @updateJsonFromFigma(t.doc_json)
                    closeHandler())
                return [
                    <Modal.Header>
                        <Modal.Title>Updating from Figma</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <img style={display: 'block', marginLeft: 'auto', marginRight: 'auto'} src="https://ucarecdn.com/59ec0968-b6e3-4a00-b082-932b7fcf41a5/" />
                    </Modal.Body>
                ])
        else
            window.location.href = "/oauth/figma_redirect?page_id=#{window.pd_params.page_id}"